双色球案例

双色球呢，它是我们买彩票时见得那种随机抽取的几位幸运数字，所以今天我用代码的形式给大家简单讲解一下双色球的大体思路，
首先呢先获取内容和两个按钮，然后再封装函数获取随机数并给他去重，就是把里面相同的数字去掉，然后封装函数给获取的七位随机数写到页面上，最后呢再给开始结束按钮一个点击事件，里面再利用定时器，这个定时器呢，他有个毛病就是会重叠，每点一下就会加速，所以我们要给他来个禁用，结束的时候就把定时器清除掉，禁用也要给他解除；

具体代码如下：

 <body>
    <div id="content"></div>
    <button id="start">开始</button>
    <button id="end">结束</button>
  </body>

//获取
function getname(name) {
return document.getElementById(name);
}
var content = getname('content');
var start = getname('start');
var end = getname('end');
//封装函数获取随机数，然后给他去重
function get(start_num, end_num, many) {
var newarr = [];//声明一个空数组，让他接收
while (newarr.length < many) {
    var num = Math.floor(Math.random() * (end_num - start_num + 1) +       start_num);//利用公式获取随机数
    num = num < 10 ? '0' + num : num;//三目运算符；如果他的随机数里面有小于0的，就在她前面加个0，否则就是它本身；
    if (newarr.indexOf(num) == -1) {//去重
        newarr.push(num);
    }
}
newarr.sort(function (a, b) {//排序
    return a - b;
})
return newarr;
}


//封装随机数写入页面
function gethtml() {
var str = '';
var redball = get(1, 33, 6);
var balls = redball.concat(get(1, 16, 1));
// console.log(balls);
for (var i in balls) {
    str += `<span>${balls[i]}</span>`;
}
content.innerHTML = str;
}

gethtml()//调用

//给开始 结束按钮设点击事件
var timer = null;//函数调用
start.onclick = function () {//开始设置点击事件
timer = setInterval(gethtml, 10);//空的时间名给他赋一个定时器
start.disabled = true;//定时器会重叠，越点越快，所以要给他禁用
}
end.onclick=function(){//结束点击事件
clearInterval(timer);//结束了所以要清除定时器
start.disabled=false;//false解除禁用
}

双色球案例

推荐阅读更多精彩内容