大乐透双色球生成代码

最新推荐文章于 2022-10-10 20:58:39 发布

良__

最新推荐文章于 2022-10-10 20:58:39 发布

阅读量1.5k

点赞数

文章标签： css javascript css3

本文链接：https://blog.csdn.net/weixin_49533977/article/details/125790520

版权

大乐透双色球生成

代码如下：

<!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>
    .box {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .ball {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #fff;
      text-align: center;
      line-height: 30px;
      margin: 0 5px;
      /* float: left; */
      color: #fff;
    }

    .red-ball {
      background-color: red;
    }

    .blue-ball {
      background-color: blue;
    }

    .btn-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
    }

    .btn {
      width: 45%;
      height: 30px;
      border-radius: 5px;
      text-align: center;
      line-height: 30px;
      margin: 10px 5px;
      color: #fff;
    }

    .red-btn {
      background-color: red;
    }

    .blue-btn {
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="btn-box">
    <button class="btn blue-btn dlt1">
      生成一注大乐透
    </button>
    <button class="btn red-btn ssq1">
      生成一注双色球
    </button>
    <button class="btn blue-btn dlt5">
      生成五注大乐透
    </button>
    <button class="btn red-btn ssq5">
      生成五注双色球
    </button>
  </div>
</body>
<script>

  function getRandom(min, max, a) {
    //生成5个1-35之间不重复的随机整数
    var arr1 = [];
    while (arr1.length < a) {
      var num = Math.floor(Math.random() * max + 1);
      if (arr1.indexOf(num) == -1) {
        arr1.push(num);
      }
    }
    //生成2个1-12之间不重复的随机整数
    var arr2 = [];
    while (arr2.length < (7 - a)) {
      var num = Math.floor(Math.random() * min + 1);
      if (arr2.indexOf(num) == -1) {
        arr2.push(num);
      }
    }
    //返回一个对象
    return {
      arr1: arr1,
      arr2: arr2
    };
  }

  //创建n个类名为box的div并将创建好的div添加到body中
  function createDiv(m, n, className1, className2) {
    var box = document.createElement('div');
    box.className = 'box';
    for (let i = 0; i < m.length; i++) {
      let ball = document.createElement('div');
      ball.className = className1;
      ball.innerHTML = m[i];
      box.appendChild(ball);
    }
    for (let i = 0; i < n.length; i++) {
      let ball = document.createElement('div');
      ball.className = className2;
      ball.innerHTML = n[i];
      box.appendChild(ball);
    }
    document.body.appendChild(box);
  }

  //清除类名为ball的div
  function removeDom() {
    var box = document.querySelectorAll('.box');
    for (let i = 0; i < box.length; i++) {
      box[i].remove();
    }
  }
  //生成一注大乐透
  document.querySelector('.dlt1').onclick = function () {
    removeDom()
    var arr = getRandom(12,35,5);
    createDiv(arr.arr1, arr.arr2, 'ball red-ball', 'ball blue-ball');
  }
  //生成一注双色球
  document.querySelector('.ssq1').onclick = function () {
    removeDom()
    var arr = getRandom(16,33,6);
    createDiv(arr.arr1, arr.arr2, 'ball red-ball ', 'ball blue-ball');
  }

  //监听点击事件生成五注大乐透
  document.querySelector('.dlt5').onclick = function () {
    removeDom()
    for (let i = 0; i < 5; i++) {
      var arr = getRandom(12,35,5);
      createDiv(arr.arr1, arr.arr2, 'ball red-ball', 'ball blue-ball');
    }
  }

  //生成五注双色球
  document.querySelector('.ssq5').onclick = function () {
    removeDom()
    for (let i = 0; i < 5; i++) {
      var arr = getRandom(16,33,6);
      createDiv(arr.arr1, arr.arr2, 'ball red-ball', 'ball blue-ball');
    }
  }

</script>

</html>