js显示实时时间

文章目录

  • 一、效果
  • 二、思路
  • 三、最后

一、效果

JS实现XXXXXXXX日 星期X XXXXXX秒 效果

效果 :

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>timetitle>
    <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+'
'
//使id为'time'的文本值替换为该格式的时间 setTimeout(refreshTime,1000)//每1000毫秒运行一次refreshTime函数,即每秒刷新一次时间 }
script> head> <body> <span id='time'>clockspan> 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);

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

三、最后

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

你可能感兴趣的:(JS,javascript,前端,实时时间)