js实现在页面中显示数字时钟

最新推荐文章于 2024-01-31 18:24:04 发布

聂小邯

最新推荐文章于 2024-01-31 18:24:04 发布

阅读量1.6k

点赞数 2

分类专栏： js的使用

本文链接：https://blog.csdn.net/weixin_45069992/article/details/94184105

版权

js的使用专栏收录该内容

13 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>數字时钟</title>
	<style type="text/css">
		#inner{
			width: 300px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			border: 1px solid #999;
			float: right;
			background: #FFC0CB;
		}
	</style>
</head>
<body>
	<div id=inner>
		
	</div>

	<script type="text/javascript">
		var o = document.getElementById("inner");
		function getTime(){
			//新的日期对象
			var date = new Date();	
			var year = date.getFullYear();	//获取年份
			var month = date.getMonth() + 1;	//获取月份
			var day = date.getDate();	//获取日期
			var hour = date.getHours();		//获取小时
			var minutes = date.getMinutes();	//获取分钟
			var seconds = date.getSeconds();	//获取秒数
			month = addZero(month);		//为月份调用补零函数并赋值
			day = addZero(day);		//为日期调用补零函数并赋值
			hour = addZero(hour);		//为小时调用补零函数并赋值
			minutes = addZero(minutes);		//为分钟调用补零函数并赋值
			seconds = addZero(seconds);		//为秒调用补零函数并赋值
			//把日期时间放到页面中
			var time = year + "年" + month + "月" + day + "日" + "&nbsp;" + hour + "：" + minutes + "：" + seconds;
			o.innerHTML = time;
		}
		//不足十时补 0 
		function addZero(az) {
			if(az < 10){
				az = "0" + az;
			}
			return az;
		}
		getTime();
		//每隔一秒执行一次
		setInterval(getTime,1000);
	</script>
</body>
</html>

聂小邯

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js实现在页面中显示数字时钟

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>數字时钟</title> <style type="text/css"> #inner{ width: 300px; height: 50px; ...
复制链接

扫一扫