目录
基本需求分析
源代码
运行效果
基本需求分析
有一个由九个小正方形组成的大正方形，类似与一个3*3的矩阵，其中，最中间的小正方形颜色不同用于区分。
为了实现抽奖的效果，我将外层的八个小正方形作为我的抽奖格，其中八个抽奖格中应该有一个格子的颜色不同于其他七个格子，用来表示当前抽中的物品，
每次打开网页时，这个物品的位置应该是随机的
当我开始抽奖时，这个被抽中的物品的颜色就会变成和其他七个格子的颜色一样，它相邻的一个格子的颜色则变为它原本的颜色
就这样不停的变换，达到一个类似“动态”的效果，最后随机停在某个格子后就不再变换，表示为抽中的物品
源代码
<!-- @Author:Oswald Time: 11.28 Name: HTML实现转盘 --> <!DOCTYPE html> <html lang="en"> <head> <!--基本需求分析--> <!-- 有一个由九个小正方形组成的大正方形，类似与一个3*3的矩阵，其中，最中间的小正方形颜色不同用于区分。 为了实现抽奖的效果，我将外层的八个小正方形作为我的抽奖格，其中八个抽奖格中应该有一个格子的颜色不同于其他七个格子，用来表示当前抽中的物品， 每次打开网页时，这个物品的位置应该是随机的 当我开始抽奖时，这个被抽中的物品的颜色就会变成和其他七个格子的颜色一样，它相邻的一个格子的颜色则变为它原本的颜色 就这样不停的变换，达到一个类似“动态”的效果，最后随机停在某个格子后就不再变换，表示为抽中的物品 --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--设置转盘的初始样式，本质上就是个九宫格--> <style> body { display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } #wheel { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; width: 300px; height: 300px; } .cell { display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; width: 100%; height: 100%; background-color: #999; /* 初始颜色，可以根据需要修改 */ } #selectedCell{ background-color: #f9f; cursor: pointer; } </style> <script> function spinWheel() { var cells = document.getElementsByClassName('cell'); //随机选择停止的位置，注意要绕过索引4 即中间的格子 do { selectedCellIndex = Math.floor(Math.random() * 9); } while (selectedCellIndex === 4); // 每次启动时重置所有格子颜色 for (var i = 0; i < cells.length; i++) { if(i==4){ continue; } cells[i].style.backgroundColor="#999"; } /* ！！难点就在如何实现“旋转”的效果 ！！*/ //随机初始化开始的位置 do { currentIndex = Math.floor(Math.random() * 9); } while (currentIndex === 4); var rotationCount = 0; // 计数器，表示转动的次数 function animate() { cells[currentIndex].style.background = ''; // 将背景设置为空 cells[currentIndex].style.backgroundSize = ''; // 更新索引 保证它是逆时针旋转 并且绕过最中间的小正方形 // 这里注意索引值是0-8 这一步相当于是人工控制了下一步该往哪走 switch(currentIndex) { case 0:currentIndex=3; break; case 1:currentIndex=0; break; case 2:currentIndex=1; break; case 3:currentIndex=6; break; case 5:currentIndex=2; break; case 6:currentIndex=7; break; case 7:currentIndex=8; break; case 8:currentIndex=5; break; } // 如果当前格子不是选中的格子，就改变颜色 if (currentIndex !== selectedCellIndex || rotationCount<16) { cells[currentIndex].style.backgroundColor = '#00f'; // 表示选中的物品 setTimeout(animate, 100); // 0.1秒后继续 // 让轮盘多转几圈，更真实一点，避免出现一开始就停止的情况 // 每转一圈计数器加一 rotationCount++; // 如果转动的次数超过一定值，可以停止动画，避免无限递归 } else { cells[currentIndex].style.backgroundColor = '#00f' // 设置一个定时器，最后一个格子是选中的格子，等待一段时间后弹窗显示抽中的物品 setTimeout(function () { if(selectedCellIndex<5 && rotationCount>=16){ alert("抽中的物品：" + (selectedCellIndex+1)); }else if(selectedCellIndex>=5 && rotationCount>=16){ alert("抽中的物品：" + (selectedCellIndex)); } }, 300); } } animate(); // 开始执行 } </script> </head> <body> <div id="wheel"> <div class="cell" >1</div> <div class="cell" >2</div> <div class="cell" >3</div> <div class="cell" >4</div> <div class="cell" id="selectedCell" onclick="spinWheel()">抽奖</div> <div class="cell" >5</div> <div class="cell" >6</div> <div class="cell" >7</div> <div class="cell" >8</div> </div> </body> </html>
运行效果
每次转盘停止后，弹窗提示当前所抽中的物品。
同时，为了更符合真实场景应用，在程序设计的时候就控制了最小的旋转次数，避免碰到转盘刚开始就停止了的情况。
