• 妈的,写之前不说,写完了了你说不行.中途我还问你你说对.你真是中国第一Monkey
  • 沃妮马,过的真快!转眼又上班了.等待十月一.
  • 还有1天就是端午节了.过的真快, 在这个公司工作半年啦..
  • 咦~哪个弟弟CC我呢?
  • 简单,简单.我提个思路.
  • 不算今天还有2天就放假了.
  • 一切随缘,随波逐流.
  • 我的天啊,手欠把写了两天的项目删除了,回收站都没有!真是一干二净!心态爆炸!
  • 如果您需要随机数,请使用 random_int(). 如果需要随机字节字符串,请使用 random_bytes(). 所以不要使用 mt_rand(), rand(), 或 uniqid() .
  • 五一过去的真快

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

JavaScript KIENG 1年前 (2018-09-13) 57880次浏览 已收录 0个吐槽 扫描二维码

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


回顾一下定时器代码:

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

 


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

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


哈哈哈,有点东西吧~
我们上代码吧~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>
实例演示
KIENG , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA 4.0协议进行授权
转载请注明原文链接:JavaScript – 有趣的随机点名器实例
本文章链接:https://blog.kieng.cn/167.html
喜欢 (1)
KIENG
关于作者:
一个热衷网络的Man
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 快速获取昵称
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址