原生js实现随机点名功能

时间：2021-05-25

本文实例为大家分享了js实现随机点名的具体代码，供大家参考，具体内容如下

原生js实现随机点名，js部分有注释

<!DOCTYPE html><html lang="en"><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> *{ padding: 0; margin: 0; } .wrapper{ width: 800px; margin: 10px auto; border: 2px solid #ccc; text-align: center; } .lucking{ width: 200px; height: 180px; border: 1px solid #000; position: relative; } .lucking img{ position: absolute; left: 0; bottom: 0; } .wrapper ul li{ width: 100px; height: 50px; line-height: 50px; text-align: center; margin: 4px; border:2px solid #ccc; border-radius: 5px; display: inline-block; } .wrapper button{ margin-top: 20px; width: 80px; height: 40px; border: none; background-color: #ddd; border-radius: 5px; font-weight: 700; outline: none; cursor: pointer; } .wrapper .active{ background-color: #f1084a; font-weight: 700; } </style></head><body> <div class="wrapper" id="_wrapper"> <ul id="_ul"></ul> <button class="start">开始点名</button> <button class="stop">停止</button> <div class="lucking" id="_lucking"> <p></p> <img src="1.gif" alt=""> </div> </div></body></html><script> var array = ['杨雨婷','张蓓','王洁','邓伦','李易峰','杨雨婷','张蓓','王洁','邓伦','李易峰','杨雨婷','张蓓','王洁','邓伦','李易峰','杨雨婷','张蓓','王洁','邓伦','李易峰','杨雨婷','张蓓','王洁','邓伦','李易峰','杨雨婷','张蓓','王洁','邓伦','李易峰','杨雨婷','张蓓','王洁','邓伦']; // 获取元素 var _wrapper = document.getElementById('_wrapper'); var ul = document.getElementById('_ul');; var timer = null; init(); function init(){ // 动态创建li for(var i = 0; i < array.length;i++) { var oli = document.createElement('li'); oli.innerHTML = array[i]; ul.appendChild(oli); } // 点击 click(); } function click(){ // 获取start按钮 var start = _wrapper.getElementsByTagName('button')[0]; var stop = _wrapper.getElementsByTagName('button')[1]; var lucking = document.getElementById('_lucking'); // 定时器 start.addEventListener('click',function(){ clearInterval(timer); timer = setInterval(function(){ // 获得随机数 var random = Math.floor(Math.random()*array.length); for(var i = 0;i < array.length;i++) { ul.children[i].className = ''; } ul.children[random].className = 'active'; },50); }); stop.addEventListener('click',function(){ clearInterval(timer); // 找到此时的元素 var active = document.getElementsByClassName('active')[0]; lucking.children[0].innerText = "幸运儿：" + active.innerText; }) }</script>

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

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

相关文章