js实现双色球效果
更新时间：2020年08月02日 11:43:03 作者：Mr.王征
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了js获取浏览器和屏幕的各种宽度高度的方法，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了JS请求servlet功能,结合具体实例形式分析了javascript使用ajax请求servlet端响应的主要功能代码与相关操作技巧,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了Javascript判断文件是否存在的方法适用于客户端、服务器端，远程文件，示例代码如下,需要的朋友可以参考下2014-09-09
用javascript实现的电信铁通（网通）自动跳转源代码...2007-11-11
这篇文章主要介绍了js获取当前日期时间同时显示星期的方法，具有参考价值，感兴趣的小伙伴们可以参考一下2015-10-10
这篇文章主要为大家详细介绍了微信小程序实现星级评价，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
解构赋值是一种特殊的语法,它使我们可以将数组或对象“拆包”为到一系列变量中,因为有时候使用变量更加方便,下面这篇文章主要给大家介绍了关于JavaScript解构赋值的5个常见场景与实例的相关资料,需要的朋友可以参考下2021-11-11
兼容ie、firefox的图片自动缩放的css跟js代码分享
最近编辑反应，图片有时候太大了，如果隐藏了，可能部分内容别人就看不到了，如果手工设置图片大小又太麻烦了，这里就提供一个方法让也没的图片等比例缩放2013-08-08
使用javascript技术验真实姓名，要用到unicode字符来匹配，由于中国人的姓名长度一般是在2-4这个范围内，所以重复匹配{2,4}次。接下来，通过本文给大家分享js验证省份证号与真实姓名是否匹配，需要的朋友可以参考下2015-10-10
这篇文章主要介绍了开源一个微信小程序仪表盘组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
最新评论