【云+社区年度正文】手把手用JavaScript 带你打造一款随机选双色球彩票号码网页

原创

前端皮皮

修改于 2020-11-30 10:21:16

1.4K0

修改于 2020-11-30 10:21:16

文章被收录于专栏：前端进阶学习交流前端进阶学习交流

JavaScript 随机选双色球彩票号码

一、前言

双色球是指一种福利彩票的名称。它由“中bai国福利彩票发行管理中心”统一组织、统一管理、统一发行、统一销售(在全国各省、市和地区联合销售)。其特征是“大奖大，小奖多，只要中一个蓝色球号就有奖。

因此深受全国大多数彩民的追捧，是目前我国彩票界最热门的一种彩票玩法，其“名声”在我国的绝大多数地区，可称得上是,达到了“无人不知，无人不晓”的程度。

玩彩票，贵在参与,重在坚持，以小博大。

二、项目要求

点击产生随机五个红色球号码，一个蓝色球效果，数字不重复。

三、项目实现

HTML

创建无序列表ul，添加列表选项 li，创建input标签，type类型设置为button，设置默认值，添加对应的属性，设置body背景颜色。

<body style="background-color: aqua;">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <input type="button" value="随机一注" id="input">
</body>

CSS

1. 设置每个li样式（宽高，背景样式，边框圆角变成一个圆形，字体大小，颜色，设置行高对齐），list-style: none;去除ul前面的小黑点。

<style type="text/css">
            li {
                width: 40px;
                height: 40px;
                background: red;
                color: #fff;
                margin: 5px;
                float: left;
                list-style: none;
                border-radius: 50%;
                text-align: center;
                line-height: 40px;
                font-size: 18px;
                font-weight: bold;
            }
        </style>

2. 初始化input按钮位置，按钮显示字体大小。

<style type="text/css">
            input {
                position: absolute;
                top: 15%;
                left: 5%;
                
                font-size: 20px;
            }
</style>

JavaScript

1. 生成一个指定范围的随机数。第一个参数规定随机数的起始值，第二个参数是规定随机数的终止值。

function toDouble(n) {
                return n < 10 ? '0' + n : '' + n
            };

            function ran(n, m) {
                return parseInt(Math.random() * (m - n) + n)
            }

2. 遍历数组中的每一个元素，然后比对生成的随机数是否和当前数组中的红号是否重复。如果重复，那么就将flag值设置为false。并跳出for循环。

function findInArr(n, arr) {
                for (var i = 0; i < arr.length; i++) {
                    if (n == arr[i]) {
                        return true;
                    }
                }
                return false;
            }

3. 判断产生的随机数，是否为负数，如果是负数，交换a,b数值，使其返回正数。

function toSort() {
                sort(function(a, b) {
                    if (a < b) {
                        return b - a
                    }
                })
            }

4. 页面加载执行，定义scroll()方法，判断arr是不是等于6个号码，是否存在相同的数值。对数组元素进行排序，将球设置为蓝色。

window.onload = function() {
                var oInput = document.getElementById('input');
                var timer = null;

                function scroll() {
                    var aLi = document.getElementsByTagName('li');
                    aLi[aLi.length - 1].style.background = 'blue';
                    var arr = [];
                    while (arr.length < 6) {
                        var n = toDouble(ran(1, 34));
                        if (!findInArr(n, arr)) {
                            arr.push(n);
                            var arr2 = arr.sort(function(a, b) {
                                if (a > b) {
                                    return a - b
                                }
                            });
                        }
                    }   
            }

5. 结果显示在页面上，调用定时器，onclick实现点击方法。

    for (var index = 0; index < aLi.length; index++) {
                        aLi[index].innerHTML = arr2[index];
                    }
                    aLi[aLi.length - 1].innerHTML = toDouble(ran(1, 17));
                }
                scroll();
                oInput.onclick = function() {
                    clearInterval(timer);
                    timer = setInterval(scroll, 10);
                    setTimeout(function() {
                    clearInterval(timer)
                    }, 600)
                }