JS小案例：单个按钮绑定时钟开启和暂停以及随机点名

最新推荐文章于 2024-11-05 22:07:06 发布

VaporGas

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量448

点赞数 10

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_52937170/article/details/141724106

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

单个按钮开启暂停时钟案例

单个按钮绑定时钟案例中，核心在于进行value值的判断，每次点击按钮都会进行一次value值判断以及value值更改

HTML源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一个按钮绑定时钟开始和暂停</title>
	</head>
	<body onload="showTime()">
		<div id="d1">
			
		</div>
		<!--  定义隐藏域，目的是为了在点击按钮时切换状态，作为判断开始或暂停的条件 -->
		<input type="hidden" id="hdd1" value="start" />
		
		<input type="button" id="btn" value="按钮" onclick="btn_pres()" />
		
	</body>
	<script>
		function $(obj){
			return document.getElementById(obj);
		}
		
		var flag;
		// 获取当前系统时间
		function showTime(){
			//修改页面为当前系统时间
			$("d1").innerText=currentTime();
			//指定毫秒数之后执行指定函数
			flag =setTimeout("showTime()",1000);
		}
		//暂停
		function ting(){
			clearTimeout(flag);
		}
		//获取当前系统时间
		function currentTime(){
			var today=new Date();
			var hours=today.getHours();
			var mins=today.getMinutes();
			var sec =today.getSeconds();
			return  hours+":"+mins+":"+sec;
			
		}
		//点击事件函数
		function btn_pres(){
			
			if($("hdd1").value=="start"){
				clearTimeout(flag);//暂停时间
				$("hdd1").value="end";
			}else {
				showTime();//开启时间
				$("hdd1").value="start";
			}
		}
	</script>
</html>

随机点名案例

随机点名小案例：点名案例在学会上一个案例后，很好理解

HTML源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>点名普通版</title>
	</head>
	<!-- 页面加载完成时，调用dianming函数 -->
	<body onload="dianming()">
			<!-- 	 实现点名器(抽奖程序)
		    1) var arr=new Array("zhangsan,....")  创建一个数组存放原始数据
		    2)arr[random]    使用随机数生成数组下标
		    3) setInterval或 setTimeout   周期执行点名程序   -->  
			
			<div id="d1" >
			<!-- 在此位置展示数据 -->	
			</div>
			<!-- 点名调用dianming函数 ，与按钮绑定，我们自己定义的js函数-->
			<input type="button" id="kaishi"value="重新点名" onclick="dianming()">
			<!-- 结束调用ting函数 与按钮绑定，我们自己定义的js函数-->
			<input type="button" id="ting" value="结束" onclick="ting()"/>
			
	</body>
	<script>
		//封装一个获取元素对象的函数，方便后续使用
		function $(obj){
			return document.getElementById(obj);
		}
		//创建含有原始数据的数组
		//可以修改数组中的数据
		var arr=["zhangsan","lisi","wangwu","zhaoliu","qianqi"];
		//设置标记变量并提高作用范围
		var flag;
		//点名函数
		function dianming(){
			//随机获取数组中的下标，并转换成整数
			var name=parseInt(Math.random()*(arr.length-1));
			//调用封装好的函数，修改标签中展示的内容
			$("d1").innerText=arr[name];
			//一段时间（设置时间为毫秒值1s=1000ms）后再次执行点名函数，因为setTimeout函数嵌套在dianming函数中
			//其实是一个递归（自己调用自己的过程），会一直持续下去，直到我们点击按钮（绑定ting函数）取消递归
			flag=setTimeout("dianming()",100);
		}
		//可以理解为结束递归的条件
		function ting(){
			clearTimeout(flag);
		}
	</script>
</html>

随机点名案例图片版

图片版点名只是在随机点名的基础上将文本替换成img标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/myJS.js"></script>
	</head>
	<style>
		img{
			width: 100px;
			width: 100px;
		}
	</style>
	<body onload="dianming()">
			<div style="margin: auto; width: 200px;">
			<table>
				<tr style="height: 100px; width: 100px;">
					<div id="d1"  style="width: 100px;height: 100px"></div>
				</tr>
				<tr>
					<input type="button" id="kaishi"value="重新点名" onclick="dianming()">
					<input type="button" id="ting" value="结束" onclick="ting()"/>
				</tr>
			</table>
			</div>
	</body>
	<script>
		var arr=["zhangsan","lisi","wangwu","zhaoliu","qianqi"];
		var arrimg =[0,1,2,3,4,5,6,7,8,9];
		
		function dianming(){
			var name=parseInt(Math.random()*(arrimg.length-1));
			//将图片命名为1.jpg等类似格式，与数组中存储数据要一一对应，注意图片路径，为自己的路径，使用字符串拼接即可
			$("d1").innerHTML="<img src=img/"+name+".jpg>";
			flag=setTimeout("dianming()",100);
		}
		function ting(){
			clearTimeout(flag);
		}
	</script>
</html>

以上是近来学习JS的一些小案例