javascript实现彩票随机选号功能

公告:荻酷网每天不定时为大家更新各种实用技术教程、编曲资源,脚本源代码,插件,软件应用等资讯、绝大部分资源都经过亲测演示,下载荻酷网客户端、获取最新资源不迷路。 下载说明:如果是种子链接请下载专用工具进行下载,其它网盘链接可直接访问下载。

题目描述

前面六位红球的范围为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函数停止定时器。
  • startBtnstopBtn:分别用于获取“开始”按钮和“停止”按钮的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>

运行截图

如果在美化一下会更好看 自行研究

20240607175210179-image

 

    温馨提示:本文最后更新于2024-06-07 17:52:57,某些文章具有时效性,若有错误或已失效,请在下方留言
    ©版权声明
    感谢您的阅读
    喜欢就支持一下吧
    点赞8赞赏 分享
    评论 抢沙发
    头像
    欢迎您留下宝贵的见解!
    提交
    头像

    昵称

    夸夸
    还有吗!没看够!
    取消
    昵称表情代码图片

      暂无评论内容