JavaScript - 有趣的随机点名器实例

利用我们上回学到的定时器,让我们实际操作一下.简单的写出一个随机点名器吧~(写法千万种,就看思想怂不怂.)

回顾一下定时器代码:

//多次计时器
setInterval(function(){
//函数体
},时间)
//单次计时器
setTimeout(function(){
//函数体
},时间)

好了让我们实际操作一手吧!首先看看成品图~(我的审美一向很低)

哈哈哈,有点东西吧~
我们上代码吧~CSS 部分就不写了

<script>

	var member = new Array('小明','小青','kieng','帅逼','666','牛逼','损人青'); //创建数据数组
	var color = new Array('red','green','pink','blue','#f5f','#000','#D55');
	var m = document.getElementById('randname'); //准备点名那个对象
	var kai = document.getElementById('go'); //按钮对象
	var suiji = document.getElementById('suiji');//选择模式 随机 或者是倒计时
	var daojishi = document.getElementById('daojishi');//倒计时模式
	function ok(){
		if (suiji.checked==true) { //判断随机模式

		if (kai.innerHTML == '开始') { //判断是否点击了开始
		 timmer = setInterval(function(){
			shu = Math.floor(Math.random()*(parseInt(member.length)));  //随机数最大值,转成整数型
			colorshu = Math.floor(Math.random()*(parseInt(color.length)));  //颜色数组个数
			m.innerHTML=member[shu];//给予名字
			m.style.color=color[colorshu];//给予颜色
			
		},50)
		 kai.innerHTML = '停止';
		}else{
			clearInterval(timmer);
			kai.innerHTML = '开始';
		}

		}else{//如果他选择了倒计时模式
			if (kai.innerHTML == '开始') { //判断是否点击了开始
			 timmer = setInterval(function(){
				shu = Math.floor(Math.random()*(parseInt(member.length)));  //随机数最大值,转成整数型
				colorshu = Math.floor(Math.random()*(parseInt(color.length)));  //颜色数组个数
				m.innerHTML=member[shu];
				m.style.color=color[colorshu];
			},50)
			 
			 num = 5;//默认 5 秒
			 kai.disabled=true;//不可点击
			 kai.innerHTML = '开始(倒计时:'+num+'秒)'; //直接先显示要不然有 1 秒的空档期
			 timmer1 = setInterval(function(){
			 	num--;//自减
			 	kai.innerHTML = '开始(倒计时:'+num+'秒)';//显示倒计时剩余秒数
			 	
			 	if (num<=0) {//如果 num 变量的数值小于 0 之后...
			 		kai.disabled=false;//按钮恢复
			 		clearInterval(timmer1);//销毁定时器
			 		clearInterval(timmer);//销毁定时器
			 		kai.innerHTML = '开始'//按钮 value 回去

			 	}
			 },1000)
			}
		}
	}

	window.onkeydown = function(){ //点击空格开始
			if (event.keyCode==32) {
				ok();
			}
		}
</script>
//上面的炫彩字
<script>
	function changeColor(){
	var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"; //待处理的颜色数据
	color=color.split("|"); //分割
	document.getElementById("xuanze").style.color=color[parseInt(Math.random() * color.length)];
	}//id 为 xuanze 的标签的 style 的字体颜色为分割之后的随机颜色
	setInterval(changeColor,100);//每 100 毫秒执行一次函数
</script>

~谢谢打赏~

赏