html+js+css做一个抽奖

最新推荐文章于 2024-01-07 23:20:01 发布

codekjy

最新推荐文章于 2024-01-07 23:20:01 发布

阅读量258

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_47997447/article/details/120877341

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      position: relative;
    }

    #baoguo {
      width: 310px;
      height: 310px;
      display: flex;
      flex-wrap: wrap;
      left: 50%;
      top: 300px;
      position: absolute;
      margin: 0 auto;
      transform: translate(-50%, -50%);
    }

    .option {
      width: 100px;
      height: 100px;
      background-color: #e0e0ba;
      text-align: center;
      line-height: 100px;
      border: 1px solid red;
      transition: all .5s;
    }

    #start {
      width: 100px;
      height: 100px;
      background-color: #4ac94a;
      text-align: center;
      line-height: 100px;
      border: 1px solid green;
      cursor: pointer;
    }

  </style>
</head>
<body>
<div id="baoguo">
  <div class="option">1</div>
  <div class="option">2</div>
  <div class="option">3</div>
  <div class="option">4</div>
  <div id="start">抽奖</div>
  <div class="option">6</div>
  <div class="option">7</div>
  <div class="option">8</div>
  <div class="option">9</div>
</div>
<script>
<!--  获取标签-->
  let btn = document.getElementById('start');
  let options = document.getElementsByClassName('option');
  //添加点击事件
  btn.onclick = function () {
    //定义一个timer，控制点击是否执行
    let timer;
    let num = 0;
    if (timer == null) {
      timer = setInterval(() => {
        console.log(num)
        num++;
        console.log(num)
        //随机出现一个0到七的整数。
        let res = Math.round(Math.random() * (7 - 0) + 0);
        //改变颜色之前把其他的也是变回原来的颜色。
        for (let i = 0; i < options.length; i++) {
          options[i].style.backgroundColor = '#e0e0ba'
        }
        //改变当前模块颜色。
        options[res].style.backgroundColor = 'red';
        //定义随机到多少就停止。
        if (num >= 15) {
          clearInterval(timer);
          timer = null;
        }
      }, 300)
    }

  }
</script>
</body>
</html>

codekjy

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
html+js+css做一个抽奖

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; padding: 0; position: relative; } #baoguo { width: 310px; .
复制链接

扫一扫