js显示实时时间

2023-12-23 06:07:23

文章目录

一、效果

用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+'日  '+week[myDay]+'  '+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);

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

三、最后

本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。顺手来个三连击，点赞👍收藏💖关注?，一起加油?

文章来源:https://blog.csdn.net/u012804440/article/details/135162986
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。