<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:#666;
}
table{
background:#666;
margin:30px auto;
}
table tr td{
width:110px;
height:110px;
}
#btn{
width:150px;
height:40px;
line-height:40px;
display:inline-block;
color:#fff;
font-family:"Microsoft Yahei";
background-color:rgb(106,38,19);
position:relative;
border-radius:3px;
cursor:pointer;
top:100px;
}
#btn:hover{
background-color:#481305;
}
.tar{
border:4px solid #660066;
width:108px;
height:108px;
position:absolute;
top:0;
left:0;
}
.Img{
width:120px;
height:160px;
position:absolute;
left:365px;
top:10px;
border:1px solid #666;
border-radius:5px;
background:url("images/mv.jpg");
background-size:cover;
margin-left:-150px;
}
</style>
</head>
<body>
//表格布局
<table border="0" cellpadding="0" cellspacing="1">
<tr>
<td id="td0" style="background:url(images/0.png);background-size:cover;"></td>
<td id="td1" style="background:url(images/1.png);background-size:cover;"></td>
<td id="td2" style="background:url(images/2.png);background-size:cover;"></td>
<td id="td3" style="background:url(images/3.png);background-size:cover;"></td>
<td id="td4" style="background:url(images/4.png);background-size:cover;"></td>
<td id="td5" style="background:url(images/5.png);background-size:cover;"></td>
<td id="td6" style="background:url(images/6.png);background-size:cover;"></td>
</tr>
<tr>
<td id="td19" style="background:url(images/19.png);background-size:cover;"></td>
<td colspan="5" rowspan="3" style="background:#66cc33;text-align:center;position:relative;">
<div id="btn" >开始抽奖</div>
</td>
<td id="td7" style="background:url(images/7.png);background-size:cover;"></td>
</tr>
<tr>
<td id="td18" style="background:url(images/18.png);background-size:cover;"></td>
<td id="td8" style="background:url(images/8.png);background-size:cover;"></td>
</tr>
<tr>
<td id="td17" style="background:url(images/17.png);background-size:cover;"></td>
<td id="td9" style="background:url(images/9.png);background-size:cover;"></td>
</tr>
<tr>
<td id="td16" style="background:url(images/16.png);background-size:cover;"></td>
<td id="td15" style="background:url(images/15.png);background-size:cover;"></td>
<td id="td14" style="background:url(images/14.png);background-size:cover;"></td>
<td id="td13" style="background:url(images/13.png);background-size:cover;"></td>
<td id="td12" style="background:url(images/12.png);background-size:cover;"></td>
<td id="td11" style="background:url(images/11.png);background-size:cover;"></td>
<td id="td10" style="background:url(images/10.png);background-size:cover;"></td>
</tr>
</table>
<div class="tar"></div>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var n=0;
change(0,0); //初始化函数，让tar处于第一个位置
function change(i,time){
var $tar = $('div.tar'); //获取tar
var offset = $('#td'+(i%20)).offset(); //让tar的位置跟表格中的某一个框相同
$tar.animate({top:offset.top-2,left:offset.left-2},time); //确定tar的位置
n = i; //储存当前的i
}
var num = 0;
function move(){
var randomNumber = Math.random(10)*20;//随机生成0-20之间的数字
randomNumber = Math.ceil(randomNumber)+50;//加上一个50的基数，增加转的圈数
num = randomNumber; //储存当前随机数
var m = n; //把之前储存的n给到m
for(var i=m;i<randomNumber+m;i++){ //i=m，下一次点击开始按钮，tar就不会又从第一个位置开始跑，同时随机数也要加上m.
change(i,50); //调用
}
}
window.onload = function(){ //dom节点加载完成时给予开始按钮点击事件，
btn.onclick = function(){
move(); //调用
btn.onclick = ''; //取消点击事件
}
}
var t = 0;
var btn = document.getElementById('btn'); //获取开始按钮
setInterval(function(){
t++;
if(t%(Math.ceil((num*50/1000)+1))==0){ // num*50/1000等于转动一次的时间，表示要每过这个时间才能点击开始按钮一次。
btn.onclick = function(){
move();
console.log('执行');
btn.onclick = '';
console.log(Math.ceil((num*50/1000)+1))
}
t = 0;
}
},1000)
</script>
</body>
</html>```
网友评论