js模拟双色球开奖,学习阶段,若有不正确的地方还望指正。话不多说,直接放代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js双色球开奖</title>
<style>
/*css样式*/
div{
width: 60px;
height: 60px;
color: white;
display: inline-block;
margin-left: 15px;
border-radius: 50px;
text-align: center;
line-height: 60px;
font-size: x-large;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
margin-left: 35px;
}
</style>
<script>
onload = function(){
//1.获取篮球对象
blue = document.getElementsByClassName("blue")[0];
//生成蓝色球随机数 1-16
blue.innerText = parseInt(Math.random()*16+1);
//2.生成红球1-33
//定义数组
lists =[];
//将生成的随机数赋值给数组
for(i=0;i<6;i++){
lists[i] = parseInt(Math.random()*33+1);
}
//去重
for(i=0;i<lists.length;i++){
//内层循环对比
for (j=0;j<i;j++){
//判断
if(lists[i]==lists[j]){
//相等重新生成
lists[i]=parseInt(Math.random()*33+1);
//回退
i--
}
}
}
//document.write(lists)
red = document.getElementsByClassName("red");
for(k=0;k<red.length;k++){
red[k].innerText=lists[k];
}
}
</script>
</head>
<body>
<!--红球-->
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<!--篮球-->
<div class="blue"></div>
</body>
</html>
结果如下: