JS实现实时时间显示效果

最新推荐文章于 2022-06-14 21:53:57 发布

TonyTonyFun

最新推荐文章于 2022-06-14 21:53:57 发布

阅读量2k

点赞数

分类专栏： javaScript 文章标签： javascript html 前端时钟

本文链接：https://blog.csdn.net/TonyTonyFun/article/details/51842968

版权

javaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用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);

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

TonyTonyFun

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JS实现实时时间显示效果

用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(){
复制链接

扫一扫