脚本宝典收集整理的这篇文章主要介绍了JavaScript实现随机点名网页,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
JavaScript写一个随机点名网页,供大家参考,具体内容如下
<!DOCTYPE htML> <html> <head> <meta charset="UTF-8"> <tITle>Document</title> <style> * { margin: 0; padding: 0; } #box { border: 1px solid black;/*设置盒子的边框和颜色*/ width: 500px; height: 500px; margin: 100px auto;/*离顶部200px,并且居中*/ background-color: #000000;/*盒子的背景颜色*/ position: relative;/*定位*/ } p{ width: 500px; height: 200px; text-align: center;/*将文本居中*/ line-height: 200px;/*设置行高*/ font-Size: 80px;/*字体大小*/ color: #ffff00; } #anniu { width: 200px; height: 50px; background-color:#00aaff; position: absolute; bottom: 100px;/*距离底部100px*/ left: 50%; margin-left: -100px; color: #ffffff; font-size: 20px } </style> </head> <body> <div id="box"> <p id="wenben">随机点名册</p> <input type="button" value="开始点名" id="anniu"> </div> </body> <script> VAR wenben = document.getElementById("wenben") var anniu = document.getElementById("anniu") var timer //定义计时器 var arr = ['刘一','陈二','张三','李四','王五','赵六','孙七','周八','吴九','郑十'] var test = true anniu.onclick = function() { if (test) { start() anniu.innerHTML = "结束" test = false } else { stop() anniu.innerHTML = "开始" test = true } } function start() { /*开始*/ timer = setInterval(function random() { var index = parseInt(Math.random() * arr.length) wenben.innerHTML = arr[index] }, 50); } function stop() { /*结束*/ clearInterval(timer) } </script> </html>
实现效果如下图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本宝典。
以上是脚本宝典为你收集整理的JavaScript实现随机点名网页全部内容,希望文章能够帮你解决JavaScript实现随机点名网页所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。