Document

--- theme: condensed-night-purple --- 我正在参与掘金创作者训练营第6期，[点击了解活动详情](https://juejin.cn/post/7134166674160222221/ "https://juejin.cn/post/7134166674160222221/") ## 前言大家好，我是**HoMeTown** 不知道大家最近有没有看到过封面上的这张图，某公司在个人工位`安装监控`，首先我个人认为，第一每个行业有每个行业的规定，如果公司和员工提前做好沟通，并签过合同协议的话，问题不大，比如银行职员这种岗位。第二是私人企业和员工如果签订了补偿协议？协议里明确说明工资翻3倍？4倍？5倍？或者其他的对员工有利的条件？（如果一个探头能翻3倍工资，那我觉得我可以装满）但是如果是公司在没有和员工沟通的前提下，未经员工同意强制在工位上安装这个破玩意，那我觉得这公司有点太不人道了，违不违法这个咱确实不懂，也不做评论。类似这样的操作，我本着好奇的心态，又搜了搜，发现这种情况好像不在少数，比如这样： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/da307b1065cd48c692f0f17c82864c1c~tplv-k3u1fbpfcp-watermark.image?) 再或者这样： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/94c4c5ac7a9a4d4f8f41c34c0ccf7455~tplv-k3u1fbpfcp-watermark.image?) 作为一个程序员，这点探头能难得到我？我能因为你这点儿探头止步不前了？话不多说，是时候给你秀秀肌肉💪🏻了，开干！

images (3).jpeg

## 组合拳拳谱封装函数`lick`作为主函数直接 export，让广大的友友们开箱即用！ `lick`函数内置： `init`初始化方法、`move`移动方法、`setupEvent`事件注册方法以及`setupStyle`等关键函数，实现事件上的可控制移动。 ## lick！重卷出击！ ```js export function lick(lickdogWords) { setupStyle(); // 偏移值 let left = 0; //声明定时器 let timer = null; // 文字 let lickWord = ""; const out = document.querySelector("#lickdog-out_wrap"); out.innerHTML = `

${lickWord}

`; 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进行才艺展示！： ``` Document

``` Duang！ Duang！ Duang！效果来辽！ ![Aug-25-2022 16-39-14.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf826056ee374d75aa6a686d97ad95e0~tplv-k3u1fbpfcp-watermark.image?) 嗯，按照上面的代码，你可以通过最简单、最快的方式，立即在你的网页中获得一个置顶的！可以无限轮播`公司标语`的跑马灯！而且色彩足够鲜艳，监控器一眼就能看到！！！咱一整个就是说，这玩意儿往上面一放，老板看到不得夸你两句？给你提提薪资？给你放俩天假？

## 不够满意？如果你觉的上面的功能还不够完美，我们可以添加一个空格事件，当你发现你觉得`不错的标语`（你想让老板给你涨薪的标语）时，仅仅只需要动动你的大拇指敲下空格键，呐，如你所愿，暂停⏸了！该标语会一直停留在展示区域，让老板仔细观看！（你品，你细品！） ```js 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); } } }; } ``` 效果如下： ![Aug-25-2022 16-46-51.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13fdca036c4e48b1a72a35049f1ea8aa~tplv-k3u1fbpfcp-watermark.image?) ## 还不够满意？如果你觉得太慢，你甚至可以完全自定义设置滚动速度，让标语滚动更快或者更慢，像这样： ```js ... const speed = config?.speed ?? 10; ... //开始定时器 timer = setInterval(move, speed); ``` ![aaaa.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7dbe4a1e8c8d4e2899d098df7b4085bf~tplv-k3u1fbpfcp-watermark.image?) 觉得自己的句子不够斗志昂扬？不够有激情？没问题，开启`beautify`，自动为你添加`！`。 ``` lickdog.lick({ [ ... ], { speed: 1, enableBeautify: true, } }) ``` 不想用`！`？没问题！使用`beautifyText`！去自定义吧，自定义你想表达的情绪；自定义不被自定义的自定义： ``` lickdog.lick({ [ ... ], { speed: 1, enableBeautify: true, beautifyText: '！***、' } }) ``` ![caxc.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a76d243850ac4aca959b9bd6f98cae1e~tplv-k3u1fbpfcp-watermark.image?) ## 完结以玩笑的方式跟大家分享一个了知识点：`文字的横向滚动轮播`。最后呢，关于这个话题，如果有朋友不幸遇到了，自己决定提不提桶就好。愿好㊗️。 > 挣钱嘛，生意，不寒碜 --《让子弹飞》 ## 往期回顾 - [【Git】什么！？都快2023年了还搞不清楚 git rebase 与 git merge！？😮](https://juejin.cn/post/7135261815935598600) - [前端老司机 70+ 实用工具网站分享（建议收藏！）🔥🔥](https://juejin.cn/post/7129412947931037732) - [使用eslint + prettier + husky + lint-staged 约束项目的最佳实践！](https://juejin.cn/post/7127829940380106782) - [【小程序】爆肝 3 天总结的微信小程序优化指南（收藏夹吃灰吧！）🔥🔥](https://juejin.cn/post/7127448103908556831) - [【VUE】从源码角度说清楚MVVM！实现v-model！真的很简单！🔥](https://juejin.cn/post/7126714556730048519) - [【CSS】5分钟带你彻底搞懂 W3C & IE 盒模型！🔥🔥](https://juejin.cn/post/7124859308331761671) - [【CSS】有意思的BFC：Block Formatting Context（块格式化上下文）！🤡](https://juejin.cn/post/7125229317826543652) - [【CSS】聊一聊CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别](https://juejin.cn/post/7125980324596547620) - [【性能】7分钟带你了解【尤大】都在使用的 Chrome Runtime Performance Debug！](https://juejin.cn/post/7102990967162503181) - [ 【源码角度】7分钟带你搞懂ESLint核心原理！](https://juejin.cn/post/7102620286675058725) - [ 【JavaScript】手把手教你写高质量 JavaScript 异步代码！](https://juejin.cn/post/7102240670269571109) - [ 我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss + NavieUI】](https://juejin.cn/post/7101943469085556766) - [ ............... 查看更多 ............... ](https://juejin.cn/user/4116184668057390)