用 JS 写一个双色球的生成器, 大家都知道, 双色球的规则是
红球 6 个, 1-33 中生成
篮球 1 个, 1-16 中生成
双色球号码从小到大的顺序输出, 且无重复数字
不足两位的号码高位补 0
思路
[ 红色球: 从 1-33 个数字中随机取出一个数, 然后和已取出的其他数据进行比较, 如果存在此数, 则从新选取;]
[ 蓝色球: 从 1-16 中随机取出一个数位蓝色球]
蓝球数字有可能跟红色球一样
所以 写了一个生成六位不重复的数组
CSS 部分
- <style>
- .box span {
- display: inline-block;
- width: 40px;
- height: 40px;
- border-radius: 50%;
- border: solid 2px red;
- color: #fff;
- background: red;
- font-size: 30px;
- font-weight: 800;
- text-align: center;
- margin: 5px 10px;
- }
- .box span:last-child {
- border: solid 2px blue;
- color: #fff;
- background: blue;
- }
- button {
- background: blue;
- }
- </style>
- html
- <body>
- <div class="box"></div>
- <button id="start">开始</button>
- <button id="end">结束</button>
- </body>
JS 部分
- <script>
- // 获取节点
- var box = document.querySelector('.box') // 获取大盒子(放双色球号码)
- var start = document.querySelector('#start') // 获取开始按钮
- var end = document.querySelector('#end'); // 获取停止按钮
- // 获取 6 位随机数 不重复
- function getNums(n, m) {
- return Math.floor(Math.random() * (m - n + 1) + n)
- }
- getball()
- // 封装获取双色球的函数
- function getball() {
- box.innerHTML = ''
- // 获取红球
- var redball = []
- while (redball.length <6) { // 用 while 去循环遍历新创建的 redball 数组; while 循环的功能是 - 先判断, 再循环;
- var num = getNums(1, 32)
- num < 10 ? num = '0' + num : num + num; // 不满十 加 0
- if (redball.indexOf(num) == -1) { // 去除数组重复, indexOf()的功能是, 在数组中找不见这一项, 就返回 -1;
- redball.push(num) // 只要数组中没有当前随机出来的数, 我们就把它推 (push) 进我们创建的新数组
- }
- }
- redball.sort(function (a, b) { // 红色球排序
- return a - b
- })
- var blueball = getNums(1, 16); // 获取篮球
- blueball < 10 ? blueball = '0' + blueball : blueball + blueball; // 不满十 加 0
- var newarr = redball.concat(blueball)
- for (var i in newarr) {
- var span = document.createElement('span')
- var text = document.createTextNode(newarr[i])
- span.appendChild(text)
- box.appendChild(span)
- }
- }
- var timer = null // 创建一个空的名字, 去接收计时器
- // 点击开始
- start.onclick = function () { // 开始键的点击事件
- timer = setInterval(function () { // 计时器
- getball()
- }, 100)
- start.disabled = true // 点击开始之后, 禁用开始键, 使其不能点击
- }
- // 点击结束
- end.onclick = function () { // 停止键的点击事件
- clearInterval(timer) // 清楚定时器
- timer = null
- start.disabled = false // 点击停止键之后, 让开始键解禁
- }
- </script>
最后祝大家都可以中他个一等奖
来源: http://www.jianshu.com/p/b97e03c7bb51