怎么点击按钮发生闪烁事件？

新手上路，请多包涵

<!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">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
  <style>


    /* 容器样式 */
    .container {
      position: relative; /* 为绝对定位的子元素提供参考 */
      width: 350px; /* 宽度 */
      height: 350px; /* 高度 */
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* 旋转按钮样式 */
    .container .spinBtn {
      position: absolute; /* 绝对定位 */
      width: 80px; /* 按钮宽度 */
      height: 80px; /* 按钮高度 */
      background: #ff0000; /* 背景色 */
      border-radius: 50%; /* 圆形按钮 */
      z-index: 10; /* 层级 */
      display: flex;
      justify-content: center;
      align-items: center;
      text-transform: uppercase; /* 大写文本 */
      font-weight: 400; /* 字体加粗 */
      color: #ffffff; /* 字体颜色 */
      letter-spacing: 0.1em; /* 字母间距 */
      cursor: pointer; /* 鼠标指针样式 */
      user-select: none; /* 禁止选中文本 */
      bottom: 180px; /* 距离底部 */
      left: 26.3%; /* 居中 */
      font-size: 24px;
      transition: transform 5s ease-in-out;
    }

    /* 旋转按钮的伪元素 */
    .container .spinBtn::before {
      content: ''; 
      position: absolute;
      top: -28px; /* 上移 */
      width: 20px; /* 上面的三角形宽度 */
      height: 30px; /* 上面的三角形高度 */
      background: #ff0000; /* 背景色 */
      clip-path: polygon(50% 0%, 15% 100%, 85% 100%); /* 创建三角形 */
    }

    /* 转盘样式 */
    .container .wheel {
      position: absolute;
      top: 0;
      left: 0;
      width: 75%; /* 宽度 */
      height: 75%; /* 高度 */
      background: #ff0000; /* 背景色 */
      border-radius: 50%; /* 圆形 */
      overflow: hidden; /* 溢出隐藏 */
      box-shadow: 0 0 0 18px #ff0000; /* 阴影效果 */
    }

    /* 转盘数字 */
    .container .wheel .number {
      position: absolute;
      width: 50%; /* 数字块宽度 */
      height: 50%; /* 数字块高度 */
      background: var(--clr); /* 背景颜色为自定义属性 */
      transform-origin: bottom right; /* 旋转起点 */
      transform: rotate(calc(60deg * var(--i))); /* 旋转 */
      clip-path: polygon(0 0, 72.5% 0, 99% 99%, 0 72.5%); /* 剪切形状 */
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* 数字文本样式 */
    .container .wheel .number span {
      position: relative;
      transform: rotate(-45deg); 
      font-size: 1em; /* 字体大小 */
      font-weight: 400; /* 字体加粗 */
      color: #000000; /* 字体颜色 */
    }

     /* .container .wheel .number span::after {
      content: ''; 
      position: absolute;
      font-size: 0.75em;
      font-weight: 500;
    } */

     /* 绿灯样式 */
     .container .wheel .greem {
      position: absolute;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: green;
      bottom:  75px;
      left: 22%;
     }
  </style>
</head>
<body>
  <div class="container">
    <div class="spinBtn">抽奖</div> <!-- 旋转按钮 -->
    <div class="wheel">
      <!-- 每个数字块 -->
      <div class="number" style="--i:1;--clr:#fbcbb4;">
        <span>一等奖</span>
        <div class="greem"></div>
      </div>
      <div class="number" style="--i:2;--clr:#fbcbb4;">
        <span>二等奖</span>
        <div class="greem"></div>
      </div>
      <div class="number" style="--i:3;--clr:#fbcbb4;">
        <span>三等奖</span>
        <div class="greem"></div>
      </div>
      <div class="number" style="--i:4;--clr:#fbcbb4;">
        <span>四等奖</span>
        <div class="greem"></div>
      </div>
      <div class="number" style="--i:5;--clr:#fbcbb4;">
        <span>五等奖</span>
        <div class="greem"></div>
      </div>
      <div class="number" style="--i:6;--clr:#fbcbb4;">
        <span>六等奖</span>
        <div class="greem"></div>
      </div>
    </div>
  </div>

  <script>
    // 获取转盘和旋转按钮
    let wheel = document.querySelector('.spinBtn')
    let spinBtn = document.querySelector('.spinBtn')
    let value = Math.ceil(Math.random() * 3600) // 生成初始旋转角度

    // 按钮点击事件
    spinBtn.onclick = function() {
      spinBtn.style.transform = 'rotate(' + value + "deg)"; // 旋转转盘
      value += Math.ceil(Math.random() * 3600) // 增加旋转角度
    }
    // 绿灯效果
    let box = document.querySelector('.greem')
  </script>
</body>
</html>

小白想让这个转盘上的小绿灯盒子怎么设置在点击抽奖按钮时发生闪烁就是绿色和另外一种颜色中来回闪烁闪烁20次每次250毫秒总共5秒谢谢

前端

html5 javascript

阅读 1.2k

AI BotBETA

要实现点击抽奖按钮时小绿灯盒子在绿色和另一种颜色（比如黄色）之间闪烁20次，每次闪烁间隔250毫秒，总共持续5秒的效果，你可以使用JavaScript的setInterval和clearInterval函数结合CSS的backgroundColor属性来实现。以下是如何修改你的代码来实现这个效果：

<!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>
    /* ... 其他样式保持不变 ... */
  </style>
</head>
<body>
  <!-- ... HTML结构保持不变 ... -->

  <script>
    // 获取转盘和旋转按钮
    let wheel = document.querySelector('.wheel'); // 注意这里修正为获取转盘，而不是旋转按钮
    let spinBtn = document.querySelector('.spinBtn');
    let greem = document.querySelector('.greem'); // 获取小绿灯盒子
    let value = Math.ceil(Math.random() * 3600); // 生成初始旋转角度
    let blinkCount = 0; // 闪烁计数器
    let blinkInterval; // 闪烁间隔ID

    // 按钮点击事件
    spinBtn.onclick = function() {
      // 旋转转盘
      wheel.style.transform = 'rotate(' + value + "deg)";
      value += Math.ceil(Math.random() * 3600);

      // 开始闪烁
      blinkInterval = setInterval(function() {
        if (blinkCount < 20) { // 闪烁20次
          greem.style.backgroundColor = blinkCount % 2 === 0 ? 'green' : 'yellow'; // 切换颜色
          blinkCount++;
        } else {
          clearInterval(blinkInterval); // 停止闪烁
          blinkCount = 0; // 重置计数器
          greem.style.backgroundColor = 'green'; // 回到初始颜色
        }
      }, 250); // 每次闪烁间隔250毫秒
    };
  </script>
</body>
</html>

注意：

我将wheel变量的选择器修正为.wheel，因为它实际上是用来获取转盘的元素，而不是旋转按钮。
添加了greem变量来直接访问小绿灯盒子。
在spinBtn.onclick函数中，设置了一个setInterval来每250毫秒改变一次greem的背景颜色，并在闪烁20次后通过clearInterval停止闪烁。
使用了blinkCount变量来跟踪闪烁的次数，并在达到20次后停止闪烁。
使用了模运算%来决定是否应该切换到另一种颜色（在这个例子中是黄色和绿色之间的切换）。

2 个回答

得票最新

Frank

27918

发布于
10 月 25 日陕西

更新于
10 月 25 日

一开始感觉得用js，试着用了css的animation属性，用了一点js，做个参考，当然你用纯js也行
https://codesandbox.io/p/sandbox/xmvr45

三王两点

发布于
11 月 1 日陕西

新手上路，请多包涵

添加css

.blink {
        animation: blink 0.25s linear 1s infinite;
      }
      @keyframes blink {
        0% {
          background-color: green;
        }
        50% {
          background-color: #fbcbb4;
        }
        100% {
          background-color: green;
        }
      }

点击事件中添加

let box = document.querySelectorAll('.greem')
box.forEach(item => {
          item.classList.add('blink')
          setTimeout(() => {
            item.classList.remove('blink')
          }, 20000) // 绿灯闪烁的毫秒数
        })

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

怎么点击按钮发生闪烁事件？

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

网站的不同域名互相跳转如何保持登录态？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？