2023-11-08
藏龙卧虎
00

目录

简介
代码

简介

使用HTML + CSS + JS实现的非常简单的抽奖功能。

代码

提示:可以自己新建个html文件,将下方代码复制填写到该文件中,浏览器打开该文件即可查看代码效果。

html
<!DOCTYPE html> <html> <head> <title>抽奖</title> <style> body { font-family: Arial, sans-serif; text-align: center; margin-top: 100px; } h1 { color: #333; } #result { font-size: 24px; font-weight: bold; color: #E74C3C; margin-top: 20px; } #spinBtn { margin-top: 20px; padding: 10px 20px; font-size: 18px; cursor: pointer; } </style> </head> <body> <h1>抽奖活动</h1> <p>点击下面的按钮抽奖:</p> <button id="spinBtn">抽奖</button> <div id="result"></div> <script> const prizes = ["一等奖", "二等奖", "三等奖", "幸运奖", "谢谢参与"]; const spinBtn = document.getElementById("spinBtn"); const resultDiv = document.getElementById("result"); spinBtn.addEventListener("click", () => { const randomIndex = Math.floor(Math.random() * prizes.length); const randomPrize = prizes[randomIndex]; resultDiv.innerText = "恭喜您抽中了:" + randomPrize; }); </script> </body> </html>
如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:DingDangDog

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!