js实现双色球

css样式

  <style>
     * {
          cursor: pointer;
      }
      span {
          display: inline-block;
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border: 1px solid #000;
          border-radius: 50%;
          margin: 5px;
      }
  </style>
  <div id="red"></div>
  <div id="blue"></div>
  <button>开始</button>
  <button>停止</button>

通过js获取元素

      var red = document.getElementById('red')
      var blue = document.getElementById('blue')
      var start = document.getElementsByTagName('button')[0];
      var end = document.getElementsByTagName('button')[1];

生成元素，红球为33个，蓝球16个

      function generate(element, num) {
            var str = '';
            for (var j = 1; j <= num; j++) {
                str += '<span>' + j + '</span>'
            }
            element.innerHTML = str;
        }
        generate(red, 33);
        generate(blue, 16);

现在生成完元素以后，我们的界面是这样的，是不是看到了大奖在向你招手。

 

 

取随机数

      function ranDom(start, end) {
          var _a = end - start + 1;
          return Math.floor(Math.random() * _a + start)
      }

现在随机数取好了，下一步需要去生成一个数组，并且需要给数组进行去重以及确定数组内元素的个数。因为在这里我们需要调用上面取随机数的函数，所以这里也需要传上start和end

      function arrAy(num, start, end) {
          var _b = [];
          while (_b.length < num) {
              var _c = ranDom(start, end)
              if (_b.indexOf(_c) === -1) {
                  _b.push(_c);
              }
          }
          return _b;
      }

现在我们可以得到一个有随机数的数组，下一步就对页面上的元素进行渲染。

      function backGround(arr, color, element) {
          for (var i = 0; i < element.length; i++) {
              //先对元素内的所有元素进行背景色清空。
              element[i].style.background = '';
          }
          for (var j = 0; j < arr.length; j++) {
              //这里对对应的元素进行背景色改变。因为下标和元素差1个，所以这里减1。
              element[arr[j] - 1].style.background = color;
          }
      }

进行下一步，调用这些函数，因为下面需要定时器来让它自动选择，所以这里我把需要调用的函数写到了这一个函数内。

    function select() {
          var _d = arrAy(6, 1, 32)
          var _e = arrAy(1, 1, 16)
          backGround(_d, 'red', red.children);
          backGround(_e, 'blue', blue.children);
          console.log(_d,_e)
      }

做完这一步，所有的静态效果就完成了

现在就需要一个定时器来让它进行自动选择，这个定时器我加到了按钮的点击事件上

 

      var time = null
      start.onclick = function () {
          //如果不加判断，多次点击会造成定时器叠加，这样不是我们想要的效果
          if (time == null) {
              time = setInterval(function () {
                  select()
              }, 60)
          }
      }
      end.onclick = function () {
          clearInterval(time)
          time = null
      }

完整代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            cursor: pointer;
        }
        span {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #000;
            border-radius: 50%;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="red"></div>
    <div id="blue"></div>
    <button>开始</button>
    <button>停止</button>
    <script>
        var red = document.getElementById('red')
        var blue = document.getElementById('blue')
        var start = document.getElementsByTagName('button')[0];
        var end = document.getElementsByTagName('button')[1];
        function generate(element, num) {
            var str = '';
            for (var j = 1; j <= num; j++) {
                str += '<span>' + j + '</span>'
            }
            element.innerHTML = str;
        }
        generate(red, 33);
        generate(blue, 16);
        function ranDom(start, end) {
            var _a = end - start + 1;
            return Math.floor(Math.random() * _a + start)
        }
        function arrAy(num, start, end) {
            var _b = [];
            while (_b.length < num) {
                var _c = ranDom(start, end)
                if (_b.indexOf(_c) === -1) {
                    _b.push(_c);
                }
            }
            return _b;
        }
        function backGround(arr, color, element) {
            for (var i = 0; i < element.length; i++) {
                element[i].style.background = '';
            }
            for (var j = 0; j < arr.length; j++) {
                element[arr[j]-1].style.background = color;
            }
        }
        function select() {
            var _d = arrAy(6, 1, 33)
            var _e = arrAy(1, 1, 16)
            backGround(_d, 'red', red.children);
            backGround(_e, 'blue', blue.children);
        }
        var time = null
        start.onclick = function () {
            if (time == null) {
                time = setInterval(function () {
                    select()
                }, 60)
            }
        }
        end.onclick = function () {
            clearInterval(time)
            time = null
        }
    </script>
</body>

</html>

 

 原文详情地址：https://www.jianshu.com/p/9edef9982bed

posted @ 2021-09-27 09:35  sam-zh  阅读(397)  评论(0)    收藏  举报