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文件包含的几种方式介绍
Sep 28 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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服务器实现多session并发运行
2006/10/09 PHP
mysql 搜索之简单应用
2007/04/27 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
python求列表交集的方法汇总
2014/11/10 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
python3实现弹弹球小游戏
2019/11/25 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
python序列类型种类详解
2020/02/26 Python
关于python 跨域处理方式详解
2020/03/28 Python
基于python实现对文件进行切分行
2020/04/26 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
好的自荐信的要求
2013/10/30 职场文书
初二生物教学反思
2014/02/03 职场文书
保险内勤岗位职责
2014/04/05 职场文书
驾驶员培训方案
2014/05/01 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
二手车转让协议书
2015/01/29 职场文书
Golang的继承模拟实例
2021/06/30 Golang
Mysql事务索引知识汇总
2022/03/17 MySQL
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技