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字典探测用户名工具
Oct 05 Javascript
js直接编辑当前cookie的脚本
Sep 14 Javascript
限制只能输入数字的实现代码
May 16 Javascript
详解ES6中的let命令
Apr 05 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
React 组件间的通信示例
Jun 14 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 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
php读取excel文件的简单实例
2013/08/26 PHP
PHP生成树的方法
2015/07/28 PHP
script标签的 charset 属性使用说明
2010/12/04 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
在Python中使用判断语句和循环的教程
2015/04/25 Python
Python中的id()函数指的什么
2017/10/17 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
Python批处理更改文件名os.rename的方法
2018/10/26 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
python中pyqtgraph知识点总结
2021/01/26 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
建筑工程专业毕业生自荐信
2013/10/19 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
面试后感谢信
2014/02/01 职场文书
岗位职责风险防控
2014/02/18 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
推荐信怎么写
2014/05/09 职场文书
任命书模板
2014/06/04 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
建国大业电影观后感
2015/06/01 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
HTML+JS实现在线朗读器
2022/02/15 Javascript