抽奖

效果图

 

 

 style样式

 1 <style>
 2         * {
 3             margin: 0;
 4             padding: 0;
 5         }
 6 
 7         .box {
 8             width: 810px;
 9             height: 600px;
10             margin: 0 auto;
11             background-color: antiquewhite;
12             position: relative;
13         }
14 
15         div {
16             position: absolute;
17             width: 195px;
18             height: 200px;
19             background-color: black;
20             margin-right: 10px;
21         }
22 
23         .div1 {
24             left: 0;
25             top: 0;
26             background-color: coral;
27         }
28 
29         .div2 {
30             left: 205px;
31             top: 0;
32         }
33 
34         .div3 {
35             left: 410px;
36             top: 0;
37         }
38 
39         .div4 {
40             left: 615px;
41             top: 0;
42         }
43 
44         .div5 {
45             left: 615px;
46             top: 205px;
47         }
48 
49         .div6 {
50             left: 615px;
51             top: 410px;
52         }
53 
54         .div7 {
55             left: 410px;
56             top: 410px;
57         }
58 
59         .div8 {
60             left: 205px;
61             top: 410px;
62         }
63 
64         .div9 {
65             left: 0;
66             top: 410px;
67         }
68 
69         .div10 {
70             left: 0;
71             top: 205px;
72         }
73 
74         #cj {
75             width: 200px;
76             height: 100px;
77             position: absolute;
78             left: 300px;
79             top: 250px;
80         }
81     </style>

<div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
        <div class="div5"></div>
        <div class="div6"></div>
        <div class="div7"></div>
        <div class="div8"></div>
        <div class="div9"></div>
        <div class="div10"></div>
        <button id="cj">开始抽奖</button>
    </div>

js源码

<script>
        var aBox = document.querySelectorAll('.box>div');
        var timer;
        var aa =0;
        // console.log(aBox);
        cj.onclick = function () {
            var gai=Math.random();
            console.log(gai);
            if(gai<=0.35){          //调整几率
                aa = Math.floor(Math.random() * (40 - 32) + 32);
            }else if(gai>0.35){
                aa = Math.floor(Math.random() * (32-31) + 31);
                console.log(aa);
            }
            // console.log(aa);
            // console.log(aa % 5);
            var mm = 0;
            clearInterval(timer)
            timer = setInterval(function () {
                aBox.forEach(function (itm) {
                    itm.style.background = 'black'
                })
                aBox[mm].style.background = 'coral';
                mm++;
                // console.log(mm);
                if (mm == 10) {
                    mm = 0;
                    aa = aa - 10;
                }
                if (mm == aa) {
                    clearInterval(timer);
                }
            }, 100)
        }
    </script>