Html5 闪眼网页

英雄不能受委屈

已于 2023-08-11 19:59:33 修改

阅读量68

点赞数 1

文章标签： html5 前端 html

于 2023-08-11 18:52:37 首次发布

本文链接：https://blog.csdn.net/2301_79108534/article/details/132238391

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>闪眼</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 100vw;
      height: 100vh;
      background-color: #27641b;
      text-align: center;
      padding-top: 200px;
    }

    .box h2 {
      font-size: 70px;
    }
  </style>
</head>

<body>
  <div class="box">
    <h2>闪眼系列1.0</h2>
    <button id="startButton">开始</button>
    <button id="stopButton">停止</button>
  </div>
  <script>
    function getRandomColor(flag) {
      // 如果是true，返回#ffffff
      if (flag) {
        let str = '#';
        let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
        for (let i = 1; i <= 6; i++) {
          let index = Math.floor(Math.random() * arr.length);
          str += arr[index];
        }
        return str;
      } else {
        // 否则返回rgb(255,255,255)
        let r = Math.floor(Math.random() * 256);
        let g = Math.floor(Math.random() * 256);
        let b = Math.floor(Math.random() * 256);
        return `rgba(${r},${g},${b})`;
      }
    }
    const boxElement = document.querySelector('.box');
    const h3 = document.querySelector('.box h2');
    let intervalId; // 用于存储定时器的标识符

    const myFunction = () => {
      let color = getRandomColor(true);
      boxElement.style.backgroundColor = color;
      let colorh3 = getRandomColor(false);
      h3.style.color = colorh3;
    };

    const startInterval = () => {
      let speedms = +prompt('请输入闪眼速度：（ms）/次');
      intervalId = setInterval(myFunction, speedms);
    };

    const stopInterval = () => {
      clearInterval(intervalId);
    };

    // 绑定按钮的点击事件
    const stopButton = document.querySelector('#stopButton');
    stopButton.addEventListener('click', () => {
      stopInterval();
    });
    // 绑定按钮的点击事件
    const startButton = document.querySelector('#startButton');
    startButton.addEventListener('click', () => {
      startInterval();
    });
    // 我的网页地址 http://brandon.3vcn.work

  </script>
</body>

</html>

”低级饱和，高级缺乏“