首页随机转盘html代码

随机转盘html代码

时间: 2024-08-01 14:00:54 浏览: 123

随机转盘，也称为抽奖轮盘，通常在网页上作为互动元素使用HTML、CSS和JavaScript来实现。下面是一个简单的HTML和JavaScript结合的随机转盘基础示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> #roulette { width: 400px; height: 400px; border-radius: 50%; background-color: #f2f2f2; display: flex; justify-content: center; align-items: center; position: relative; } . sectors { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.5s; } . sector { position: absolute; width: 36%; height: 100%; border-radius: 50% / 90%; background-color: #ccc; text-align: center; line-height: 200px; font-size: 3em; opacity: 0; } . active-sector { opacity: 1; transform: rotate(0deg); } </style> </head> <body> <div id="roulette"> <div class=" sectors">  <div class=" sector" data-value="1">1</div> <div class=" sector" data-value="2">2</div>  </div> </div> <script> // JavaScript 部分用于旋转转盘和选择随机数 document.addEventListener('DOMContentLoaded', function() { const roulette = document.getElementById('roulette'); const sectors = roulette.getElementsByClassName('sector'); let currentSector = Math.floor(Math.random() * 36) + 1; function spin() { sectors.forEach(function(sector) { if (sector.dataset.value === currentSector) { sector.classList.add('active-sector'); } else { sector.classList.remove('active-sector'); } }); setTimeout(spin, 500); // 模拟转盘转动效果 } spin(); }); </script> </body> </html> ``` 这个代码创建了一个圆形转盘，每个扇形区域代表数字1到36，点击或刷新页面时会随机选择一个扇形显示为“活动”状态。

阅读全文