原生JavaScript實(shí)現(xiàn)九宮格抽獎(jiǎng)
更新時(shí)間：2022年06月28日 15:25:07 作者：好先
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)九宮格抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)九宮格抽獎(jiǎng) 的具體代碼，供大家參考，具體內(nèi)容如下
思路：通過(guò)移動(dòng)背景顏色實(shí)現(xiàn)中獎(jiǎng)信息，每一個(gè)方形元素，需要按順序排列，加個(gè)延時(shí)器，當(dāng)?shù)阶詈笠粋€(gè)的時(shí)候讓它從0開(kāi)始就可以動(dòng)起來(lái)了，?。?/p>
<!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">開(kāi)始</button>
? ? ? ? <button id="end">停止</button>
? ? </div>
? ? <script>
? ? ? ? var box = document.getElementById('box');
? ? ? ? var start = document.getElementById('start');
? ? ? ? var end = document.getElementById('end');
? ? ? ? // 所有獎(jiǎng)品
? ? ? ? var allList = ['宇宙戰(zhàn)將', '白起', '太陽(yáng)系級(jí)宇宙戰(zhàn)艦', '小破木船', '地球級(jí)宇宙戰(zhàn)將', '月球級(jí)蘸醬', '太陽(yáng)級(jí)蘸醬', '大西洋級(jí)蘸醬'];
? ? ? ? // 允許抽中的獎(jiǎng)品
? ? ? ? var list = ['太陽(yáng)系級(jí)宇宙戰(zhàn)艦','白起']; // 想要中的獎(jiǎng)品放進(jì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) { ?// 只有當(dāng)沒(méi)有在抽獎(jiǎng)中的時(shí)候，才讓點(diǎn)擊開(kāi)始
? ? ? ? ? ? ? ? running = true; ?// 重置
? ? ? ? ? ? ? ? time = 200; ?// 重置
? ? ? ? ? ? ? ? f1();
? ? ? ? ? ? }
? ? ? ? }
??
? ? ? ? end.onclick = function () {
? ? ? ? ? ? if (running) { // 只有當(dāng)正在抽獎(jiǎng)中的時(shí)候才讓點(diǎn)擊停止
? ? ? ? ? ? ? ? flag = false;
? ? ? ? ? ? ? ? goods = list[Math.floor(Math.random() * list.length)]; ?// 0, 1, 2隨機(jī)的一個(gè)值
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 如果使用定時(shí)器，time會(huì)鎖死不會(huì)改變；通過(guò)延時(shí)器模擬定時(shí)器的方法，是可以改變定時(shí)的時(shí)間
? ? ? ? function f1() {
? ? ? ? ? ? box.children[active].className = '';
? ? ? ? ? ? active++;
? ? ? ? ? ? if (active > 7){ ?// 因?yàn)槭菑?開(kāi)始計(jì)算所以寫7
? ? ? ? ? ? ? ? active = 0;
? ? ? ? ? ? }
? ? ? ? ? ? box.children[active].className = 'active';
? ? ? ? ? ? if (flag) { // 抽獎(jiǎng)速度越來(lái)越快
? ? ? ? ? ? ? ? time -= 10;
? ? ? ? ? ? ? ? if (time < 50) {
? ? ? ? ? ? ? ? ? ? time = 50;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? } else { // 抽獎(jiǎng)速度越來(lái)越慢
? ? ? ? ? ? ? ? time += 10;
? ? ? ? ? ? ? ? if (time > 300) {
? ? ? ? ? ? ? ? ? ? time = 300;
? ? ? ? ? ? ? ? ? ? // 判斷當(dāng)前滾動(dòng)到的獎(jiǎng)品是否是內(nèi)定的獎(jiǎng)品
? ? ? ? ? ? ? ? ? ? if (box.children[active].textContent === goods ) {
? ? ? ? ? ? ? ? ? ? ? ? flag = true;
? ? ? ? ? ? ? ? ? ? ? ? running = false;
? ? ? ? ? ? ? ? ? ? ? ? ?setTimeout(() => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?alert(goods); // 彈出抽獎(jiǎng)信息
? ? ? ? ? ? ? ? ? ? ? ? ?}, 500);
? ? ? ? ? ? ? ? ? ? ? ? return; ?// 抽中獎(jiǎng)品后，停止抽獎(jiǎng)
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? setTimeout(f1,time);
? ? ? ? }
? ? </script>
</body>
</html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript使用Range調(diào)色及透明度實(shí)例
本文給大家分享的是使用range做的一個(gè)簡(jiǎn)單的手動(dòng)調(diào)色并可以得到RGB值的小工具，非常的實(shí)用，有需要的小伙伴可以參考下2016-09-09
JavaScript將數(shù)組轉(zhuǎn)換為鏈表的方法
這篇文章主要介紹了JavaScript將數(shù)組轉(zhuǎn)換為鏈表的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
有時(shí)候需要客戶端限制一些特殊字符的輸入，下面是具體的代碼，需要的朋友可以參考下。2010-08-08
微信小程序中的wxs文件,大家或多或少都有見(jiàn)過(guò),下面這篇文章主要給大家介紹了關(guān)于微信小程序生命周期和WXS使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
使用uniapp實(shí)現(xiàn)發(fā)布朋友圈功能
這篇文章主要介紹了使用uniapp實(shí)現(xiàn)發(fā)布朋友圈功能,在文章底部給大家介紹了uniapp?微信小程序分享、分享朋友圈功能，通過(guò)頁(yè)內(nèi)自定義分享按鈕，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
有時(shí)候我們需要?jiǎng)討B(tài)的加入適合的js，因?yàn)橛袝r(shí)候不需要將所有的js都加載進(jìn)來(lái)，以來(lái)提高效率，但這種方法比較適合單個(gè)js文件比較大的情況2009-05-05
javascript禁止訪客復(fù)制網(wǎng)頁(yè)內(nèi)容的實(shí)現(xiàn)代碼
這篇文章主要介紹了javascript禁止訪客復(fù)制網(wǎng)頁(yè)內(nèi)容的方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
微信小程序?qū)崿F(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)單個(gè)卡片左滑顯示按鈕并防止上下滑動(dòng)干擾功能，利用小程序事件處理的api，分別讀取觸摸開(kāi)始，觸摸移動(dòng)時(shí)，觸摸結(jié)束的X/Y坐標(biāo)，根據(jù)差值來(lái)改變整個(gè)卡片的位置，具體實(shí)例代碼跟隨小編一起看看吧
2019-12-12 
APP中javascript+css3實(shí)現(xiàn)下拉刷新效果
本文給大家分享的是如何在APP中使用javascript結(jié)合CSS3實(shí)現(xiàn)下拉刷新特效的代碼，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。
2016-01-01