这篇文章主要介绍了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; } /* 开始按钮 end */ /* 奖品定位 */ .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; } /* 奖品定位 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 */
通过计时器来实现奖品亮块的循环
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如何实现简单九宫格抽奖”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。