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 相关文章推荐
js 创建快捷方式的代码(fso)
Nov 19 Javascript
js数组的操作详解
Mar 27 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
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
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
javascript 函数及作用域总结介绍
2013/11/12 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
javascript中call()、apply()的区别
2019/03/21 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
Python多进程编程技术实例分析
2014/09/16 Python
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
python实现猜数字小游戏
2020/03/24 Python
mac下如何将python2.7改为python3
2018/07/13 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
python3 字符串知识点学习笔记
2020/02/08 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
生产班组长岗位职责
2014/01/05 职场文书
原材料检验岗位职责
2014/03/15 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
勤俭节约主题班会
2015/08/13 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL