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 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 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
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
python批量生成本地ip地址的方法
2015/03/23 Python
Python中super函数的用法
2017/11/17 Python
python实现树形打印目录结构
2018/03/29 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
Java面试笔试题大全
2016/11/23 面试题
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
铣床操作工岗位职责
2014/06/13 职场文书
大学生党员自我评价
2015/03/04 职场文书
认识实习感想
2015/08/10 职场文书
班主任培训研修日志
2015/11/13 职场文书
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
分享几个实用的CSS代码块
2022/06/10 HTML / CSS
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle