一个很简单的H5的转盘抽奖的（主要用的是css3的属性）

最新推荐文章于 2024-05-05 21:40:21 发布

weixin_34191845

最新推荐文章于 2024-05-05 21:40:21 发布

阅读量811

点赞数

文章标签： ui python

原文链接：https://my.oschina.net/tianyuqin/blog/774903

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5抽奖的</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .luck{
            width: 600px;
            height: 600px;
            position: relative;
            border: 1px solid #cccccc;
            margin: 0 auto;
        }
        .draw{
            background-image:url("../imge/luckdraw.png");
            background-repeat: no-repeat;
            background-size: cover;
            text-align: center;
            width: 600px;
            height: 600px;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
        }
        .shot{
            background-image:url("../imge/luckshot.png");
            background-repeat: no-repeat;
            background-size: cover;
            text-align: center;
            width: 196px;
            height: 246px;
            position: absolute;
            top: 153px;
            left: 196px;
            z-index: 3;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div class="luck">
    <div class="draw" id="draw">
    </div>
    <div class="shot" id="btn">
       <!-- <button>抽奖的</button>-->
    </div>
</div>

</body>
<script>
    var draw = document.getElementById('draw');
    var btn = document.getElementById('btn');
    var timer;
    btn.onclick = function(){
        var t = 0;
        var stopT = parseInt(1+Math.random()*10)*1000;
       clearInterval(timer);
        timer = setInterval(function(){
            if(t >= 360){
                t = 0;
            }else{
                t = t+1;
            }
            draw.style.transform = 'rotate('+t+'deg)';
        },20);

        setTimeout(function(){
            clearInterval(timer);
        },stopT);
    }
</script>
</html>

转载于:https://my.oschina.net/tianyuqin/blog/774903