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

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

我正在参与掘金创作者训练营第6期,点击了解活动详情

前言

大家好,我是HoMeTown

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

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

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

image.png

再或者这样:

image.png

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

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

images (3).jpeg

组合拳拳谱

封装函数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!

效果来辽!

Aug-25-2022 16-39-14.gif

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

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

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

eat_shit.gif

不够满意?

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

  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

还不够满意?

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

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

aaaa.gif

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

lickdog.lick({
    [ ... ],
    {
        speed: 1,
        enableBeautify: true,
    }
})
复制代码

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

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

caxc.gif

完结

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

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

愿好㊗️。

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

往期回顾

分类:
前端
收藏成功!
已添加到「」, 点击更改