首页用HTML5+CSS帮我写一个抽奖网页，奖项有一等奖二等奖和三等奖

用HTML5+CSS帮我写一个抽奖网页，奖项有一等奖二等奖和三等奖

时间: 2023-05-13 19:04:46 浏览: 126

抽奖转转盘-HTML5网页源代码

5星 · 资源好评率100%

这是一个抽奖转转盘游戏-使用HTML网页制作而成，用Canvas组件绘制的，可用（手机）浏览器打开运行，源代码供学习参考，配套的教程请看相关文章https://blog.csdn.net/zs1028/article/details/127751395

好的，我可以帮你写一个抽奖网页，以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>抽奖网页</title> <style> body { background-color: #f5f5f5; font-family: Arial, sans-serif; } h1 { text-align: center; margin-top: 50px; font-size: 36px; color: #333; } .container { margin: 0 auto; width: 600px; padding: 50px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .btn { display: block; margin: 0 auto; margin-top: 50px; padding: 10px 20px; background-color: #f00; color: #fff; font-size: 24px; border-radius: 5px; cursor: pointer; } .prize { text-align: center; margin-top: 50px; font-size: 48px; color: #f00; } </style> </head> <body> <h1>抽奖网页</h1> <div class="container"> <div class="prize"></div> <button class="btn" onclick="draw()">开始抽奖</button> </div> <script> var prizes = ['一等奖', '二等奖', '三等奖']; // 奖项 var btn = document.querySelector('.btn'); var prize = document.querySelector('.prize'); function draw() { var index = Math.floor(Math.random() * prizes.length); // 随机抽取一个奖项 prize.innerHTML = prizes[index]; // 显示中奖结果 btn.disabled = true; // 禁用抽奖按钮 } </script> </body> </html> ``` 你可以将上述代码保存为一个 HTML 文件，然后在浏览器中打开即可看到抽奖网页。

阅读全文