随机抽取双色球号码
双色球规则:
双色球 投注区分为红色球号码区和蓝色球号码区,每注投注号码由6个红色球号码和1个蓝色球号码组成,红色球号码从1到33中选择,蓝色球号码从1到16中选择。
使用html+css+js实现随机抽取双色球一组号码
HTML代码:
<body>
<input type="button" id="btn" value="选号" />
<div class="wp" id="wp"></div>
</body>
CSS代码:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wp{
text-align: center;
}
/* 设置双色球的基本样式 */
.wp span{
display: inline-block;
height: 50px;
width: 50px;
border-radius: 50%;
border: 2px #F00 solid;
margin: 25px 5px 0 5px;
font-size: 20px;
text-align: center;
line-height: 50px;
color: #333;
}
/* 第七个球的样式 */
.wp span:nth-of-type(7n){
border: 2px #0ff solid;
}
/* 设置按钮的基本样式 */
#btn {
display: block;
height: 50px;
width: 100px;
background: #FF0000;
color: #fff;
border-radius: 5px;
border: 1px #333 solid;
font-size: 20px;
cursor: pointer;
margin: 50px auto 0;
}
</style>
js代码:
<script type="text/javascript">
var btn = document.getElementById("btn"); //获取button按钮属性
var wp = document.getElementById("wp"); //获取wp属性
btn.onclick = function(){ //btn 点击执行内容
var arr = []; //声明一个空数组
for (var i=0;i<6;i++) { //for 循环
var a = Math.floor((Math.random()*33)+1); //声明一个变量把1-33的随机数放进变量里面
if (arr.indexOf(a)==-1){ //判断是否有重复的数字,如果有就放弃那个数字,重新随机获取一个随机数字,直到6个随机数没有重复值位置
arr.push(a);
}else {
i -= 1;
}
}
for(var n=0;n<arr.length;n++){ //把获取的6个随机数数组arr的值,分别写入wp内
wp.innerHTML += '<span>'+arr[n]+'</span>';
}
wp.innerHTML += '<span>'+Math.floor((Math.random()*16)+1)+'</span>'; //获取第七个蓝色球,1-16随机数
wp.innerHTML += '<br />';
console.log(arr);
};
</script>
运行结果:每点击一次,就会随机获取一注双色球号码