JS小福利 —— 实时更新的页面小时钟
今天小女刚学会了一个好玩的小玩意儿~~特来跟大家分享一下~~~
这是一个有趣的时钟显示程序，可以进行实时的年月日、星期、时分秒更新，有了这组小代码，以后可以作为日期插件应用在大型的JS代码中哦~~
积少成多，时间是一点点省下来的，效率也是慢慢提高的。
好了，废话不多说了，马上进入正题(*^▽^*)
首先，为了使页面在固定位置定时刷新，我需要在body中写入一个div，代码结构如下:
<body>
<div id="div"> </div>
<script type="text/javascript">
// JS代码
</script>
</body>
这个小程序中，重点使用JS内置对象中的Date日期类对象编写代码，以下是一些概念性的知识，稍微提一下：
1、new Date() ：返回当前最新时间； new Date("2017,12,31,12:34:12"); 返回指定时间。
2、常用方法：
① .getFullYear()：获取年份。
② .getMonth()：获取月份。
③ .getDate(); 获取一个月中的第几天
③ .getDay(); 获取一个周中的第几天 0-表示周天。时分秒以此类推...
接下来，我们首先需要声明一个函数，函数名为getTime()，然后在函数体中进行年月日、时分秒的声明与调用，代码如下：
function getTime(){ var dates = new Date(); // dates返回当前最新时间。 var year = dates.getFullYear(); //获取年份 var month = dates.getMonth(); //获取月份 var da = dates.getDate(); //获取日期 var day = dates.getDay(); //获取星期几 var hours = dates.getHours(); //获取小时 var min = dates.getMinutes(); //获取分钟 var sec = dates.getSeconds(); //获取秒
//week采用数组的形式，在div.innerText赋值过程中，提高了代码的简洁性。 var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
// 由于时分秒存在一位数的情况，此时前面需要添“0” hours = hours <10 ? "0"+ dates.getHours() : dates.getHours() ; min = min < 10 ? "0" + dates.getMinutes() : dates.getMinutes(); sec = sec <10 ? "0"+ dates.getSeconds() : dates.getSeconds() ; var div = document.getElementById("div"); div.innerText = year+"年"+(month+1)+"月"+da+"日"+" "+weeks[day]+" "+hours+"："+min+"："+sec; setTimeout(arguments.callee,1000); // 每1s回调一次函数 法一 }
通过以上代码，函数体部分已经敲完了，只剩下调用getTime()函数。
但是由于每次刷新页面都会出现一次小卡顿，时间更新延迟，导致用户的体验效果不佳。
作为改进，我在函数体外部紧接着写了一下代码：
window.onload = function(){
getTime();
} //这是一个窗口加载完毕函数。作用：在每次刷新窗口，窗口加载完成后主动调用一次getTime函数，基本消除了刷新时的小卡顿。
到这里，我们这个实时页面刷新的小程序的效果就可以完全实现了。
上述延时方法采用的是递归调用，由于时间函数本身就是一个死循环，每执行完一次，间隔1s后就回调一次函数，可以实现时间的每秒更新。
还有第二种方法，也是大家普遍第一时间想到的方法——定时器，代码如下：
setInterval(getTime,1000); // 法二 采用定时器 这行代码是需要调用getTime()函数的，因而写在了函数体外。
完整代码如下，留给大家作参考：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Time</title>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
function getTime(){
var dates = new Date(); // dates返回当前最新时间。
var year = dates.getFullYear(); //获取年份
var month = dates.getMonth(); //获取月份
var da = dates.getDate(); //获取日期
var day = dates.getDay(); //获取星期几
var hours = dates.getHours(); //获取小时
var min = dates.getMinutes(); //获取分钟
var sec = dates.getSeconds(); //获取秒
var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
hours = hours <10 ? "0"+ dates.getHours() : dates.getHours() ;
min = min < 10 ? "0" + dates.getMinutes() : dates.getMinutes();
sec = sec <10 ? "0"+ dates.getSeconds() : dates.getSeconds() ;
var div = document.getElementById("div");
div.innerText = year+"年"+(month+1)+"月"+da+"日"+" "+weeks[day]+" "+hours+"："+min+"："+sec;
// setTimeout(arguments.callee,1000); // 每1s回调函数 法一
}
setInterval(getTime,1000); // 法二 定时器
window.onload = function(){
getTime();
}
</script>
</body>
</html>
如果觉得好玩，可以动手敲敲试试看，自己敲出来的感觉就是不一样！
另附一丢丢CSS代码（纯属娱乐）：
<style type="text/css"> #div1{ width: 800px; height: 100px; text-align: center; line-height: 50px; font-size: 28px; font-family: "微软雅黑",sans-serif; position: absolute; /*时钟div在页面中水平垂直居中*/ top: 50%; margin-top: -50px; left: 50%; margin-left: -400px; } </style>
由于没有细致的去写CSS代码，页面显得很简陋，以后有机会我会对页面进行美化的，到时候找机会分享给大家~~
小女很用心写的，如果觉得有兴趣，欢迎收藏呦~~蟹蟹~~~
