html5 做了一个简单的点名册,希望可以帮助有需要的人.
CSS部分
<style type="text/css"> .box { width: 300px; height: 400px; border: 2px solid black; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 auto; } div{ -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -ms-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } .div { width: 300px; height: 100px; font-size: 60px; line-height: 120px; } button { width: 100px; height: 50px; background-color: black; margin: 10px; color: white; font-size: 30px; line-height: 50px; } .div1 { transform: scale(1.5, 1.5); } </style>
HTML部分
<div class="box"> <div id="div" class="div"><点名册></div> <button id="btn1">开始</button> <button id="btn2">结束</button> </div>js部分
<script type="text/javascript"> var div = document.getElementById("div") //获取div var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); var timer = null; var nameArr = ["张三", "李四", "王五", "李文虎", "刘一", "峰峰", "鲸鱼", "大海豚", "大老虎", "小松鼠", "花蝴蝶"]; btn1.onclick = function() { clearInterval(timer); timer = setInterval(function() { for(var i = 0; i < nameArr.length; i++) { var a = Math.floor(Math.random() * (10 - 0 +1) + 0); div.innerHTML = nameArr[a]; } //设置字体颜色随机 var r = Math.floor(Math.random() * (255 + 1)); var g = Math.floor(Math.random() * (255 + 1)); var b = Math.floor(Math.random() * (255 + 1)); div.style.color = "rgb(" + r + "," + g + "," + b + ")"; }, 100); btn2.onclick = function() { clearInterval(timer); } } </script>
