原生JS实现的双色球功能示例
程序员文章站
2022-08-09 11:42:52
本文实例讲述了原生js实现的双色球功能。分享给大家供大家参考，具体如下：
先来看看运行效果：
具体代码如下：
...
本文实例讲述了原生js实现的双色球功能。分享给大家供大家参考，具体如下：
先来看看运行效果：
具体代码如下：
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>www.jb51.net - js双色球</title>
<style>
#datepicker {
width: 100px;
height: 30px;
line-height: 30px;;
border-radius: 10px;
border: 1px solid #5098a5;
text-align: center;
cursor: pointer;
}
#number {
height: 100px;
float: left;
margin-top: 20px;
}
#number span {
display: block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 30px;
border: 2px solid red;
color: red;
font-weight: bold;
float: left;
margin-top: 15px;
margin-right: 10px;
}
#buleball {
height: 100px;
margin-top: 21px;
float: left;
}
#buleball span {
display: block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 30px;
background-color: blue;
color: white;
font-weight: bold;
float: left;
margin-top: 15px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<div style="overflow:hidden;">
<div id="number"></div>
<div id="buleball"></div>
</div>
<div id="datepicker">点击按钮</div>
</div>
<script>
//循环产生1-36数字
var arr = [];
function num() {
for (var i = 1; i < 34; i++) {
arr.push(i);
}
confusion();
}
var arrty= new array(arr);
//伪随机方法
function confusion(){
for(var i=1;i<34;i++){
arrty[i]=i;
}
arrty.sort(function(){ return 0.5 - math.random() });
// var str=arrty.join();
array()
}
// 将随机获取的数据添加到页面上去
function array() {
var array = getrandomarrayelements(arrty, 6);
array.sort(function (a, b) {//数组排序
return a > b ? 1 : -1;
});
var htm = "";
for (var i = 0; i < array.length; i++) {
htm += '<span>' + array[i] + '</span>';
}
document.getelementbyid('number').innerhtml = htm;
}
// 从1-36中随机取出其中6个参数
function getrandomarrayelements(arr, count) {
var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
while (i-- > min) {
index = math.floor((i + 1) * math.random());
temp = shuffled[index];
shuffled[index] = shuffled[i];
shuffled[i] = temp;
}
return shuffled.slice(min);
}
//随机获取一个蓝球的方法
function blueball() {
var html = "";
var array = [];
for (var k = 1; k < 17; k++) {
array.push(k);
}
//随机生成蓝色球的算法
var n = math.floor(math.random() * array.length);
if (n != "0") {//去除获取到的篮球数为0的
html += '<span>' + n + '</span>';
}
document.getelementbyid('buleball').innerhtml = html;
}
window.onload = function () {
var datepicker = document.getelementbyid("datepicker");
datepicker.onclick = function () {
num();//点击按钮生成1-33的数字方法
blueball();//点击后获取随机蓝球的方法
};
}
</script>
</body>
</html>
ps：这里再为大家提供几款相关在线工具供大家参考使用：
在线随机数字/字符串生成工具：
在线随机字符/随机密码生成工具：
在线随机数生成工具：
在线随机生成个人信息数据工具：
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript数学运算用法总结》、《javascript数据结构与算法技巧总结》、《javascript数组操作技巧总结》、《javascript排序算法总结》、《javascript遍历算法与技巧总结》、《javascript查找算法技巧总结》及《javascript错误与调试技巧总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇： 生活中校园里的幽默锦句。
下一篇： 深入理解PHP中的global