基于JavaScript实现简单抽奖功能代码实例

时间：2021-05-25

为什么会做这个东西呢，纯属好玩，闲的

其实是在上次班会的时候想到的，班会的时候叫人回答问题，没人回答

当时就想，我如果抽签抽到你了，你还是不回答吗？？好吧，一切都是扯淡

先来看看页面效果吧：


点击抽取就可以抽签了，红色框会显示内容，（PS：红色框是没有的，仅仅做描述）

抽取到的效果图如下，字体会随机滚动，最后停止：


里面的抽取内容完全可以替换，，，，

下面贴上代码：

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{margin: 0px;padding: 0px;} li{list-style: none;} body{ font-family: "楷体"; user-select:none; background: url('1.jpg') no-repeat; background-size: 100%; } .section{ position: relative; width:935px; height: 460px; background-color: rgba(0,0,0,.3); margin:165px auto 0; text-align: center; } .section h2{ height: 90px; line-height: 90px; font-size: 40px; color:#fff; } .section .s-result{ height: 400px; color: #fff; } .s-result .number{ float: left; width: 895px; height: 300px; line-height: 300px; margin-left: 20px; font-size: 60px; font-weight: bold; } .btn{ position:absolute; left: 50%; margin-left: -161px; bottom: -40px; width: 323px; height: 81px; border-radius: 30px; background-color: #000; cursor:pointer; } .btn p{ line-height: 81px; font-size: 50px; color: #fff; } </style></head><body> <div class="section"> <h2>看看谁最幸运！！</h2> <div class="s-result"> </div> <div class="btn"> <p>点 击 抽 取</p> </div> </div> <script> var oBtn = document.getElementsByClassName('btn')[0]; var oResult = document.getElementsByClassName('s-result')[0]; var arrName = ['张三','李四','王五','赵六','李xx','杨xx','张xx','A_dmin']; //抽签的内容 var step = 1; var cnt = 1; var flag = true; oBtn.onclick = function (){ if(flag){ step = 1; creatName(); flag = false; }else{ var d = document.getElementsByClassName('number')[0]; oResult.removeChild(d); step = 1; creatName(); } } function getName(){ var num = Math.floor(Math.random()*(arrName.length-1)); var n = arrName[num]; arrName.splice(num,1); return n; } function creatName(){ if(step > cnt){ return null; } step++; var oDiv = document.createElement('div'); oDiv.className = 'number'; oResult.appendChild(oDiv); var dis = 1; var maxDis = 30; var mySet = setInterval(function(){ dis++; if(dis > maxDis){ oDiv.innerHTML = getName(); clearInterval(mySet); creatName(); return null; } oDiv.innerHTML = arrName[Math.floor(Math.random()*(arrName.length-1))]; },50); } </script></body></html>

PS：

有点小瑕疵，可点击多次，每次随机的结果都是不一样的，所以当内容抽取完之后，页面会显示undefined，不过影响不大，啊哈哈哈哈

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章