| 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>实现效果如下图： 
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
使用JavaScript实现轮播图特效
JavaScript中各种二进制对象关系的深入讲解 |
