本文摘自PHP中文网,作者coldplay.xixi,侵删。

本文实例为大家分享了js实现双色球效果的具体代码,供大家参考,具体内容如下
效果展示:

源码展示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <!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 () {
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实现双色球效果的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
如何利用js计算正方形的面积
js递归的用法详解
在js中eval什么意思
js 中 undefined 什么意思
js是什么编程语言?
聊聊css 与 js 是如何阻塞 dom 解析和渲染的
关于js中的this指向问题的介绍
js内置对象 math 和 date 的详解
js 怎么判断数字相等
js如何调用php
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » js实现双色球效果