注册
web

敢在我工位装摄像头?吃我一套JS ➕ CSS组合拳!!👊🏻

b4e72483f36441a38afd9d7bd3d7fad0~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?

前言

大家好,我是HoMeTown

不知道大家最近有没有看到过封面上的这张图,某公司在个人工位安装监控,首先我个人认为,第一每个行业有每个行业的规定,如果公司和员工提前做好沟通,并签过合同协议的话,问题不大,比如银行职员这种岗位。第二是私人企业和员工如果签订了补偿协议?协议里明确说明工资翻3倍?4倍?5倍?或者其他的对员工有利的条件?(如果一个探头能翻3倍工资,那我觉得我可以装满)

但是如果是公司在没有和员工沟通的前提下,未经员工同意强制在工位上安装这个破玩意,那我觉得这公司有点太不人道了,违不违法这个咱确实不懂,也不做评论。

类似这样的操作,我本着好奇的心态,又搜了搜,发现这种情况好像不在少数,比如这样:

da307b1065cd48c692f0f17c82864c1c~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?

再或者这样:

94c4c5ac7a9a4d4f8f41c34c0ccf7455~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?

作为一个程序员,这点探头能难得到我?我能因为你这点儿探头止步不前了?

话不多说,是时候给你秀秀肌肉💪🏻了,开干!

4e7c9d191b3545f28814c547e91b8e16~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?

组合拳拳谱

封装函数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 id="text-before">${lickWord}</div>
       <div 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!

效果来辽!

bf826056ee374d75aa6a686d97ad95e0~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?

嗯,按照上面的代码,你可以通过最简单、最快的方式,立即在你的网页中获得一个置顶的!可以无限轮播公司标语的跑马灯!

而且色彩足够鲜艳,监控器一眼就能看到!!!

咱一整个就是说,这玩意儿往上面一放,老板看到不得夸你两句?给你提提薪资?给你放俩天假?

1d7dd2ebb6b04cd9aee236a1fa06e4ac~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?

不够满意?

如果你觉的上面的功能还不够完美,我们可以添加一个空格事件,当你发现你觉得不错的标语(你想让老板给你涨薪的标语)时,仅仅只需要动动你的大拇指敲下空格键,呐,如你所愿,暂停⏸了!该标语会一直停留在展示区域,让老板仔细观看!(你品,你细品!)

  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);
      }
    }
  };
}

效果如下:

13fdca036c4e48b1a72a35049f1ea8aa~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?

还不够满意?

如果你觉得太慢,你甚至可以完全自定义设置滚动速度,让标语滚动更快或者更慢,像这样:

...
const speed = config?.speed ?? 10;
...
//开始定时器
timer = setInterval(move, speed);

7dbe4a1e8c8d4e2899d098df7b4085bf~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?

觉得自己的句子不够斗志昂扬?不够有激情?没问题,开启beautify,自动为你添加

lickdog.lick({
  [ ... ],
  {
       speed: 1,
       enableBeautify: true,
  }
})

不想用?没问题!使用beautifyText!去自定义吧,自定义你想表达的情绪;自定义不被自定义的自定义:

lickdog.lick({
  [ ... ],
  {
       speed: 1,
       enableBeautify: true,
       beautifyText: '!***、'
  }
})

a76d243850ac4aca959b9bd6f98cae1e~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?

完结

以玩笑的方式跟大家分享一个了知识点:文字的横向滚动轮播

最后呢,关于这个话题,如果有朋友不幸遇到了,自己决定提不提桶就好。

愿好㊗️。

挣钱嘛,生意,不寒碜 --《让子弹飞》

来源:juejin.cn/post/7135994466006990856

0 个评论

要回复文章请先登录注册