js实现双色球效果


Posted in Javascript onAugust 02, 2020

本文实例为大家分享了js实现双色球效果的具体代码,供大家参考,具体内容如下

效果展示:

js实现双色球效果

源码展示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js实现双色球效果</title>
  <style>
    span{
      font-size: 20px;
    }
    .a {
      color: red;
    }
 
    .b {
      color: blue;
    }
  </style>
</head>
<body>
<button>点击获取今日双色球数</button>
<pre>
  <span class="a"></span><span class="b"></span>
</pre>
 
 
<script>
  var arrS = [];
  for (let i = 1; i < 34; i++) {
    arrS[i - 1] = i;
  }
 
  var spans = document.querySelectorAll("span");
  document.querySelector("button").onclick = function () {
 
    /*es6 使用 set 集合会自动去除重复*/
    /*获取红球*/
    let set = new Set();
    while (set.size < 6) {
      set.add(getR(arrS, arrS.length));
    }
 
    /*获取篮球*/
    let set1 = new Set();
    while (set1.size < 1) {
      set1.add(getR(arrS, 16));
    }
    var hong = "";
    var lan = "";
    for (let v of set) {
      hong += v;
      hong += "  ";
    }
    for (let v of set1) {
      lan += v;
      lan += " ";
    }
 
    //将内容添加到页面上
    spans[0].innerText = hong;
    spans[1].innerText = lan;
  }
 
  // 获取指定范围内的随机数
  function getR(arr, al) {
    return arr[Math.floor(Math.random() * al)];
  }
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript计时器示例分析
Feb 05 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
JS定义类的六种方式详解
May 12 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
vue实现简单学生信息管理
May 30 Javascript
react+antd 递归实现树状目录操作
Nov 02 Javascript
js实现tab栏切换效果
Aug 02 #Javascript
原生js canvas实现鼠标跟随效果
Aug 02 #Javascript
原生js+canvas实现下雪效果
Aug 02 #Javascript
jQuery实现滑动开关效果
Aug 02 #jQuery
jQuery实现开关灯效果
Aug 02 #jQuery
JavaScript实现动态生成表格
Aug 02 #Javascript
javascript实现京东登录显示隐藏密码
Aug 02 #Javascript
You might like
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
js简单时间比较的方法
2016/08/02 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
优秀小学生家长评语
2014/01/30 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
SpringBoot集成Redis的思路详解
2021/10/16 Redis