幸運抽獎

時間 2019-11-24

標籤幸運抽獎简体版

原文原文鏈接

    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>

抽獎代碼裏要注意一個地方，就是轉動角度：在計算機語言裏，逆時針的轉動纔算是正方向，而順時針爲負方向。javascript

總結步驟：1.找好圖片素材，固然也能夠本身設計一個。（圓盤和指針）css

2.先用html將素材寫至頁面當中。html

3.設置好樣式，呈現好看的頁面效果。java

4.最重要的部分就是在js這塊的實現部分：dom

. （1）點擊事件；url

（2）旋轉度數的設置（間歇調用，判斷語句）spa

　　　　　　效果以下：設計