要创建一个抽奖活动,你可以使用HTML、CSS和JavaScript,以下是一个简单的示例:
1、创建一个HTML文件,添加以下内容:
抽奖活动 欢迎参加抽奖活动!
请在下面的表格中填写您的姓名和联系方式,然后点击“提交”按钮。
姓名 | 联系方式 |
---|
2、接下来,添加CSS样式,在标签内添加以下内容:
body { fontfamily: Arial, sansserif; } h1 { textalign: center; } form { display: flex; flexdirection: column; alignitems: center; marginbottom: 20px; } input { margin: 5px; } button { margintop: 10px; } table { width: 100%; bordercollapse: collapse; } th, td { border: 1px solid black; padding: 8px; textalign: left; } th { backgroundcolor: #f2f2f2; }
3、添加JavaScript代码,在标签内添加以下内容:
document.getElementById('participantForm').addEventListener('submit', function (event) { event.preventDefault(); // 阻止表单默认提交行为 const name = document.getElementById('name').value; const contact = document.getElementById('contact').value; const table = document.getElementById('participantsTable').getElementsByTagName('tbody')[0]; const newRow = table.insertRow(table.rows.length); const nameCell = newRow.insertCell(0); const contactCell = newRow.insertCell(1); nameCell.innerHTML = name; contactCell.innerHTML = contact; document.getElementById('name').value = ''; document.getElementById('contact').value = ''; document.getElementById('drawButton').disabled = false; }); document.getElementById('drawButton').addEventListener('click', function () { const participants = Array.from(document.getElementById('participantsTable').getElementsByTagName('tbody')[0].rows); const randomIndex = Math.floor(Math.random() * participants.length); const winner = participants[randomIndex]; document.getElementById('result').innerHTML = '恭喜 ' + winner.cells[0].innerHTML + ' 获得了奖品!'; document.getElementById('drawButton').disabled = true; });
现在,你可以在浏览器中打开这个HTML文件,填写参与者信息并点击“开始抽奖”按钮,抽中的获奖者将在页面上显示。
网站名称:html如何做一个抽奖
地址分享:http://www.csdahua.cn/qtweb/news4/457704.html
网站建设、网络推广公司-快上网,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 快上网