js实现抽奖

九宫格随机抽奖功能实现：在选择的时候方格的轮转速度先慢后快再慢的效果

奖品抽中概率根据产品数量而定；

增加权限控制功能，通过window全局变量controlRes控制抽奖结果；

代码如下：

 <div class="container">

<div class="block1 block">小米笔记本</div>

<div class="block2 block">iPhoneX</div>

<div class="block4 block">索尼电视机</div>

<div class="block7 block">西门子冰箱</div>

<div class="block6 block">老板抽油烟机</div>

<div class="block5 block">空气净化机</div>

<option value="0">小米笔记本</option>

<option value="1">iPhoneX</option>

<option value="3">索尼电视机</option>

<option value="4">空气净化机</option>

<option value="5">老板抽油烟机</option>

<option value="6">西门子冰箱</option>

</select>

    </div>

<style>
        .container {
             600px;
            height: 600px;
            border: 1px solid;
            display: flex;
            flex-wrap: wrap;
            margin: 100px auto;
        }

        .block {
             33.33%;
            height: 33.33%;
            outline: 1px solid black;
            text-align: center;
            line-height: 200px;
            font-size: 26px;
        }

        .start {
            background-color: skyblue;
            cursor: pointer;
        }
    </style>

let blocks = $(".block");

// 数组存放的是盒子的下标，按照顺时针的顺序

let arr = Array.apply(null, { length: 8 }).map((it, idx) => idx + 1),

i = 0,

count = 0,

stopTimer;

function random(min, max) {

return Math.floor(Math.random() * (max - min) + min);

}

// 产品数量数组

let products = [10, 1000, 10, 10, 10, 10, 10, 10];

let sum = products.reduce((a, b) => a + b);

// let rand = random(50, 58); // 给出一个停止计时器的随机数 count的值等于这个随机数时停止计时器

let selectPrize = 0;

$("#selectPrize").change(() => {

selectPrize = $("#selectPrize option:selected").val();

});

let around = function() {

// 将其他盒子都变为白色

$(".block:not(.start)").css("background", "#fff");

// 将当前arr[i]值所对应的盒子修改为粉色

$(".block" + ++i).css("background", "pink");

count++; // count是一个计数器根据count的值来调整速度

// 下面的4个if根据count的值来关闭计时器和重启计时器改变计时器的时间间隔,设置有三个速度档

if (count === 5 || count === 45) {

clearInterval(stopTimer);

stopTimer = setInterval(around, 200);

}

if (count === 10 || count === 35) {

clearInterval(stopTimer);

stopTimer = setInterval(around, 100);

}

if (count === 15) {

clearInterval(stopTimer);

stopTimer = setInterval(around, 50);

}

// 根据该产品的数量返回对应的数值

function num() {

let sel;

// 生成一个总产品数量的随机数，根据随机数所在区间，给抽中项赋值

products.forEach((item, index) => {

let s = index && products.slice(0, index).reduce((a, b) => a + b);

let l = products.slice(0, index + 1).reduce((a, b) => a + b);

// console.log(s,l)

if (s < window.r && window.r < l) {

sel = 49 + index;

}

});

console.log(sel);

return sel;

}

// 当等于上面的随机数时，停止计时器

// 通过全局变量controlRes来判断是否有控制抽奖结果的权限

let compare = window.controlRes ? (+selectPrize+49) : num()

if (count === compare) {

clearInterval(stopTimer);

console.log("抽中" + $(".block" + i).text());

count = i;

console.log(i)

// i = 0;

// rand = compare;

$(".start").click(start);

}

// 重制i的值

if (i === arr.length) {

i = 0;

}

};

// 给开始按钮绑定点击事件点击后执行 around

let start = function() {

window.r = random(0, sum);

$(".start").off("click"); // 当用户点击了开始按钮后必须要移除该事件防止用户重复点击

stopTimer = setInterval(around, 300);

};

$(".start").click(start);

</script>

实现图：