HTML: Use JavaScript (js) scripts to display real-time time on web pages

Hello, everyone, my name is wangzirui32, today we will learn how to display the current time on the web page.
Not much to say, first create a js script file, named timeShow.js, the code is as follows (see the comments if you don't understand):

// 定义time函数
function time(){
    
    
    // 创建一个日期对象
    date = new Date();

    // 获取当前年 需要加上1900
    var year = date.getYear() + 1900;
    // 当前月 需要加上1
    var month = date.getMonth() + 1;
    // 当前日
    var day = date.getDate();

    // 当前星期
    // 说明：getDay返回一个数字，这个数字就是在下方列表的其中一个索引
    var weekdayList = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    var weekday = weekdayList[date.getDay()];
    // 当前时
    var hours = date.getHours();
    // 当前分
    var minutes = date.getMinutes();
    // 当前秒
    var seconds = date.getSeconds();
    
    // 由于字符串太长 分为两段来写，效果是一样的
    var write_content = "现在的时间为：" + year + "年" + month + "月" + day + "日" + weekday;
    // 说明：" "是空格，用来隔开星期和小时
    write_content = write_content +  " " + hours + "时" + minutes + "分" + seconds + "秒";
    
    // 将id为timeShow的标签 文本内容设置为write_content字符串的内容
    document.getElementById("timeShow").innerHTML = write_content;
}

// 设置运行间隔 每1000毫秒，也就是1秒运行一次time函数
setInterval(time,1000);

Create an HTML file in the same directory and write:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>显示HTML时间</title>
  <script src="timeShow.js"></script>
</head>
<body>
  <div id="timeShow"></div>
</body>
</html>

script loads the script file, and then creates a div tag with an id of timeShow.
Finally, you can also rewrite the code in the js script file to obtain the time in different formats, such as only obtaining the month and day, only obtaining the hour, minute, and second, etc. You can try these by yourself, and I won't repeat them here.
Open the browser, you can see the real-time changing time!
If you don’t understand HTML, I suggest you go to the blogger’s article HTML page tag code basic teaching to see, if you are interested, you can bookmark it and like it!

HTML: Use JavaScript (js) scripts to display real-time time on web pages

Guess you like