这篇文章主要介绍了JS如何实现简单九宫格抽奖的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JS如何实现简单九宫格抽奖文章都会有所收获，下面我们一起来看看吧。
HTML文件:
<body><div class="box"> <ul id="jiangPin"> <li><a href="javascript:viod(0);" ><span>奖品 1</span></a></li> <li><a href="javascript:viod(0);" ><span>奖品 2</span></a></li> <li><a href="javascript:viod(0);" ><span>奖品 3</span></a></li> <li><a href="javascript:viod(0);" ><span>奖品 4</span></a></li> <li><a href="javascript:viod(0);" ><span>奖品 5</span></a></li> <li><a href="javascript:viod(0);" ><span>奖品 6</span></a></li> <li><a href="javascript:viod(0);" ><span>奖品 7</span></a></li> <li><a href="javascript:viod(0);" ><span>奖品 8</span></a></li> </ul> <button type="button" class="btn" id="beginBtn">点击开始</button> <div class="tishi" id="tishi"> <span>恭喜您获得：</span> <p></p> <button>确定</button> </div></div></body>通过position定位来固定奖盘各个板块的位置，将有奖品的8个块分散在九宫格的边缘，开始按钮在九宫格正中间，将弹出的提示框放于整个奖盘的上层显示，初始将其隐藏。
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;}.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;}.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; }}通过计时器来实现奖品亮块的循环
JavaScript文件：
{ let jiangPinChi = [ "奖品1", "奖品2", "奖品3", "奖品4", "奖品5", "奖品6", "奖品7", "奖品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"; });}关于“JS如何实现简单九宫格抽奖”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“JS如何实现简单九宫格抽奖”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。
