最近闲着无事打算在家学习一下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>
将三段冗杂的判断封装成一个函数(功能相同),需要的时候调用就好了。
感谢你的观看,随时分享学习,一起努力进步!
客官,点个赞再走吧