原生JavaScript實現(xiàn)九宮格抽獎

更新時間：2022年06月28日 15:25:07 作者：好先

這篇文章主要為大家詳細介紹了原生JavaScript實現(xiàn)九宮格抽獎，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)九宮格抽獎的具體代碼，供大家參考，具體內容如下

思路：通過移動背景顏色實現(xiàn)中獎信息，每一個方形元素，需要按順序排列，加個延時器，當?shù)阶詈笠粋€的時候讓它從0開始就可以動起來了，！！

<!DOCTYPE html>
<html lang="en">

<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style>
? ? ? ? #box {
? ? ? ? ? ? width: 600px;
? ? ? ? ? ? height: 600px;
? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? position: relative;
? ? ? ? }

? ? ? ? #box div {
? ? ? ? ? ? width: 198px;
? ? ? ? ? ? height: 198px;
? ? ? ? ? ? border-radius: 10px;
? ? ? ? ? ? /* border: 1px solid red; */
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 198px;
? ? ? ? ? ? background-color: #ffe8e8;
? ? ? ? ? ? position: absolute;
? ? ? ? }

? ? ? ? .btns {
? ? ? ? ? ? text-align: center;
? ? ? ? }

? ? ? ? .active {
? ? ? ? ? ? background-color: rgb(255, 94, 0) !important;
? ? ? ? }
? ? ? ? #start,#end{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? background-color: rgb(24, 105, 255);
? ? ? ? ? ? color: white;
? ? ? ? }
? ? </style>
</head>

<body>
? ? <div id="box"></div>
? ? <br>
? ? <div class="btns">
? ? ? ? <button id="start">開始</button>
? ? ? ? <button id="end">停止</button>
? ? </div>

? ? <script>
? ? ? ? var box = document.getElementById('box');
? ? ? ? var start = document.getElementById('start');
? ? ? ? var end = document.getElementById('end');
? ? ? ? // 所有獎品
? ? ? ? var allList = ['宇宙戰(zhàn)將', '白起', '太陽系級宇宙戰(zhàn)艦', '小破木船', '地球級宇宙戰(zhàn)將', '月球級蘸醬', '太陽級蘸醬', '大西洋級蘸醬'];
? ? ? ? // 允許抽中的獎品
? ? ? ? var list = ['太陽系級宇宙戰(zhàn)艦','白起']; // 想要中的獎品放進去

? ? ? ? for (let i = 0; i < allList.length; i++) {
? ? ? ? ? ? box.innerHTML += `<div>${allList[i]}</div>`;
? ? ? ? }

? ? ? ? box.children[1].style.left = '200px';
? ? ? ? box.children[2].style.left = '400px';
? ? ? ? box.children[3].style.left = '400px';
? ? ? ? box.children[3].style.top ?= '200px';
? ? ? ? box.children[4].style.left = '400px';
? ? ? ? box.children[4].style.top ?= '400px';
? ? ? ? box.children[5].style.top ?= '400px';
? ? ? ? box.children[5].style.left = '200px';
? ? ? ? box.children[6].style.top ?= '400px';
? ? ? ? box.children[7].style.top ?= '200px';

? ? ? ? var running = false;
? ? ? ? var flag = true;
? ? ? ? var active = 0;
? ? ? ? var time = 200;
? ? ? ? var goods = '';
? ? ? ? box.children[active].className = 'active';

? ? ? ? start.onclick = function () {
? ? ? ? ? ? if (!running) { ?// 只有當沒有在抽獎中的時候，才讓點擊開始
? ? ? ? ? ? ? ? running = true; ?// 重置
? ? ? ? ? ? ? ? time = 200; ?// 重置
? ? ? ? ? ? ? ? f1();
? ? ? ? ? ? }
? ? ? ? }
??
? ? ? ? end.onclick = function () {
? ? ? ? ? ? if (running) { // 只有當正在抽獎中的時候才讓點擊停止
? ? ? ? ? ? ? ? flag = false;
? ? ? ? ? ? ? ? goods = list[Math.floor(Math.random() * list.length)]; ?// 0, 1, 2隨機的一個值
? ? ? ? ? ? }
? ? ? ? }

? ? ? ? // 如果使用定時器，time會鎖死不會改變；通過延時器模擬定時器的方法，是可以改變定時的時間
? ? ? ? function f1() {
? ? ? ? ? ? box.children[active].className = '';
? ? ? ? ? ? active++;
? ? ? ? ? ? if (active > 7){ ?// 因為是從0開始計算所以寫7
? ? ? ? ? ? ? ? active = 0;
? ? ? ? ? ? }
? ? ? ? ? ? box.children[active].className = 'active';
? ? ? ? ? ? if (flag) { // 抽獎速度越來越快
? ? ? ? ? ? ? ? time -= 10;
? ? ? ? ? ? ? ? if (time < 50) {
? ? ? ? ? ? ? ? ? ? time = 50;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? } else { // 抽獎速度越來越慢
? ? ? ? ? ? ? ? time += 10;
? ? ? ? ? ? ? ? if (time > 300) {
? ? ? ? ? ? ? ? ? ? time = 300;

? ? ? ? ? ? ? ? ? ? // 判斷當前滾動到的獎品是否是內定的獎品
? ? ? ? ? ? ? ? ? ? if (box.children[active].textContent === goods ) {
? ? ? ? ? ? ? ? ? ? ? ? flag = true;
? ? ? ? ? ? ? ? ? ? ? ? running = false;
? ? ? ? ? ? ? ? ? ? ? ? ?setTimeout(() => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?alert(goods); // 彈出抽獎信息
? ? ? ? ? ? ? ? ? ? ? ? ?}, 500);
? ? ? ? ? ? ? ? ? ? ? ? return; ?// 抽中獎品后，停止抽獎

? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? setTimeout(f1,time);
? ? ? ? }
? ? </script>
</body>

</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: