js 点名
<!doctype html> <html> <head> <meta charset="utf-8"> <title>点人名</title> <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"/> <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport"/> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style> h2{ font-size: 5em; text-align: center; margin-top: 50px; height: 250px; width: 350px; margin: 50px auto; border: 1px solid #ccc; box-shadow: 0 0 5px #000; line-height: 250px; } .btn{ text-align:center; } .btn input{ padding:10px 20px; margin:10px 30px; color:#000; } .texrt{ text-shadow: 1px 2px 4px red; } </style> </head> <body> <h2 id="num"> 开始点人 </h2> <div class="btn"> <input type="button" value="开始" id="start"/> <input type="button" value="结束" id="stop"/> </div> <script> var arry = ['张武','赵欣','赵瑛','赵子怡','菲菲','雷囧','马季','小辣椒','龙卷风','名阿凡','秒速','艾莉婕','奥拉基']; var num = document.getElementById('num'); var start = document.getElementById('start'); var stop = document.getElementById('stop'); var time = null; start.onclick=function(){ num.className = 'texrt'; this.disabled=true; time = setInterval(function(){ var n = Math.round(Math.random()*(arry.length-1)); //随机产生 0 - arry.length 之间的数字 num.innerHTML = arry[n]; },50); }; stop.onclick=function(){ start.disabled=false; clearInterval(time); }; </script> </body> </html>
人如代码,规矩灵活;代码如诗,字句精伦。