网页时钟带有清除定时器

最新推荐文章于 2021-12-13 19:12:12 发布

oo12308

最新推荐文章于 2021-12-13 19:12:12 发布

阅读量217

点赞数

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

本文链接：https://blog.csdn.net/zhuanyaolin1497/article/details/120291496

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页时钟</title>
		
	</head>
	<body>
		<font>当前系统时间是:</font><span id="spanTip"></span>
		<!-- 事件源 -->
		<input type="button" value="清除定时器" onclick="clearTask()" />
	</body>
	<script>
	
		function genDate(){
			//1)创建当前Date对象:拼接当前系统时间
			var date = new Date() ;
			//2)拼接日期字符串
			var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"&ensp;&ensp;"+
			date.getHours()+":"+date.getMinutes()+":"+date.getSeconds() ;
			//alert(dateStr)
			
			//通过id属性值获取span标签对象
			var spanObject = document.getElementById("spanTip") ;
			
			//设置span标签对象的innerHTML属性: 添加文本内容(可以加入html标签 渲染)
			//innerText属性:只是添加普通文本: 如果添加标签体,不会将标签进行转义
			
			 spanObject.innerHTML = "<h4>"+dateStr +"</h4>";
		}
	
	
		
		 
		 
		 //window对象(可以省略不写)中有网页定时器 
		 //window.setInterval(vCode, iMilliSeconds ): 每经过iMilliSeconds毫秒值重复执行vCode
		 //参数1:任务函数
		 //参数2:毫秒数  
		var taskId = setInterval("genDate()",1000) ;//每经过1000毫秒执行这个任务
		 
		 
		 //window.setTimeout(vCode, iMilliSeconds):经过iMilliSeconds毫秒值后执行一次vCode
		 //参数1:任务函数
		 //参数2:毫秒数  
		 
		 
		 //清除定时器
		 //window.clearInterval(iIntervalID) :参数任务id
		 function clearTask(){
			//alert("触发点击...");
			window.clearInterval(taskId) ;
		 }
		 
		 
		
		
	</script>
</html>

效果图

oo12308

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页时钟带有清除定时器

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>网页时钟</title> </head> <body> <font>当前系统时间是:</font><span id="spanTip"></span>  <input ty.
复制链接

扫一扫