javascript实现彩票随机选号功能-QQ沐编程

题目描述

前面六位红球的范围为1-40（6位数字不能重复），后面1位蓝球的范围为1-15 。需随机生成相应的数据。按相应的停止键停止随机数生成

解决思路

在下面代码中，我们首先使用HTML创建了一个页面，其中包括两个ul元素，用于显示选出的红球和蓝球。接着，我们定义了三个函数：

getRandomNumber(min, max)：用于生成[min, max]范围内的随机整数。
generateRedBalls()：用于生成前六位红球号码。该函数先创建一个空数组reds，然后使用循环以随机顺序生成1到40之间的数字，并将其添加到数组中（保证数字不重复）。最后，对数组进行升序排序，并返回该数组。
generateBlueBall()：用于生成后一位蓝球号码。该函数直接调用getRandomNumber函数生成1到15之间的随机整数，并将其返回。

接下来，我们定义了三个变量：

intervalId：用于存储setInterval函数返回的定时器ID，以便后续可以通过clearInterval函数停止定时器。
startBtn和stopBtn：分别用于获取“开始”按钮和“停止”按钮的HTML元素。

然后，我们为“开始”按钮添加了一个“click”事件处理程序。当用户点击“开始”按钮时，程序将启动一个定时器，每0.1秒调用一次回调函数。在回调函数中，我们通过generateRedBalls函数生成前六位红球号码，并使用generateBlueBall函数生成后一位蓝球号码。然后，使用innerHTML属性将选出的红球号码和蓝球号码显示在页面上。

最后，我们为“停止”按钮添加了一个“click”事件处理程序。当用户点击“停止”按钮时，程序将停止定时器，并将intervalId变量设置为null。

当用户在浏览器中打开该页面并点击“开始”按钮时，程序将开始随机生成号码，并按照要求显示在页面上。当用户点击“停止”按钮时，程序将停止生成号码。

实现代码

<!DOCTYPE html>
<html>
  <head>
    <title>彩票选号</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div>
      <h3>前六位红球:</h3>
      <ul id="red-balls"></ul>
    </div>
    <div>
      <h3>后一位蓝球:</h3>
      <ul id="blue-ball"></ul>
    </div>
    <button id="start">开始</button>
    <button id="stop">停止</button>
    <script>
      var redBalls = document.getElementById("red-balls");
      var blueBall = document.getElementById("blue-ball");

      function getRandomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      function generateRedBalls() {
        var reds = [];
        while (reds.length < 6) {
          var num = getRandomNumber(1, 40);
          if (reds.indexOf(num) === -1) {
            reds.push(num);
          }
        }
        reds.sort(function(a, b) {
          return a - b;
        });
        return reds;
      }

      function generateBlueBall() {
        return getRandomNumber(1, 15);
      }

      var intervalId = null;
      var startBtn = document.getElementById("start");
      var stopBtn = document.getElementById("stop");

      startBtn.addEventListener("click", function() {
        if (intervalId) {
          clearInterval(intervalId);
        }
        intervalId = setInterval(function() {
          var reds = generateRedBalls();
          var blue = generateBlueBall();
          redBalls.innerHTML = "";
          for (var i = 0; i < reds.length; i++) {
            var li = document.createElement("li");
            li.textContent = reds[i];
            redBalls.appendChild(li);
          }
          blueBall.innerHTML = "<li>" + blue + "</li>";
        }, 100);
      });

      stopBtn.addEventListener("click", function() {
        clearInterval(intervalId);
        intervalId = null;
      });
    </script>
  </body>
</html>