用JavaScript做一个网页时间效果

最新推荐文章于 2022-06-17 10:05:13 发布

# 无伤大雅 #

最新推荐文章于 2022-06-17 10:05:13 发布

阅读量952

点赞数 2

分类专栏：学习与分享文章标签： javascript js css html

本文链接：https://blog.csdn.net/qq_43306439/article/details/104357286

版权

学习与分享专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近闲着无事打算在家学习一下JavaScript，于是就想到用Date对象做一个网页的时间显示，很简单的函数调用，算是学习之余的小练习。

话不多说，直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>几点啦</title>
		<style type="text/css">
			body {
				margin-top: 0; 			  //设置边距
				/* margin-left: 0; */
			}

			#description {                //<p>标签的基本样式
				margin-top: 0;            //边距
				text-align: center;       //文本居中
				font-family: "宋体";      //字体
				font-size: 20px; 		  //字号
				color: #401c63;   		  //颜色
			}
		</style>
		<script type="text/javascript">
			function DateDemo() {		  //获取时间函数
				var dateObj = new Date();
				var year = dateObj.getFullYear();
				var month = dateObj.getMonth() + 1;
				var day = dateObj.getDate();
				var hour = dateObj.getHours();
				var minute = dateObj.getMinutes();
				var second = dateObj.getSeconds();
				if (hour == 0) {
					hour = "00";
				} else if(hour < 10) {
					hour = "0" + hour;
				}
				if (minute == 0) {
					minute = "00";
				} else if(minute < 10) {
					minute = "0" + minute;
				}
				if (second == 0) {
					second = "00";
				} else if(second < 10) {
					second = "0" + second;
				}
				var txt = "Date & Time: " + year + "/" + month + "/" + day + " " + hour + ":" + minute + ":" + second;
				var description = document.getElementById("description"); //获取HTML中id为description的元素
				description.firstChild.nodeValue = txt; //替换获取元素的节点值
			}

			function main() { //函数调用与定时器
				DateDemo();
				var timer = setInterval(function() {
					DateDemo();
				}, 1000);
			}
		</script>
	</head>
	<body onload="main()">

		<p id="description"> </p>

	</body>
</html>

以下为效果图：
在这里插入图片描述
没什么花里胡哨，也做不出来花里胡哨。
值得一提的是：

js中的函数调用有多种方法：
- 1.在标签中插入onload属性调用（本文所用）；
- 2.在某个函数下面直接调用；
- 3.window.onload = 函数名；
document.write()方法
- 任何一个对当前页面进行操作的document.write()方法将打开—个新的输出流，它将清除当前页面内容

我是用的编辑器是Hbuilder(支持国产 ^ _ ^)，虽然功能也很强大但却并不支持语法检测(也可能是我没用明白)，于是为了找到问题所在就直接用输出语句进行调试： document.write() / alert() / console.log()，于是我发现document.write()这个函数会“打断”当前函数的执行。在此提醒一下新人小伙伴们注意一下。

对代码的判断部分做了修改，写了个函数增加复用性，以下是修改部分(只修改了< script >部分)

<script type="text/javascript">
			function numberType(num) {
				if (num == 0) {
					num = "00";
				} else if(num < 10) {
					num = "0" + num;
				}
				return num;
			}
			function DateDemo() {
				var dateObj = new Date();
				var year = dateObj.getFullYear();
				var month = dateObj.getMonth() + 1;
				var day = dateObj.getDate();
				var hour = dateObj.getHours();
				var minute = dateObj.getMinutes();
				var second = dateObj.getSeconds();
				var txt = "Date & Time: " + year + "/" + month + "/" + day + " " + numberType(hour) + ":" + numberType(minute) + ":" + numberType(second);
				var description = document.getElementById("description");
				description.firstChild.nodeValue = txt;
			}

			function main() {
				DateDemo();
				var timer = setInterval(function() {
					DateDemo();
				}, 1000);
			}
		</script>

将三段冗杂的判断封装成一个函数(功能相同)，需要的时候调用就好了。

感谢你的观看，随时分享学习，一起努力进步！

客官，点个赞再走吧

# 无伤大雅 #

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript做一个网页时间效果

最近闲着无事打算在家学习一下JavaScript，于是就想到用Date对象做一个网页的时间显示，很简单的函数调用，算是学习之余的小练习。话不多说，直接上代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>几点啦</title> <...
复制链接

扫一扫