用JavaScript+HTML实现双色球随机摇号效果

首先要知道双色球的规则是什么

双色球投注区分为红球号码区和蓝球号码区
红球号码范围为01～33，蓝球号码范围为01～16
双色球每期从33个红球中开出6个号码，从16个蓝球中开出1个号码作为中奖号码
双色球玩法即是竞猜开奖号码的6个红球号码和1个蓝球号码，顺序不限

知道了规则以后，我们就可以用代码实现了，废话不到说，直接上代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>双色球</title>

    <style>

        span {

            /*display: none;*/

            margin: 5px;

            font-size: 30px;

            width: 70px;

            height: 70px;

            background-color: red;

            color: white;

            text-align: center;

            line-height: 70px;

            display: inline-block;

            border-radius: 50%;

        }

        .blue {

            background-color: blue;

        }

        button {

            width: 75px;

            height: 40px;

            font-size: 20px;

            border: none;

            color: white;

            background-color: gray;

            cursor: pointer;

        }

    </style>

</head>

<body>

<p>

    <span class="red"></span>

    <span class="red"></span>

    <span class="red"></span>

    <span class="red"></span>

    <span class="red"></span>

    <span class="red"></span>

    <span class="blue"></span>

</p>

<button>摇号</button>

</body>

</html>

<script>

    // 红色球号码从1--33中选择；蓝色球号码从1--16中选择

    let spanRed = document.querySelectorAll('.red');

    let spanBlue = document.querySelector('.blue');

    let btn = document.querySelector('button')

    /**

     * 返回一个指定数值范围(start~end)内的、元素互不重复的、且长度为len随机数组

     * @param start

     * @param end

     * @param len

     * @returns {any[]}

     */

    function maker(start, end, len) {

        let set = new Set(new Array(len));

        set.clear();

        for (; ;) {

            let ok = Math.round(Math.random() * (end - start)) + start;

            if (!set.has(ok)) {

                set.add(ok);

            }

            if (set.size === len) {

                break;

            }

        }

        //集合转化为数组

        return Array.from(set);

    }

    function randomNumber() {

        let red = maker(1, 33, spanRed.length);

        for (let i = 0; i < spanRed.length; i++) {

            spanRed[i].innerHTML = red[i];

        }

        let blue = maker(1, 16, 1);

        spanBlue.innerHTML = blue[0];

    }

    randomNumber();

    btn.addEventListener('click', randomNumber);

</script>

运行后如下：

点击摇号，产生一组随机数

用JavaScript+HTML实现双色球随机摇号效果的更多相关文章

  1. Java用n种方法编写实现双色球随机摇号案例

    方法清单 规则 实现方式一 实现方式二 实现方式三 实现方式四 实现方法五 之前我用JavaScript编写过一个实现双色球随机摇号的案例, 点击此处查看,今天我再用Java语言来实现这一效果. 规则 ...

  2. java简单的双色球摇号程序

    import java.util.HashSet; import java.util.Random; import java.util.Set; /** * LotteryClient * @auth ...

  3. 使用JavaScript获取日期加随机数生成单号

    今天学习Javascript,得到一个自动生成单号的JavaScript,留下日后备用: function getNowFormatDate() { var day = new Date(); var ...

  4. HTML +　ＪＳ随机抽号。

    [设置第三次抽取的号码为 (张三6)]<script language="javascript"> var k = 0 ; function star(){ k++ ; ...

  5. 黑客长期摇号不中"黑"掉北京小客车摇号网

    新闻链接:http://www.2cto.com/News/201310/248936.html 新闻时间:2013-10-11 新闻正文: 为发泄长期摇号不中的不满,同时也为自己研发的软件打广告,硕 ...

  6. 第二篇T语言实例开发（版本5.3），福彩3D摇号器

    ---恢复内容开始--- 福彩3D摇号器 先验知识功能的含义与使用 功能是TC源程序的基本模块,通过对功能模块的调用实现特定的功能,TC语言中的功能相当于其他高级语言的子程序. 在TC里面,功能分为三 ...

  7. 重学 Java 设计模式：实战观察者模式「模拟类似小客车指标摇号过程，监听消息通知用户中签场景」

    作者:小傅哥 博客:https://bugstack.cn - 原创系列专题文章 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 知道的越多不知道的就越多 编程开发这条路上的知识是无穷无尽的, ...

  8. 使用JavaScript和Canvas打造真实的雨滴效果

    使用JavaScript和Canvas打造真实的雨滴效果 寸志 · 1 年前 我最近搞了一个有趣的项目——rainyday.js .我认为这个项目并不怎么样,而且,事实上这是我第一次尝试接触一些比弹窗 ...

  9. JavaScript为input/textarea自定义hover,focus效果

    <title>JavaScript为input/textarea自定义hover,focus效果</title> <script type="text/java ...

随机推荐

  1. pytest用例的执行顺序

    Pytest执行的顺序 当pytest运行测试函数时,它会查看该测试函数中的参数,然后搜索与这些参数具有相同名称的fixture.一旦pytest找到这些对象,它就会运行这些fixture 影响执行顺 ...

  2. android 解决报错 installation failed with message Failed to finalize session : INSTALL_PARSE_FAILED_UNEXPECTED_EXCEPTION: Failed parse during installPackageLI: Failed to read manifest from /xx/xx/xx.apk

    新工程启动报错 怎么办? 解决: 将这个选项去掉勾选后点击ok即可

  3. Visual Studio 设置背景图片主题（所有版本设置方法）

    前言 效果预览: 目录 扩展安装 图片背景设置 主题透明并扩展到 IDE 内容 扩展安装 ClaudiaIDE 扩展下载 我们打开VS的扩展安装界面:[扩展]->[管理扩展]->[联机], ...

  4. 万级K8s集群背后 etcd 稳定性及性能优化实践

    1背景与挑战随着腾讯自研上云及公有云用户的迅速增长,一方面,腾讯云容器服务TKE服务数量和核数大幅增长, 另一方面我们提供的容器服务类型(TKE托管及独立集群.EKS弹性集群.edge边缘计算集群.m ...

  5. C# - 逆变的具体应用场景

    前言 早期在学习泛型的协变与逆变时,网上的文章讲解.例子算是能看懂,但关于逆变的具体应用场景这方面的知识,我并没有深刻的认识. 本文将在具体的场景下,从泛型接口设计的角度出发,逐步探讨逆变的作用,以及 ...

  6. MCU软件最佳实践——矩阵键盘驱动

    1.矩阵键盘vs独立按键 在mcu应用开发过程中,独立按键比较常见,但是在需要的按键数比较多时,使用矩阵键盘则可以减少io占用,提高系统资源利用率.例如,某mcu项目要求有16个按钮,如果采用独立按键 ...

  7. linux 下安装PostgreSql 并配置远程访问

    1.官网下载PostgreSql 安装包 (https://www.enterprisedb.com/downloads/postgres-postgresql-downloads) 我下载的是 9. ...

  8. thanos的日志能不能打到文件里面去？

    不行. thanos/pkg/logging/logger.go: logger = log.NewLogfmtLogger(log.NewSyncWriter(os.Stderr)) if logF ...

  9. unity3d微软语音识别httppost失败。安全验证问题

    using System; using System.Collections; using System.Collections.Generic; using System.IO; using Sys ...

  10. Android开发 定时任务清理数据

    原文地址:Android开发 定时任务清理数据 | Stars-One的杂货小窝 公司项目,需要整定时任务,对数据进行清理,需要在每天凌晨0:00进行数据的清理,使用了Alarm和广播的方式来实现 P ...