HTML页面中显示时间

最新推荐文章于 2024-03-25 22:03:05 发布

baijing-hu

最新推荐文章于 2024-03-25 22:03:05 发布

阅读量6.6k

点赞数 1

分类专栏： JavaScript HTML 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43285445/article/details/110660292

版权

HTML 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

在HTML页面中显示当前时间

1.源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			span{
				display: inline-block;
				/*border: 1px solid black;*/
				/*background-color: yellow;*/
				font-family: 华文行楷;
			}
			span:hover{
				background-color: pink;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<span id="time"></span>
		
		<script>
			var show= function(){
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth()+1;
				month= month<10?"0"+month:month;
				var day = date.getDate();//获取日期
				day= day<10?"0"+day:day;
				var hour = date.getHours();
				hour= hour<10?"0"+hour:hour;
				var minute = date.getMinutes();
				minute= minute<10?"0"+minute:minute;
				var week = date.getDay();//获取星期
				var second=date.getSeconds();
				second= second<10?"0"+second:second;
				week = "日一二三四五六".charAt(week);
				week="星期"+week;
				result=year+"-"+month+"-"+day+" "+week+" "+hour+":"+minute+":"+second;
				document.getElementById("time").innerHTML=result;
		 }
			show();
			setInterval("show()",1000);
		</script>
	</body>
</html>

2.介绍

JS内置对象Date的使用

js中有内置的对象，Date就是其中一个。

getFullYear():获取年份 getMonth()获取月份 getDate():获取一个月中的某一天 getDay():获取一周中的某一天等等。

注意：

因为转化日期的时候，getDay（）返回的是int类型。不符合常见的日期显示方式，所以需要将其转换为字符串类型的进行显示。

代码如下

switch (week){
					case 1:
						week="星期一";
						break;
					case 1:
						week="星期一";
						break;
					case 2:
						week="星期二";
						break;
						
				    case 3:
						week="星期三";
						break;
					case 4:
						week="星期四";
						break;
					case 5:
						week="星期五";
						break;
					case 6:
						week="星期六";
						break;
					case 0:
						week="星期日";
						break;
					default:
						break;
				}

但是如果在HTML页面中写入如上代码，回导致整个代码十分冗余。在这里可以使用内置类String的方法charAt（）根据索引返回字符串的某个位置的字符

简化后的代码如下

week = "日一二三四五六".charAt(week);
week="星期"+week;

由于JS是弱类型语言，所以可以直接将int类型的的数据转换为字符串类型。

baijing-hu

关注

1
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
HTML页面中显示时间

在HTML页面中显示当前时间1.代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> span{ display: inline-block; /*border: 1px solid black;*/ /*background-color:
复制链接

扫一扫