js实现彩票机选效果

每天下班途中经过体彩店，心情好就会买几注，也就几块钱，全当是消遣，好歹也算参与了好几十个亿的大项目。一般机选为主，也就是随机号。但每次工作人员给随的号都不太满意，总感觉是导致与奖擦肩而过的原因，当然，开个玩笑了。然后就在想，作为一个开发，自己也可以写个大乐透机选脚本，而且还能在枯燥的代码中找点乐趣。

HTML

<div class="box">
    <div class="content">
        <h3>客官, 来两注?</h3>
    </div>
    <div class="button">
        <input type="button" value="随机五注" onclick="fiveNumStr()">
    </div>
</div>

JavaScript

javascript为原生写法，分两部分：功能方法、DOM操作

功能方法

// 原生JavaScript写法，分两部分：功能方法、DOM操作

// 功能方法
function randomNumber(num) {
   
    function strArr(num) {
   
        var numberArray = [];
        for (var i = 0; i < num; i++) {
   
            numberArray[i] = i + 1;
        }
        return numberArray;
    }
    var numberArray = strArr(num);
    numberArray.sort(function () {
   
        return 0.5 - Math.random();
    });
    for (var i = 0; i < numberArray.length; i++) {
   
        if (numberArray[i] < 10) {
   
            numberArray[i] = '0' + numberArray[i];
        } else {
   
            numberArray[i] = String(numberArray[i]);
        }
    }
    return numberArray;
}

DOM操作

    // 用 fiveIsClick 限制用户频繁点击按钮
    var fiveIsClick = true
    function fiveNumStr() {
        if (fiveIsClick) {
            // 设为false, 不可再次点击
            fiveIsClick = false
            var content = document.getElementsByClassName('content')[0]
            var innerText = content.getElementsByClassName('context')
            var ulNode = content.getElementsByTagName('ul')[0]
            // 先删除已创建的ul及其字节点, 再新增
            // 为什么要删除再添加节点呢, 是因为不增删节点只改变数字虽然渲染更快, 但是区别太小, 失去了动态效果
            // 当然, 如果你不需要删除再添加节点也行, 以下代码稍改动一下就好了
            if (ulNode) {
                content.removeChild(ulNode)
            }
            var ul = document.createElement('ul')
            // 用ul节点长度判断是否存在ul
            var ulLength = content.getElementsByTagName('ul').length
            var index = 0 
            // 计时器，每隔0.5秒新增一组
            var interval = setInterval(function() {
                index ++
                if (ulLength < 1) {
                    var li = document.createElement('li')
                    li.setAttribute('class','context')
                    ul.appendChild(li)
                    content.appendChild(ul)
                    // 遍历li节点
                    var context = document.getElementsByClassName('context')[index - 1]
                    // 得到顺序被打乱的前区35个数字数组
                    var randomLeft = randomNumber(35)
                    // 大乐透前区数组
                    var leftNum = [randomLeft[0], randomLeft[1], randomLeft[2], randomLeft[3], randomLeft[4]]
                    // 从小到大排序
                    leftNum.sort(function (a, b) {
                        return a - b
                    })
                    // 得到顺序被打乱的后区12个数字数组
                    var randomRight = randomNumber(12)
                    // 大乐透后区数组
                    var rightNum = [randomRight[0], randomRight[1]]
                    rightNum.sort(function (a, b) {
                        return a - b // 从小到大排序
                    })
                    // 节点模版，用于给每个球添加样式
                    var spanNode = "<span>" + leftNum[0] + "</span>" + "<span>" + leftNum[1] + "</span>" + "<span>" + leftNum[2] + "</span>"
                        + "<span>" + leftNum[3] + "</span>" + "<span>" + leftNum[4] + "</span>" + "<span>" + rightNum[0] + "</span>" + "<span>" + rightNum[1] + "</span>"
                    // 节点已添加，再添加spanNode节点模版
                    context.innerHTML = spanNode
                    // li节点数量达到5个，就停止计时器
                    if (index >= 5) {
                        clearInterval(interval)
                    }
                }
            }, 500)
            // 阻止按钮重复点击，间隔3秒
            setTimeout(function() {  
                fiveIsClick = true
            }, 3000)
        }
    }

CSS

    body,ul,li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .box {
        height: 600px;
        background: rgba(216, 205, 205, 1);
    }
    .content {
        height: 70%;
        padding-top: 100px;
        text-align: center;
    }
    .context {
        margin: 20px 0;
    }
    .context span {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        border-radius: 50%;
        color: #fff;
        background: rgba(192, 42, 42, 1);
        margin-right: 15px;
    }
    .context span:nth-child(5) {
        margin-right: 30px;
    }
    .context span:nth-child(7) {
        margin-right: 0;
    }
    .context span:nth-child(6),.context span:nth-child(7) {
        background: rgba(47, 40, 153, 1);
    }
    .button {
        width: 100%;
    }
    .button input {
        width: 180px;
        height: 40px;
        line-height: 40px;
        display: block;
        margin: 0 auto;
        background: rgba(192, 42, 42, 1);
        color: #fff;
        font: normal 400 14px '微软雅黑';
        border-radius: 5px;
        outline: none;
    }