js實現抽獎

本文轉載自查看原文 2020-01-06 14:09 881

九宮格隨機抽獎功能實現：在選擇的時候方格的輪轉速度先慢后快再慢的效果

獎品抽中概率根據產品數量而定；

增加權限控制功能，通過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 {
            width: 600px;
            height: 600px;
            border: 1px solid;
            display: flex;
            flex-wrap: wrap;
            margin: 100px auto;
        }

        .block {
            width: 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>

實現圖：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS實現抽獎（方形） js實現轉盤抽獎 js 簡單抽獎實現 JS實現抽獎 js 抽獎轉盤實現 js實現游戲轉盤抽獎原生JS實現簡易轉盤抽獎簡單JS旋轉實現轉盤抽獎效果 JS原生實現照片抽獎前端js實現九宮格模式抽獎（多宮格抽獎）