敢在我工位装摄像头？吃我一套JS + CSS组合拳！！
敢在我工位装摄像头？吃我一套JS + CSS组合拳！！
前言
大家好，我是HoMeTown
不知道大家最近有没有看到过封面上的这张图，某公司在个人工位安装监控，首先我个人认为，第一每个行业有每个行业的规定，如果公司和员工提前做好沟通，并签过合同协议的话，问题不大，比如银行职员这种岗位。第二是私人企业和员工如果签订了补偿协议？协议里明确说明工资翻3倍？4倍？5倍？或者其他的对员工有利的条件？（如果一个探头能翻3倍工资，那我觉得我可以装满）
但是如果是公司在没有和员工沟通的前提下，未经员工同意强制在工位上安装这个破玩意，那我觉得这公司有点太不人道了，违不违法这个咱确实不懂，也不做评论。
类似这样的操作，我本着好奇的心态，又搜了搜，发现这种情况好像不在少数，比如这样：
再或者这样：
作为一个程序员，这点探头能难得到我？我能因为你这点儿探头止步不前了？
话不多说，是时候给你秀秀肌肉💪🏻了，开干！
组合拳拳谱
封装函数lick作为主函数直接 export，让广大的友友们开箱即用！
lick函数内置： init初始化方法、move移动方法、setupEvent事件注册方法以及setupStyle等关键函数，实现事件上的可控制移动。
lick！重卷出击！
export function lick(lickdogWords) { setupStyle(); // 偏移值
let left = 0; //声明定时器
let timer = null; // 文字
let lickWord = "";
const out = document.querySelector("#lickdog-out_wrap");
out.innerHTML = `
<div id="lickdog-inner_wrap">
<div class="text" id="text-before">${lickWord}</div>
<div class="text" id="text-after">${lickWord}</div>
</div>
`; const inner = document.querySelector("#lickdog-inner_wrap"); const textBefore = document.querySelector("#text-before"); init(); setupEvent();
// 初始化
function init() { // 开启定时器之前最好先清除一下定时器
clearInterval(timer); //开始定时器
timer = setInterval(move, speed);
}
function setupStyle() { const styleTag = document.createElement("style");
styleTag.type = "text/css";
styleTag.innerHTML = `
#lickdog-out_wrap{
width: 100%;
height: 100px;
position: fixed;
overflow: hidden;
text-overflow: ellipsis;
/* 颜色一定要鲜艳 */
background-color: #ff0000;
border-radius: 8px;
/* 阴影也一定要够醒目 */
box-shadow: rgba(255, 0, 0, 0.4) 5px 5px, rgba(255, 0, 0, 0.3) 10px 10px, rgba(255, 0, 0, 0.2) 15px 15px, rgba(255, 0, 0, 0.1) 20px 20px, rgba(255, 0, 0, 0.05) 25px 25px;
}
#lickdog-inner_wrap {
// padding: 0 12px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
position: absolute;
left: 0;
top: 0;
}
.text{
white-space:nowrap;
box-sizing: border-box;
color: #fff;
font-size: 48px;
font-weight:bold;
/* 文字一定要立体 */
text-shadow:0px 0px 0 rgb(230,230,230),1px 1px 0 rgb(215,215,215),2px 2px 0 rgb(199,199,199),3px 3px 0 rgb(184,184,184),4px 4px 0 rgb(169,169,169), 5px 5px 0 rgb(154,154,154),6px 6px 5px rgba(0,0,0,1),6px 6px 1px rgba(0,0,0,0.5),0px 0px 5px rgba(0,0,0,.2);
}
`; document.head.appendChild(styleTag)
}
//封装移动函数
function move() { if (left >= textBefore.offsetWidth) {
left = 0;
} else {
left++;
}
inner.style.left = `${-left}px`;
}
function setupStyle() { ... }
}通过简单的代码，我们基本实现了我们的这一套组合拳，可能说到这，有的朋友还不知道这段代码到底有什么作用，意义在哪，有什么实际的用途...
接下来建一个html进行才艺展示！：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html, body { margin: 0; padding: 0;
} </style>
</head>
<body>
<div id="lickdog-out_wrap"><div>
<script>
(async function() { const lickdog = await import('./lickdog.js')
lickdog.lick( // 重点！
[ "问题到我为止，改变从我开始", "人在一起叫聚会，心在一起叫团队", "工作创造价值，奉献带来快乐，态度决定一切", "怠惰是贫穷的制造厂",
"一个优秀的员工必须培养自己对工作的兴趣，使工作成为愉快的旅程",
"一朵鲜花打扮不出美丽的春天，一个人先进总是单枪匹马，众人先进才能移山填海", "抓住今日，尽可能少的依赖明天", "行动是成功的开始，等待是失败的源头", "强化竞争意识，营造团队精神", "迅速响应，马上行动", "去超越那个比你牛逼，更比你努力的人", "不为失败找理由，只为成功找方法", "含泪播种的人一定能含笑收获", "不经历风雨，怎么见彩虹", "路，要一步一步足踏实地地往前走，才能获得成功",
]
)
})() </script>
</body></html>Duang！
Duang！
Duang！
效果来辽！
嗯，按照上面的代码，你可以通过最简单、最快的方式，立即在你的网页中获得一个置顶的！可以无限轮播公司标语的跑马灯！
而且色彩足够鲜艳，监控器一眼就能看到！！！
咱一整个就是说，这玩意儿往上面一放，老板看到不得夸你两句？给你提提薪资？给你放俩天假？
不够满意？
如果你觉的上面的功能还不够完美，我们可以添加一个空格事件，当你发现你觉得不错的标语（你想让老板给你涨薪的标语）时，仅仅只需要动动你的大拇指敲下空格键，呐，如你所愿，暂停⏸了！该标语会一直停留在展示区域，让老板仔细观看！（你品，你细品！）
function setupEvent() { // 如果遇到自己喜欢的句子，不妨空格⏸，让老板多看看
document.onkeydown = function (e) { var keyNum = window.event ? e.keyCode : e.which; //获取被按下的键值
if (keyNum == 32) { if (timer) { clearInterval(timer);
timer = null;
} else {
timer = setInterval(move, speed);
}
}
};
}效果如下：
还不够满意？
如果你觉得太慢，你甚至可以完全自定义设置滚动速度，让标语滚动更快或者更慢，像这样：
...const speed = config?.speed ?? 10;
...//开始定时器timer = setInterval(move, speed);觉得自己的句子不够斗志昂扬？不够有激情？没问题，开启beautify，自动为你添加！。
lickdog.lick({
[ ... ],
{ speed: 1, enableBeautify: true,
}
})不想用！？没问题！使用beautifyText！去自定义吧，自定义你想表达的情绪；自定义不被自定义的自定义：
lickdog.lick({
[ ... ],
{ speed: 1, enableBeautify: true, beautifyText: '！***、'
}
})
完结
以玩笑的方式跟大家分享一个了知识点：文字的横向滚动轮播。
最后呢，关于这个话题，如果有朋友不幸遇到了，自己决定提不提桶就好。
愿好㊗️。
挣钱嘛，生意，不寒碜 --《让子弹飞》