网站设置301重定向,广州手机网站,网站建设颜色,寿光网站优化目录
1、添加参与者
2、多次添加
3、点击抽奖
功能介绍#xff1a;
使用方法#xff1a;
完整代码#xff1a; 一个简单但功能强大的抽奖系统的示例#xff0c;用于在网页上实现抽奖。 1、添加参与者 2、多次添加 3、点击抽奖 功能介绍#xff1a;
参与者添加…
目录
1、添加参与者
2、多次添加
3、点击抽奖
功能介绍
使用方法
完整代码 一个简单但功能强大的抽奖系统的示例用于在网页上实现抽奖。 1、添加参与者 2、多次添加 3、点击抽奖 功能介绍
参与者添加 用户可以输入参与者名字并点击“添加参与者”按钮将其加入列表。添加的名字会显示在页面下方的列表中。开始抽奖 点击“开始抽奖”按钮系统会随机从已添加的参与者中选出一个作为中奖者。抽奖结果会显示在页面上。动态更新 参与者列表动态更新显示所有参与者的序号和名字。
使用方法
打开浏览器保存并运行此HTML文件。输入参与者名字并点击“添加参与者”。点击“开始抽奖”查看中奖结果。
完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title抽奖系统/titlestylebody {font-family: Arial, sans-serif;background-color: #f4f4f9;margin: 0;padding: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;}.container {text-align: center;padding: 20px;background: white;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}.title {font-size: 24px;font-weight: bold;margin-bottom: 20px;}.input-area {margin-bottom: 20px;}input, button {padding: 10px;margin: 5px;border-radius: 5px;border: 1px solid #ddd;font-size: 16px;}button {background: #007BFF;color: white;cursor: pointer;}button:hover {background: #0056b3;}.result {font-size: 18px;color: #28a745;margin-top: 20px;}/style
/head
bodydiv classcontainerdiv classtitle高级抽奖系统/divdiv classinput-areainput typetext idparticipant placeholder输入参与者名字button onclickaddParticipant()添加参与者/button/divdivbutton onclickstartLottery()开始抽奖/button/divdiv classresult idresult/divul idparticipantsList/ul/divscriptconst participants [];function addParticipant() {const input document.getElementById(participant);const name input.value.trim();if (name) {participants.push(name);updateParticipantsList();input.value ;} else {alert(请输入有效的名字);}}function updateParticipantsList() {const list document.getElementById(participantsList);list.innerHTML ;participants.forEach((name, index) {const li document.createElement(li);li.textContent ${index 1}. ${name};list.appendChild(li);});}function startLottery() {if (participants.length 0) {alert(请先添加参与者);return;}const winnerIndex Math.floor(Math.random() * participants.length);const winner participants[winnerIndex];document.getElementById(result).textContent 恭喜 ${winner} 中奖;}/script
/body
/html如果需要更多高级功能例如奖品设置、多轮抽奖等可以进一步扩展逻辑 嗨我是命运之光。如果你觉得我的分享有价值不妨通过以下方式表达你的支持 点赞来表达你的喜爱 关注以获取我的最新消息 评论与我交流你的见解。我会继续努力为你带来更多精彩和实用的内容。 点击这里 获取最新动态⚡️ 让信息传递更加迅速。
