JS原生一个小点名器,比较初级的那种,你懂得

由前端开发者 · 2018年11月6日15:14:14

摘要：html 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ……

html 代码

<!DOCTYPE <a href="https://www.rokub.com/category/html" title="html">html</a>> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/<a href="https://www.rokub.com/category/css" title="css">css</a>"> body { position: relative; text-align: center; } #students { width: 672px; margin: 0 auto; } #students div { width: 100px; height: 100px; display: inline-block; border: 1px dashed black; font-size: 30px; line-height: 100px; text-align: center; margin: 5px; background-color: pink; color: white; } #switch { width: 100px; height: 100px; background-color: black; color: white; font-size: 30px; line-height: 100px; text-align: center; position: absolute; top: 50px; left: 50px; } </style> </head> <body> <div id="students"></div> <div id="switch">开始</div> </body> <script type="text/javascript"> var oStudents = document.getElementById("students"); var nameArr = ["张三","李四","王二","李桥","独立","医院","哈哈","嘻嘻","佳佳","贝贝","宝宝","秀秀","丽丽","爱心","健康","麻古","散散","频频","想想","等等","小柒"]; var oBtn = document.getElementById("switch"); var str = ""; var timer = null; var isSelect = false; var lastNum = 0; //记录上一次变颜色的div的下标 var oDivs = oStudents.getElementsByTagName("div"); for(var i = 0; i < nameArr.length; i++) { str += "<div>" + nameArr[i] + "</div>"; } oStudents.innerHTML = str; oBtn.onclick = function() { isSelect = !isSelect; if(isSelect) { oBtn.innerHTML = "结束"; clearInterval(timer); timer = setInterval(function() { getName(); }, 50); } else { clearInterval(timer); oBtn.innerHTML = "开始"; } } function getName() { var num = Math.floor(Math.random() * (nameArr.length – 1 – 0 + 1) + 0); oDivs[num].style.backgroundColor = "yellow"; oDivs[num].style.color = "black"; oDivs[lastNum].style.backgroundColor = "pink"; oDivs[lastNum].style.color = "white"; lastNum = num; } </script> </html>

» 本文来自：前端开发者 » 《JS原生一个小点名器,比较初级的那种,你懂得》

» 本文链接地址：https://www.rokub.com/8840.html

» 您也可以订阅本站：https://www.rokub.com

JS原生一个小点名器,比较初级的那种,你懂得

You may also like...

发表评论取消回复

前端开发者/SEO-技术群/抢票群(加本人微信拉群）

近期文章

近期评论

分类目录

搜索文章

精选

联系方式

JS原生 一个小点名器,比较初级的那种,你懂得

You may also like...

Web前端 淡入浅出效果轮播图

前端地图背景切换

前端开发页面计时跳转

发表评论 取消回复

前端开发者/SEO-技术群/抢票群(加本人微信拉群）

近期文章

近期评论

分类目录

搜索文章

精选

联系方式

JS原生一个小点名器,比较初级的那种,你懂得

Web前端淡入浅出效果轮播图

发表评论取消回复