js点名册,请大神指教

 

初学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>