幸运抽奖

2018-06-24 02:02:29来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

    var oPointer=document.getElementsByTagName("img")[0];
    var oTurnable=document.getElementsByTagName("img")[1];
    var cat=15;//每个区域15度,一共24个区域
    var num=0;
    var offOn=true;//是否正在抽奖
    //指针点击事件,开始抽奖
    oPointer.onclick=function(){
        if(offOn){
            oTurnable.style.transform="rotate(0deg)";
            offOn=!offOn;
            ratating();
        }
    }
    //旋转
    function ratating(){
        var timer=null;
        var rdm=0;//随机度数
        clearInterval(timer);
        timer=setInterval(function(){
            if(Math.floor(rdm/360)<3){
                rdm=Math.floor(Math.random()*3600);
            }
            else{
                oTurnable.style.transform="rotate("+rdm+"deg)";
                clearInterval(timer);
                setTimeout(function(){
                    offOn=!offOn;
                    num=rdm%360;
//                    转盘逆时针的角度为正值
                    if(num<=cat*1){
                        alert("四等奖");
                        console.log("rdm="+rdm+",num="+num+","+"四等奖");
                    }
                    else if(num<=cat*2){
                        alert("周君记");
                        console.log("rdm="+rdm+",num="+num+","+"周君记");
                    }
                    else if(num<=cat*3){
                        alert("二等奖");
                        console.log("rdm="+rdm+",num="+num+","+"二等奖");
                    }
                    else if(num<=cat*4){
                        alert("周君记");
                        console.log("rdm="+rdm+",num="+num+","+"周君记");
                    }
                    else if(num<=cat*5){
                        alert("三等奖");
                        console.log("rdm="+rdm+",num="+num+","+"三等奖");
                    }
                    else if(num<=cat*6){
                        alert("四等奖");
                        console.log("rdm="+rdm+",num="+num+","+"四等奖");
                    }
                    else if(num<=cat*7){
                        alert("幸运奖");
                        console.log("rdm="+rdm+",num="+num+","+"幸运奖");
                    }
                    else if(num<=cat*8){
                        alert("周君记");
                        console.log("rdm="+rdm+",num="+num+","+"周君记");
                    }
                    else if(num<=cat*9){
                        alert("一等奖");
                        console.log("rdm="+rdm+",num="+num+","+"一等奖");
                    }
                    else if(num<=cat*10){
                        alert("周君记");
                        console.log("rdm="+rdm+",num="+num+","+"周君记");
                    }
                    else if(num<=cat*11){
                        alert("幸运奖");
                        console.log("rdm="+rdm+",num="+num+","+"幸运奖");
                    }
                    else if(num<=cat*12){
                        alert("四等奖");
                        console.log("rdm="+rdm+",num="+num+","+"四等奖");
                    }
                    else if(num<=cat*13){
                        alert("三等奖");
                        console.log("rdm="+rdm+",num="+num+","+"三等奖");
                    }
                    else if(num<=cat*14){
                        alert("周君记");
                        console.log("rdm="+rdm+",num="+num+","+"周君记");
                    }
                    else if(num<=cat*15){
                        alert("二等奖");
                        console.log("rdm="+rdm+",num="+num+","+"二等奖");
                    }
                    else if(num<=cat*16){
                        alert("周君记");
                        console.log("rdm="+rdm+",num="+num+","+"周君记");
                    }
                    else if(num<=cat*17){
                        alert("四等奖");
                        console.log("rdm="+rdm+",num="+num+","+"四等奖");
                    }
                    else if(num<=cat*18){
                        alert("幸运奖");
                        console.log("rdm="+rdm+",num="+num+","+"幸运奖");
                    }
                    else if(num<=cat*19){
                        alert("周君记");
                        console.log("rdm="+rdm+",num="+num+","+"周君记");
                    }
                    else if(num<=cat*20){
                        alert("幸运奖");
                        console.log("rdm="+rdm+",num="+num+","+"幸运奖");
                    }
                    else if(num<=cat*21){
                        alert("四等奖");
                        console.log("rdm="+rdm+",num="+num+","+"四等奖");
                    }
                    else if(num<=cat*22){
                        alert("三等奖");
                        console.log("rdm="+rdm+",num="+num+","+"三等奖");
                    }
                    else if(num<=cat*23){
                        alert("周君记");
                        console.log("rdm="+rdm+",num="+num+","+"周君记");
                    }
                    else if(num<=cat*24){
                        alert("幸运奖");

                        console.log("rdm="+rdm+",num="+num+","+"幸运奖");
                    }
                },4000);
            }
        },30);
    }

 

  #bg{
            width: 650px;
            height: 600px;
            margin:0 auto;
            background: url(turnable-bg.jpg) no-repeat;
            position:relative;
        }
        /*img从alt开始匹配,直到pointer结束为止*/
  img[alt="pointer"]{
            position:absolute;
            top:125px;
            left:310px;
            z-index:10;
        }
  img[alt="turnable"]{
            position:absolute;
            z-index:5;
            top:50px;
            left:80px;
            transition:all 4s;
        }

        

 

<div id="bg">
    <img src="指针.png" alt="pointer" width="31px" height="182px">
    <img src="转盘.png" alt="turnable" width="496px" height="500px">
</div>

 抽奖代码里要注意一个地方,就是转动角度:在计算机语言里,逆时针的转动才算是正方向,而顺时针为负方向。

总结步骤:1.找好图片素材,当然也可以自己设计一个。(圆盘和指针)

                  2.先用html将素材写至页面当中。

                  3.设置好样式,呈现好看的页面效果。

                  4.最重要的部分就是在js这块的实现部分:

.                         (1)点击事件;

                           (2)旋转度数的设置(间歇调用,判断语句)

      效果如下:

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:面试分享:一年经验初探阿里巴巴前端社招

下一篇:Meta http-equiv属性详解