js实时时间效果（简单版）

最新推荐文章于 2020-09-30 15:57:22 发布

转载最新推荐文章于 2020-09-30 15:57:22 发布 · 1.5k 阅读

文章标签：

#Date对象 #定时器 #setTimeout

JavaScript 专栏收录该内容

0 篇文章

订阅专栏

本文介绍用JS实现实时数字时钟效果。先定义实时时间，提取年、月、日等信息，因月份返回值是0 - 11，实际月份需加1。用setTimeout()或setInterval()实现定时刷新，将静止时间定义成函数，每秒执行一次。还解决了分钟、秒钟小于10时的显示问题。

转自：https://blog.youkuaiyun.com/TonyTonyFun/article/details/51842968

用JS实现XXXX年XX月XX日星期X XX时XX分XX秒效果

效果：这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>time</title>
    <script type='text/javascript'>
       window.onload = function(){
    refreshTime();//当页面加载完时运行时间函数
}
function checkTime(i){
    if(i < 10) {
        i ='0' + i//定义当分钟，秒钟小于10时，使一位数显示为两位数
    }
    return i//大于10时，正常显示
}
function refreshTime(){//定义时间函数
    var date = new Date();//获取当前默认格式的当前时间
    var myYear = date.getFullYear();//在默认格式时间中提取四位数的年份
    var myMonth = date.getMonth()+1;//在默认格式时间中提取月份，（月份返回值是0-11，实际月份要返回值+1）
    var myDate = date.getDate();//在默认格式实践中提取日期
    var myDay = date.getDay();//在默认格式中提取星期（返回值0-6对应星期天-星期六）
    var week = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六',]//创建数组对应myDay
    var myHours = date.getHours();//在默认格式实践中提取日期小时
    var myMinutes = date.getMinutes();//在默认格式实践中提取日期分钟
    var mySeconds = date.getSeconds();//在默认格式实践中提取日期分钟
    var pushM = checkTime(myMinutes);
    var pushS = checkTime(mySeconds);//用checkTime函数使时间为0~9时替换为00~09
    //alert(myDay);//test
    document.getElementById('time').innerHTML = myYear + '年' + myMonth + '月' + myDate + '日&nbsp&nbsp' + week[myDay] + '&nbsp&nbsp' + myHours + ':' + pushM + ':' + pushS + '<br/>'//使id为'time'的文本值替换为该格式的时间
    setTimeout(refreshTime,1000);//每1000毫秒运行一次refreshTime函数，即每秒刷新一次时间
}
       }     
    </script>
</head>
<body>
    <span id='time'>clock</span>
</body>
</html>

主要思路是先定义一个实时时间：
var date = new Date();
再从实时时间中提取需要用到的年、月、日、时、分、秒、星期：

        var myYear = date.getFullYear();
        var myMonth = date.getMonth() + 1;//在默认格式时间中提取月份，（月份返回值是0-11，实际月份要返回值+1）
        var myDate = date.getDate();
        var myDay = date.getDay();
        var week = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六']
        var myHours = date.getHours();
        var myMinutes = date.getMinutes();
        var mySeconds = date.getSeconds();

其中星期几要用week[myDay]显示。
月份返回值是0-11，所以实际月份要返回值+1。

但此时页面显示的时间是静止的，这里要用setTimeout()或者setInterval()
实现定时刷新。
将整个静止时间的js定义成一个函数refreshTime()方法；

setTimeout(refreshTime,1000)

每隔1s执行一次refreshTime()方法，即数字时钟的效果

此时还有个小问题
每当分钟、秒钟小于10时会显示0~9，如22:9:5的效果
如何变成22:09:05的效果呢
可以定义一个方法在分钟秒钟的值是0~9时变成00~09，

function checkTime(i){
        if(i < 10) {
            i = '0' + i;//定义当分钟，秒钟小于10时，使一位数显示为两位数
        }
        return i;//大于10时，正常显示
       }

再将分钟、秒钟重新定义

var pushM=checkTime(myMinutes);
var pushS=checkTime(mySeconds);

这样就能显示正确的实时时间啦!~