html 代码 <!DOCTYPE <span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a></span>><br /> <html></p> <p> <head><br /> <meta charset="UTF-8"><br /> <title></title><br /> <style type="text/<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/css" title="css" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">css</a></span>"><br /> body {<br /> position: relative;<br /> text-align: center;<br /> }</p> <p> #students {<br /> width: 672px;<br /> margin: 0 auto;<br /> }</p> <p> #students div {<br /> width: 100px;<br /> height: 100px;<br /> display: inline-block;<br /> border: 1px dashed black;<br /> font-size: 30px;<br /> line-height: 100px;<br /> text-align: center;<br /> margin: 5px;<br /> background-color: pink;<br /> color: white;<br /> }</p> <p> #switch {<br /> width: 100px;<br /> height: 100px;<br /> background-color: black;<br /> color: white;<br /> font-size: 30px;<br /> line-height: 100px;<br /> text-align: center;<br /> position: absolute;<br /> top: 50px;<br /> left: 50px;<br /> }<br /> </style><br /> </head></p> <p> <body><br /> <div id="students"></div><br /> <div id="switch">开始</div><br /> </body><br /> <script type="text/javascript"><br /> var oStudents = document.getElementById("students");<br /> var nameArr = ["张三","李四","王二","李桥","独立","医院","哈哈","嘻嘻","佳佳","贝贝","宝宝","秀秀","丽丽","爱心","健康","麻古","散散","频频","想想","等等","小柒"];<br /> var oBtn = document.getElementById("switch");<br /> var str = "";<br /> var timer = null;<br /> var isSelect = false;<br /> var lastNum = 0; //记录上一次变颜色的div的下标<br /> var oDivs = oStudents.getElementsByTagName("div");<br /> for(var i = 0; i < nameArr.length; i++) {<br /> str += "<div>" + nameArr[i] + "</div>";<br /> }<br /> oStudents.innerHTML = str;</p> <p> oBtn.onclick = function() {<br /> isSelect = !isSelect;<br /> if(isSelect) {<br /> oBtn.innerHTML = "结束";<br /> clearInterval(timer);<br /> timer = setInterval(function() {<br /> getName();<br /> }, 50);<br /> } else {<br /> clearInterval(timer);<br /> oBtn.innerHTML = "开始";<br /> }<br /> }</p> <p> function getName() {<br /> var num = Math.floor(Math.random() * (nameArr.length – 1 – 0 + 1) + 0);<br /> oDivs[num].style.backgroundColor = "yellow";<br /> oDivs[num].style.color = "black";<br /> oDivs[lastNum].style.backgroundColor = "pink";<br /> oDivs[lastNum].style.color = "white";<br /> lastNum = num;<br /> }<br /> </script></p> <p></html> » 本文来自：前端开发者 » 《JS原生 一个小点名器,比较初级的那种,你懂得》 » 本文链接地址：https://www.rokub.com/8840.html » 您也可以订阅本站：https://www.rokub.com
前端开发者
评论前必须登录！
注册