JS-小案例关于时间--实时时间

最新推荐文章于 2023-05-23 23:10:03 发布

忽然呀

最新推荐文章于 2023-05-23 23:10:03 发布

阅读量335

点赞数

分类专栏： JS-小案例关于时间文章标签： JS-小案例关于时间--实时时间

本文链接：https://blog.csdn.net/javasvince/article/details/88647629

版权

JS-小案例关于时间专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JS小案例关于时间–实时时间

界面设置和实现功能

在这里插入图片描述

用到的知识点

JS中日期对象方法

			var  year=myDate.getFullYear();//(例如2019)
			var  month=myDate.getMonth()+1;//(获取当前月份0-11)
			var  date=myDate.getDate();//(获取当前日1-31)
			var  day=myDate.getDay();//(获取当前时间 注意  是数字0-6  0代表星期天)
			var  weekDay=[       //day (0-6) 0指的是星期天
				"星期天","星期一",
				"星期二","星期三",
				"星期四","星期五",
				"星期六"
				];
			var hour=myDate.getHours();//获取小时数0-23
			var minute=myDate.getMinutes(); //获取当前分钟数0-59
			var second=myDate.getSeconds();//获取当前秒数 0-59
		     getTime();//获取当前秒数  (从1970.1.1开始毫秒数)html

定时器
setInterval(function,time);
第一个参数是函数
第二个参数是时间
过多少秒执行一次函数
```
 注意点：1s=1000ms
```

思路

根据以上的这些关于日期对象的方法获取时间

其中有点点思考的是

星期几的获取
将通过getDay()方法获取来的数字（0-6）理解为函数的索引
分钟还有秒钟需要当<10时前面加一个0 例如23:05:08
定义一个函数假如参数小于10那么就在前面加个0
定时器
将获取好的时间封装一个函数
规定1000ms刷新一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取实时时间</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#dv{
				height:50px;
				width:300px;
				margin:100px auto;
				border:1px solid aqua;
				text-align: center;
			}
			span{
				display:inline-block;
				line-height:50px;
				height:50px;
			}
		</style>
	</head>
	<body>
		<div id="dv">
			<span></span>
		</div>
		<script type="text/javascript">
			function onchange(num){
				if(num<10)
				 return num='0'+num;  //+是用来连接  不要理解成字符型数据和数字相加
				else 
				 return num;
			}
			
			setInterval(function(){
				var  myDate=new Date();
				var  year=myDate.getFullYear();//(例如2019)
				var  month=myDate.getMonth()+1;//(获取当前月份0-11)
				var  date=myDate.getDate();//(获取当前日1-31)
				var  day=myDate.getDay();//(获取当前时间 注意  是数字0-6  0代表星期天)
				var  weekDay=[       //day (0-6) 0指的是星期天
					"星期天","星期一",
					"星期二","星期三",
					"星期四","星期五",
					"星期六"
					];
				var hour=myDate.getHours();//获取小时数0-23
				var l=myDate.getMinutes(); //获取当前分钟数0-59
				var k=myDate.getSeconds();//获取当前秒数 0-59
				//补充一个  getTime();//获取当前秒数  (从1970.1.1开始毫秒数)
				
				//输入到页面上
				var dv=document.getElementById("dv");
				var span=document.getElementsByTagName("span");
				span[0].innerHTML=year+"年"+month+"月"+date+"日"+"    " +weekDay[day]+hour+":"+onchange(l)+":"+onchange(k);
				console.log(onchange(k));
			},1000);
		</script>
	</body>
</html>