以前项目中的一些“骚”操作

最近比较忙，也没咋写博客，今天突然想到以前自己写的博客项目，还是做了一些"骚"操作的，在此记录一下。

国家纪念日使网站灰化

这里我们需要借助moment这个库来实现

    import moment from 'moment'
    const memorial = () => {
      let now = moment().locale('zh-cn').format('MM-DD');
      if (
        now === '04-04' || // 清明
        now === '05-12' || // 汶川大地震
        now === '12-13' // 南京大屠杀
      ) {
        // 灰化
        document.getElementsByTagName('html')[0].style = 'filter: grayscale(100%);'
      }
    }

    export default memorial

控制台输入各式各样的文字 / 图案

    // 控制台的显示内容
    console.log('%c 欢迎来到 昊淼Blog! ', 'background: rgba(18, 141, 244, 0.1); color: #1890ff');
    console.log('%c 如果你看到了这里，你一定具有一颗追求编程的心，让我们一起加油吧！', 'color: #1890ff');

主要就是通过%c 为打印内容定义样式。%c后面的内容将应用我们设置的样式。

具体用法请看mdn

这里提供一些网站为我们生成特殊图案。

鼠标点击飘出字体

animationend事件是当css3动画执行完毕后会被触发。

    let index = 0;
    const fnTextPopup = (event) => {
      let arr = ['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善']
      if (!arr || !arr.length) {
        return;
      }

      // 获取鼠标点击的位置
      let x = event.pageX,
        y = event.pageY;
      let eleText = document.createElement('span');
      eleText.className = 'text-popup';
      eleText.style.color = `rgb(${Math.random() * 256}, ${Math.random() * 256}, ${Math.random() * 256})`
      document.documentElement.appendChild(eleText);
      if (arr[index]) {
        eleText.innerHTML = arr[index];
      } else {
        index = 0;
        eleText.innerHTML = arr[0];
      }
      // 动画结束后删除自己
      eleText.addEventListener('animationend', function () {
        eleText.parentNode.removeChild(eleText);
      });
      // 位置(让其处于鼠标点击的中心位置)
      eleText.style.left = (x - eleText.clientWidth / 2) + 'px';
      eleText.style.top = (y - eleText.clientHeight) + 'px';
      // index递增
      index++;
    };

    document.documentElement.addEventListener('click', fnTextPopup, false)

css样式

    /* 鼠标点击样式 */
    .text-popup {
      position: absolute;
      z-index: 99;
      animation: textPopup 2s;
      /* color: #69c3da;  */
      user-select: none;
      white-space: nowrap;
    }

    @keyframes textPopup {
      0%,
      100% {
        opacity: 0;
      }

      5% {
        opacity: 1;
      }

      /* 开始到动画结束时，上偏50px */
      100% {
        transform: translateY(-50px);
      }
    }

切换主题

可以写多套css代码，切换主题时，去请求对应的css代码即可。
css变量 + setProperty

通过定义css变量，我们在设置样式时，都通过css变量去设置。这样我们在切换主题时就可以直接修改变量来达到效果。

一般将css变量放在根dom下。因为这里的变量可以被全部元素使用。全局css变量。

    :root {
      --theme_font: #fff;
      --theme_bg: #f00;
    }

点击切换主题的按钮，修改css变量。

    document.styleSheets[0].cssRules[0].style.setProperty("--theme_font", "#000")

一个小demo

    <!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>
        :root {
          --font-color: #000;
          --border-color: #f6de06;
          --bg-color: #fff;
        }

        p {
          color: var(--font-color);
          background: var(--bg-color);
          border: 2px solid var(--border-color);
        }

      </style>
    </head>
    <body>
      <p>一个小demo</p>
      <button id="light">切换主题（亮）</button>
      <button id="dark">切换主题（暗）</button>

      <script>
        const light = document.getElementById("light")
        const dark = document.getElementById("dark")
        const lightTheme = {
          "--font-color": "#000",
          "--border-color": "#f6de06",
          "--bg-color": "#fff"
        }
        const darkTheme = {
          "--font-color": "#fff",
          "--border-color": "#f00",
          "--bg-color": "#000"
        }

        light.addEventListener("click", function() {
          Object.keys(lightTheme).forEach(item => {
            document.styleSheets[0].cssRules[0].style.setProperty(item, lightTheme[item])
          })
        })

        dark.addEventListener("click", function() {
          Object.keys(darkTheme).forEach(item => {
            document.styleSheets[0].cssRules[0].style.setProperty(item, darkTheme[item])
          })
        })
      </script>
    </body>
    </html>

主题切换.gif