前言：
如今咱们对“css抽奖”可能比较着重，小伙伴们都想要剖析一些“css抽奖”的相关文章。那么小编也在网摘上网罗了一些对于“css抽奖””的相关文章，希望我们能喜欢，朋友们一起来学习一下吧！在日常生活中，我们经常会遇到各种抽奖活动，今天我们来实现一个小小的抽奖逻辑。话不多说，先上效果：
麻雀虽小，五脏俱全。各种细节东西可以自己另做修改。
html页面上，先用ul和li元素排列成一个九宫格。初始化的起点在1上，点击中间的“点击抽奖”，生成一个随机数，外面的方块根据生成的数字进行旋转，直到停留到指定的步数上，然后弹窗提示中奖情况。外面方块的变化是给对应发方块动态添加背景色实现的。
完整代码如下：
<!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>抽奖</title> <style> *{ margin: 0; padding: 0; } #tab{ width:300px; height:300px; border:1px solid #ccc; margin: 100px auto; } li{ list-style: none; width: 98px; height:98px; background-color: aqua; text-align: center; line-height: 100px; float:left; border: 1px solid #aaa; } .activeLi{ background-color: orange; } </style></head><body> <div id="tab"> <ul> <li class="activeLi">1</li> <li>2</li> <li>3</li> <li>4</li> <li onclick="change()">点击抽奖</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></body></html><script type="text/javascript">var num=0;var timer=null;var uLi=document.querySelectorAll("li");var newNum=null; function change(){ newNum=parseInt(Math.random()*(24-17+1)+17); // 生成17-24之间的随机数 const narr=[0,1,2,5,8,7,6,3]; // 从0开始，九宫格顺时针旋转一圈时对应的li的下标 const arr=[1,2,5,8,7,6,3,0]; // 从1开始，九宫格顺时针旋转一圈时对应的li的下标 timer=setInterval(function(){ var pre=narr[num%8]; // 算出上一步的li下标 var nest=arr[num%8]; // 算出当前所在的li下标 uLi[pre].setAttribute("class",""); // 清除上一步的li的样式 uLi[nest].setAttribute("class","activeLi"); // 添加当前所在li的样式 num+=1; if(num+1===newNum){ clearInterval(timer); // 步数到了随机数的时候，停止 setTimeout(function(){ // 弹窗告诉中奖情况，然后回归初始化样式 alert(`恭喜中奖${nest+1}`); uLi[nest].setAttribute("class",""); uLi[0].setAttribute("class","activeLi"); num=0; newNum=null; },400) } },100) }</script>重点在上面的js中，复制完整代码即可实现上面的图片效果。实现中奖逻辑的方式还有很多，这是其中一种。喜欢的话欢迎收藏！
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css抽奖
