h5转盘游戏

<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>```