<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
float: left;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
margin-left: 8px;
text-align: center;
line-height: 50px;
color: white;
font-size: 20px;
transition: all 0.35s;
}
div:last-of-type{
background-color: blue;
}
input{
width: 100px;
height: 50px;
margin-left: 15px;
border-radius: 5px;
}
</style>
<script type="text/javascript">
window.onload=function(){
//1获取所有的div
var oDiv=document.getElementsByTagName('div');
//2获取所有的input
var oBtn=document.getElementsByTagName('input')
//5、num就是记录点击次数的变量
var num=0;
function randomForm(min,max){
return Math.floor(Math.random()*(max-min+1)+min)
}
//3、给input绑定点击事件，因为获取到的input是一组元素，所以，得用下标
oBtn[0].onclick=function(){
//6、因为每点击一次就要生成一组新的数，所以把空数组放到了点击事件中。
var arr=[];
//5、每点击一次+1
num++;
//4、给每个div都加一个旋转
for (var i=0;i<oDiv.length;i++) {
//5、因为动画都是相对于最初始位置的，所以当每次点击的时候不能是
//之前旋转的度数，所以，需要通过一个变量num去记录点击几次后和360deg相乘
//才能达到每次都旋转一圈的效果。
oDiv[i].style.transform="rotateZ("+360*num+"deg"+")"
}
//6、开始生成红球需要的随机数，红球一共六个；
for (var i=0;i<6;i++) {
//把生成的红球随机数存储在变量中，
var hongqiu=randomForm(1,33);
//判断生成的随机数，是否重复。如果不重复
if (arr.indexOf(hongqiu)==-1) {
//判断是否小于10，如果小于10就做补0操作，
//补0完成后，插入一个数组
arr.push(hongqiu<10?"0"+hongqiu:hongqiu)
} else{
//如果重复，i--这次生成的随机数不生效
i--;
}
}
//把数组当中的数，依次放到div中。
for (var i=0;i<arr.length;i++) {
// oDiv[i].innerHTML=""
oDiv[i].innerHTML= arr[i]
}
//生成蓝球的随机数
var lanqiu=randomForm(1,16)
//如果生成的随机数小于10，进行补0操作，完成后插入到蓝球对应div中；
oDiv[6].innerHTML=lanqiu<10?"0"+lanqiu:lanqiu
}
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<input type="button" value="随机一注"></input>
</body>
</html>
网友评论