美文网首页
OMG!买它!

OMG!买它!

作者: XiaoAM | 来源:发表于2019-10-20 01:07 被阅读0次

    相信很多朋友都知道双色球。
    双色球的中奖号码呢是由6个红色球号码和1个蓝色球号码组成。
    红色球号码范围为1—33(6个号码不能重复选,并将选中的号码从小到大排序),蓝色球号码范围为1—16。
    那我们该选哪些号码好呢?下面我们就来做一个双色球,摇到属于自己的幸运号码吧!

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

    我们先获取到内容和按钮

    function getID(idname) {//封装获取方法
                return document.getElementById(idname)//返回结果
            }
            var wapper = getID('wapper');
            var start = getID('start');
            var end = getID('end')
    

    然后我们需要封装一个获取随机数的方法,并用这个方法来得到红色球号码和蓝色球号码

    function getNum(stratNum, endNum, many) {//三个形式参数,开始数,到哪个数,要几个
        var num = []//空数组来接收
        while (num.length < many) {//限制放几个数
        var nums = Math.floor(Math.random() * (endNum - stratNum + 1) + stratNum);//随机数
        nums = nums < 10 ? '0' + nums : nums;//小于10前面加0
        if (num.indexOf(nums) == -1) {//数组去重
             num.push(nums)
           }
         }
         return num//返回结果
    
     }
    

    接下来获取红球和蓝球的号码,然后封装写进数字的函数并调用

         function gethtml() {
            var red = getNum(1, 33, 6);//获取红球
             red.sort(function (a, b) {//红球升序
                return a - b
           })
            var blue = getNum(1, 16, 1);//获取蓝球
            var rb = red.concat(blue);//拼接红球蓝球
            console.log(rb)
            var qiu = ''
            for (var i in rb) {//循环写入
                 qiu += `<span>${rb[i]}</span>`
                 wapper.innerHTML = qiu
             } 
         }
         gethtml()
    

    最后我们来给开始和结束两个按钮添加点击事件,摇取随机幸运号码

        var times = null;//空对象指针,未初始化的计时器
        start.onclick = function(){//点击开始按钮
            times = setInterval(gethtml,0);//定时器走随机数
            start.disabled = true;//开始按钮禁用(防止定时器叠加)
    
        }
        end.onclick = function(){//点击结束按钮
            clearInterval(times)//清除定时器
            times = null;//定时器恢复空对象指针
            start.disabled = false;//解除开始禁用
        }
    

    一个简单的双色球就完成了,快来摇一组幸运号码。买它!买它!买它!

    相关文章

      网友评论

          本文标题:OMG!买它!

          本文链接:https://www.haomeiwen.com/subject/sllomctx.html