javascript礼品抽奖

抽奖

 #box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 50px auto;
        }

        #box div {
            position: absolute;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
            background-color: aquamarine;
            box-sizing: border-box;
        }

        .p1 {
            top: 0;
            left: 0;
        }

        .p2 {
            top: 0;
            left: 100px;
        }

        .p3 {
            top: 0;
            left: 200px;
        }

        .p4 {
            top: 100px;
            left: 200px;
        }

        .p5 {
            top: 200px;
            left: 200px;
        }

        .p6 {
            top: 200px;
            left: 100px;
        }

        .p7 {
            top: 200px;
            left: 0px;
        }

        .p8 {
            top: 100px;
            left: 0px;
        }

        #box #btn {
            top: 100px;
            left: 100px;
            background-color: red;
            color: yellow;
        }
        #result{
            height: 100px;
            background-color: red;
            color: yellow;
            font-size: 40px;
            text-align: center;
            line-height: 100px;
            display: none;
        }

<div id="box">
        <div class="p1">iphoneX</div>
        <div class="p2">华为p30</div>
        <div class="p3">小米9</div>
        <div class="p4">vivo x27</div>
        <div class="p5">三星s10</div>
        <div class="p6">oppo FX</div>
        <div class="p7">黑鲨</div>
        <div class="p8">谢谢参与！</div>
        <div id="btn">开始抽奖</div>
    </div>
    <div id="result"></div>

 <script>
        var box = document.getElementById('box');
        var divs = box.getElementsByTagName('div');
        var btn = document.getElementById('btn');
        var result = document.getElementById('result');
        //var btn =   divs[divs.length-1];
        var timer = null;
        btn.onclick = function () {
            var i = 0;
            var count = 0; //记录转圈数
            //点击开始，第一个div立刻切换样式
            divs[i].style.border = "2px solid yellow";

            timer = setInterval(function(){
                i++;
                //当切换到最后一个时继续从第一个开始
                if(i == 8){
                    i = 0;
                    count++;
                }
                if(i == 0){
                    //如果当前变色的是第一个，要让最后一个恢复样式
                    divs[7].style.border = "1px solid black";
                }else{
                    //当前变颜色的上一个div恢复黑色边框
                    divs[i-1].style.border = "1px solid black";
                }
                // 每隔100毫秒让下一个div显示黄色边框   
                divs[i].style.border = "2px solid yellow";
                //当转够两圈并且 i 等于 中奖号就停止
                if(count == 2&&i == n){
                    clearInterval(timer);
                    console.log(n);
                   result.innerHTML = "恭喜获得"+divs[n].innerHTML;
                   result.style.display = 'block';
                }

            }, 100);
            
            // 随机出奖项的索引 0-7  
            var n = Math.round(Math.random()*99);  // 0-99   
            if(n>=0&&n<=49){  //50%
                n = 7;
            }else if(n>=50&&n<=69){//  10%
                n = 2;
            }else if(n>=70&&n<=74){  // 5%
                n = 1;
            }else if(n>=75&&n<=79){  // 5%
                n = 0;
            }else if(n>=80&&n<=89){  //10%
                n = 3;
            }else if(n>=90&&n<=94){ 
                n = 4;
            }else if(n>=95&&n<=97){
                n = 5;
            }else{
                n = 6;
            }
            
            
       }




    </script>

效果图