首页固定结果的滚动抽签html

固定结果的滚动抽签html

时间: 2024-10-09 20:10:51 浏览: 25

简易抽签网页程序，HTML5编写

简易抽签程序，纯HTML5编写，无需联网

在HTML中创建一个固定结果的滚动抽签功能，通常需要结合HTML、CSS和JavaScript或者一个轻量级的前端框架如jQuery。以下是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .scrolling-container { width: 200px; height: 200px; overflow-y: scroll; white-space: nowrap; } .lottery-box { display: inline-block; margin-right: 5px; cursor: pointer; } </style> </head> <body> <div class="scrolling-container" id="scrollingContainer">  <div class="lottery-box" data-result="奖品1">奖品1</div> <div class="lottery-box" data-result="奖品2">奖品2</div>  </div> <script> // 假设奖品数组是预先定义好的 const prizes = ['奖品1', '奖品2', '奖品3', '奖品4']; // 获取抽奖容器 const container = document.getElementById('scrollingContainer'); // 模拟点击显示结果 function showLotteryResult(index) { container.style.display = 'block'; container.querySelectorAll('.lottery-box').forEach((box, i) => { box.style.color = i === index ? 'red' : 'black'; box.textContent = `奖品${prizes[index]}`; }); } // 示例按钮点击事件 document.querySelector('button').addEventListener('click', () => { const randomIndex = Math.floor(Math.random() * prizes.length); showLotteryResult(randomIndex); }); </script> <button>开始滚动抽签</button> </body> </html> ``` 在这个例子中，当你点击“开始滚动抽签”按钮时，会随机选择一个奖品，并将相应奖品的文字颜色改变为红色以表示已抽中。由于奖品数量是固定的，你可以根据实际需求添加更多奖品到`.scrolling-container`里。

阅读全文