轻松看懂js点名器

css代码

<style type="text/css">
		.showName {
			width: 400px;
			height: 200px;
			border:2px solid #ccc;
			margin:100px auto 0px;
			text-align: center;
			line-height: 200px;
			font-size: 32px;
		}

		#btn {
			display: block;
			margin: 20px auto;
			font-size: 32px;
		}
	</style>

<div class="showName">苗苗1班</div>
<button id="btn">开始</button>

js代码

<script type="text/javascript">

	var getRandName = (function(){
			               // 所有人名--字符串形式
							var str_names = '张三，李四，王五，赵六，田七，景八，小米，小明，小红'
							// 所有人名--数组形式
							var arr_names = str_names.split(',')
							// m~n的随机数
							function rand(m, n){
								return m + Math.round( Math.random()*(n-m) )
							}

							return function(){
										// 随出数一个下标
										var index = rand(0, arr_names.length-1)
										return arr_names[ index ] 
									}
						}())

	var showName = document.querySelector('.showName')
	

	// 定时器对象
	var timeObj = (function(){
						var timeId
						function start(){
							timeId = setInterval(()=>{
								showName.innerHTML = getRandName()
							},100)
						}
						function stop(){

							clearInterval(timeId)
						}
						return {start:start, stop:stop}
					}())
	
	// 开始按钮
	var btn = document.querySelector('#btn')
	var flag = false
	btn.onclick = function(){
		flag = !flag

		if (flag) {
			timeObj.start()
			this.innerHTML = '暂停'
		} else {
			timeObj.stop()
			this.innerHTML = '开始'
		}

	}
</script>