js转盘抽奖

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js转盘抽奖相关的知识，希望对你有一定的参考价值。

这个是很简易的转盘，只用了html，css，js

通过css产生一个转盘上的指针，用js动态改变css中的transparent改变指针的角度。再添加一个背景图片类似于奖项的转盘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dial</title>
    <link rel="stylesheet" type="text/css" href="dial.css">
    <script type="text/javascript" src="dial.js"></script>
</head>
<body>
<div id="sum">
    <div id="content">
    <div id="tri">
    </div>
    <div id="center"><h1>抽奖</h1></div></div></div>
</body>
</html>

背景图片放在sum中，tri是指针上的三角形，center是指针上的圆，三角形和圆都在content中以便一起运动。

*{
    margin: 0px;
    padding:0px;
}
#sum{
    height: 550px;
    width: 700px;
    background-image: url(dial.jpg);

    position: relative;

}
#content{
    padding: 0px;
    height: 140px;
    width: 140px;
    left: 289px;
    top: 109px;
    margin: 120px auto 0px;
    transform:rotate(0deg);
    position: absolute;
}
#center{
    height: 140px;
    width: 140px;
    border-radius: 140px;
    background-color: #EE4F10;
    color: white;
    line-height: 140px;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    z-index: 2;
    position:relative;

}
#tri{
    height: 0px;
    width: 0px;
    top: -27px;
    left: 26px;
    border-left: 45px solid transparent;
    border-right:45px solid transparent;
    border-bottom: 45px solid #EE4F10;
    z-index: -1;
    position: absolute;
}
window.onload=function(){
    var data=[320,260,180,620,760,380];
    var content=document.getElementById("content");
    var center=document.getElementById("center");
    center.onclick=play;
    var timer=null;
    var count=0;
    var degv=0;
    var random=0;
    function play(){
    count=0;
    random=Math.floor(Math.random()*6);
    clearInterval(timer);
    timer=setInterval(function(){
    roll();
    },30);
    }
    function roll(){    
    degv=count++;
    degv=degv*20;
    if(degv==data[random])
    {
        clearInterval(timer);}
    content.style.webkitTransform="rotate("+degv+"deg)";
    content.style.msTransform="rotate("+degv+"deg)";
    content.style.MozTransform="rotate("+degv+"deg)";
    content.style.OTransform="rotate("+degv+"deg)";
    content.style.transform="rotate("+degv+"deg)";
    }
   
        
}

设置一个定时器不断的调用roll方法不断的加指针旋转的角度，直到等于数组中随机选中的角度就会停下来。

 

以上是关于js转盘抽奖的主要内容，如果未能解决你的问题，请参考以下文章

微信大转盘 案例源码提供

js实现大转盘抽奖活动

原生js轮盘抽奖实例分析（幸运大转盘抽奖）

js实现游戏转盘抽奖

用 CSS 实现一个抽奖转盘(附详细代码+思路)

大转盘抽奖css3+js(简单书写)