通过JavaScript实现简单的随机点名器案例

最新推荐文章于 2023-03-14 21:07:42 发布

菜_稽

最新推荐文章于 2023-03-14 21:07:42 发布

阅读量919

点赞数 4

分类专栏： JavaScript 文章标签： JavaScript 案例

本文链接：https://blog.csdn.net/weixin_43687314/article/details/103119456

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>随机抽签</title>
</head>
<body>
	<center>
		<div id="d" style="background: #7A7A7A;width: 250px;"><!-- 设置背景框颜色和长度 -->
			<h1 id = 'name'></h1>		<!-- 用于显示随机的人名 -->
		</div>
		<div>
			<button id = 'start' type="button">开始</button>
		</div>
		<div>
			<button id = 'temp' type="button">暂停</button>
		</div>
	</center>
</body>
</html>
<script type="text/javascript">
	window.onload=function(){
		var names = ['name','name','name','name','name'];		//人名数组
		var clors = ['#EE0000','#CAE1FF','#008B8B','#CDC9C9','#F0F8FF'];//颜色数组
		var name = document.getElementById('name');		//获取id为name的元素
		var d = document.getElementById('d');
		var temp = document.getElementById('temp');
		var startR = -1;		//记录计时器的序号
		var start = document.getElementById('start');
		function Random(){		//产生随机数，并更改h1中的内容与颜色
			var nNum = Math.floor(Math.random()*5);		//这里的5为你当前人名的数量
			var cNum = Math.floor(Math.random()*5);
			name.innerHTML = names[nNum];
			d.style.color = clors[cNum];
		}
		start.onclick = function(){				//单击开始方法
			if(startR == -1)					//不加限制，多次点击开始会有多个计时器启动
				startR = setInterval(Random,25);//设置计时器，每0.025秒执行一次
		}
		temp.onclick = function(){				//单击暂停方法
			clearInterval(startR);
			startR = -1;
		}
	}
</script>

当前代码仅实现了随机点名的功能，没有做任何界面美化。
具体展示
在这里插入图片描述

菜_稽

关注

4
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
通过JavaScript实现简单的随机点名器案例

```javascript<html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" c...
复制链接

扫一扫