JS實(shí)現(xiàn)簡單九宮格抽獎(jiǎng)
用JavaScript寫一個(gè)九宮格的抽獎(jiǎng)盤,供大家參考,具體內(nèi)容如下
點(diǎn)擊中間的塊,選中獎(jiǎng)品的亮塊會在邊緣的8個(gè)塊循環(huán);
選中后,彈出選中的內(nèi)容;
代碼參考:
HTML文件:
<body> <div class="box"> ? ? <ul id="jiangPin"> ? ? ? ? <li><a href="javascript:viod(0);" ><span>獎(jiǎng)品 1</span></a></li> ? ? ? ? <li><a href="javascript:viod(0);" ><span>獎(jiǎng)品 2</span></a></li> ? ? ? ? <li><a href="javascript:viod(0);" ><span>獎(jiǎng)品 3</span></a></li> ? ? ? ? <li><a href="javascript:viod(0);" ><span>獎(jiǎng)品 4</span></a></li> ? ? ? ? <li><a href="javascript:viod(0);" ><span>獎(jiǎng)品 5</span></a></li> ? ? ? ? <li><a href="javascript:viod(0);" ><span>獎(jiǎng)品 6</span></a></li> ? ? ? ? <li><a href="javascript:viod(0);" ><span>獎(jiǎng)品 7</span></a></li> ? ? ? ? <li><a href="javascript:viod(0);" ><span>獎(jiǎng)品 8</span></a></li> ? ? </ul> ? ? <button type="button" class="btn" id="beginBtn">點(diǎn)擊開始</button> ? ? <div class="tishi" id="tishi"> ? ? ? ? <span>恭喜您獲得:</span> ? ? ? ? <p></p> ? ? ? ? <button>確定</button> ? ? </div> </div> </body>
通過position定位來固定獎(jiǎng)盤各個(gè)板塊的位置,將有獎(jiǎng)品的8個(gè)塊分散在九宮格的邊緣,開始按鈕在九宮格正中間,將彈出的提示框放于整個(gè)獎(jiǎng)盤的上層顯示,初始將其隱藏。
CSS文件:
.box{ ? ? width: 450px; ? ? height: 450px; ? ? background-color: #9a6e3a; ? ? border: 2px solid #990055; ? ? position: relative; ? ? z-index: 10; } .box>ul>li{ ? ? position: absolute; ? ? width: 148px; ? ? height: 148px; ? ? border: 1px #222222 solid; ? ? background-color: #ad889d; } .box>ul>li>a{ ? ? display: block; ? ? color: #fff; ? ? font-size: 30px; ? ? text-align: center; ? ? line-height: 148px; } /* 開始按鈕 */ .btn{ ? ? position: absolute; ? ? top: 150px; ? ? left: 150px; ? ? width: 150px; ? ? height: 150px; ? ? border: 1px #222222 solid; ? ? background-color: #7d53c7; ? ? outline: none; ? ? cursor: pointer; ? ? color: #fff; ? ? font-size: 25px; ? ? transition: all 0.5s; ? ? z-index: 20; } .btn:hover{ ? ? background-color: #df04ff; ? ? font-size: 30px; } .btn:active{ ? ? background-color: #7d53c7; } .box>ul>li.on{ ? ? background-color: #f00; } /* 開始按鈕 end */ /* 獎(jiǎng)品定位 */ .box>ul>li:nth-child(1){ ? ? top: 0; ? ? left: 0; } .box>ul>li:nth-child(2){ ? ? top: 0; ? ? left: 150px; } .box>ul>li:nth-child(3){ ? ? top: 0; ? ? left: 300px; } .box>ul>li:nth-child(4){ ? ? top: 150px; ? ? left: 300px; } .box>ul>li:nth-child(5){ ? ? top: 300px; ? ? left: 300px; } .box>ul>li:nth-child(6){ ? ? top: 300px; ? ? left: 150px; } .box>ul>li:nth-child(7){ ? ? top: 300px; ? ? left: 0; } .box>ul>li:nth-child(8){ ? ? top: 150px; ? ? left: 0; } /* 獎(jiǎng)品定位 end */ /* 提示框 */ .tishi{ ? ? width: 300px; ? ? height: 146px; ? ? border: 2px #990055 solid; ? ? background: #92EC1F; ? ? border-radius: 20px; ? ? position: absolute; ? ? left: 50%; ? ? top: 50%; ? ? margin-top: -75px; ? ? margin-left: -150px; ? ? z-index: 30; ? ? text-align: center; ? ? font-size: 25px; ? ? font-weight: bold; ? ? display: none; ? ? animation: tishiAni 0.5s both; ? ? transition: all 0.5s; } .tishi>p{ ? ? color: red; ? ? font-size: 28px; ? ? margin-top: 20px; } .tishi>button{ ? ? width: 60px; ? ? height: 30px; ? ? border:none; ? ? outline: none; ? ? cursor: pointer; ? ? position: absolute; ? ? right: 30px; ? ? bottom: 20px; } @keyframes tishiAni { ? ? 0%{ ? ? ? ? opacity: 0; ? ? } ? ? 100%{ ? ? ? ? opacity: 1; ? ? } } /* 提示框 end */
通過計(jì)時(shí)器來實(shí)現(xiàn)獎(jiǎng)品亮塊的循環(huán)
JavaScript文件:
{ ? ? let jiangPinChi = [ ? ? ? ? "獎(jiǎng)品1", ? ? ? ? "獎(jiǎng)品2", ? ? ? ? "獎(jiǎng)品3", ? ? ? ? "獎(jiǎng)品4", ? ? ? ? "獎(jiǎng)品5", ? ? ? ? "獎(jiǎng)品6", ? ? ? ? "獎(jiǎng)品7", ? ? ? ? "獎(jiǎng)品8", ? ? ]; ? ? let index = 0; ? ? let times = Math.round( Math.random()*20 ) +20 ; ? ? let jiangPin = document.getElementById("jiangPin"); ? ? let beginBtn = document.getElementById("beginBtn"); ? ? let tishi = document.getElementById("tishi"); ? ? let cont = tishi.children; ? ? let jPLi = jiangPin.children; ? ? let liBro = function (tag) { ? ? ? ? let fat = tag.parentNode; ? ? ? ? let tagLi = fat.children; ? ? ? ? let othLis = []; ? ? ? ? for (let jPLi of tagLi) { ? ? ? ? ? ? if (jPLi === tag) { ? ? ? ? ? ? ? ? continue; ? ? ? ? ? ? } ? ? ? ? ? ? othLis.push(jPLi); ? ? ? ? } ? ? ? ? return othLis; ? ? }; ? ? let showing = function( index ) { ? ? ? ? let othLis = liBro( jPLi[index] ); ? ? ? ? for( let i = 0; i<=othLis.length-1 ; i++ ){ ? ? ? ? ? ? othLis[i].classList.remove("on"); ? ? ? ? } ? ? ? ? // othLis.forEach(function( value,i ){ ? ? ? ? // ? ? value.classList.remove("on"); ? ? ? ? // }); ? ? ? ? jPLi[index].classList.add("on"); ? ? }; ? ? let changeFun = function( event ){ ? ? ? ? let myset = setInterval(function(){ ? ? ? ? ? ? index++; ? ? ? ? ? ? times--; ? ? ? ? ? ? if( index > jPLi.length-1 ){ ? ? ? ? ? ? ? ? index = 0; ? ? ? ? ? ? } ? ? ? ? ? ? showing( index ); ? ? ? ? ? ? if( times <= 0 ){ ? ? ? ? ? ? ? ? clearInterval(myset); ? ? ? ? ? ? ? ? times = Math.round( Math.random()*20 ) +20; ? ? ? ? ? ? ? ? tishi.style.display = "block"; ? ? ? ? ? ? ? ? cont[1].innerHTML = jiangPinChi[index]; ? ? ? ? ? ? } ? ? ? ? },100); ? ? }; ? ? beginBtn.addEventListener("click",changeFun); ? ? cont[2].addEventListener("click",function( event ){ ? ? ? ? tishi.style.display = "none"; ? ? }); }
當(dāng)然,這個(gè)可以擴(kuò)展成更多的類型,實(shí)現(xiàn)不止九宮格的獎(jiǎng)盤抽獎(jiǎng)模式。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)與web通信的方法詳解
這篇文章主要介紹了JavaScript實(shí)現(xiàn)與web通信的方法詳解,文章通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08CocosCreator如何實(shí)現(xiàn)劃過的位置顯示紋理
這篇文章主要介紹了CocosCreator紋理shader的一些知識,想了解shader的同學(xué),一定要看下,并且親自動手實(shí)踐2021-04-04js實(shí)現(xiàn)圖片旋轉(zhuǎn)的三種方法
這篇文章主要介紹了js實(shí)現(xiàn)圖片旋轉(zhuǎn)的三種方法,需要的朋友可以參考下2014-04-04javascript 不用reverse實(shí)現(xiàn)字符串反轉(zhuǎn)的代碼
javascript 不用reverse實(shí)現(xiàn)字符串反轉(zhuǎn)的代碼,需要的朋友可以參考下。2010-03-03JavaScript Generator函數(shù)使用分析
生成器Generator是JavaScript ES6引入的特性,它讓我們可以分段執(zhí)行一個(gè)函數(shù)。但是在談?wù)撋善鳎℅enerator)之前,我們要先了解迭代器Iterator2022-10-10javasript實(shí)現(xiàn)密碼的隱藏與顯示
用戶輸入密碼時(shí)都是顯示的星號了,那么我們希望查看明文要怎么查看呢,下面我們只要使用一段簡單的js就可以實(shí)現(xiàn)查看密碼框的明文了,有需要的小伙伴可以來參考下。2015-05-05