页面实时更新时间的JS实例代码

一、准备工作

1. 首先，需要在HTML文件头部链接JS代码文件。

<script src="js/time.js"></script>

1. 然后，在页面中需要有div标签用于显示实时更新的时间。

<div id="clock"></div>

二、具体实现

1. 首先，创建一个名为showTime()的函数，通过获取当前时间和字符串拼接的方式，将时间显示到页面上。我们可以使用JavaScript内置的Date()对象来获取当前时间。

function showTime(){
    var date = new Date();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    var time = hour + ":" + minute + ":" + second;
    document.getElementById("clock").innerText = time;
}

1. 接下来，我们需要创建一个定时器，让函数每一秒钟调用一次，以更新显示的时间。

setInterval(showTime,1000);

以上代码就是一个完整的实时更新时间的JS代码示例。

三、示例说明

1. 示例一：自定义显示格式

function showTime(){
    var date = new Date();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    // 将小时数转化为12小时制
    if(hour > 12){
        hour = hour-12;
    }
    // 添加0以保证时间格式的统一
    if(hour < 10){
        hour = "0" + hour;
    }
    if(minute < 10){
        minute = "0" + minute;
    }
    if(second < 10){
        second = "0" + second;
    }
    var time = hour + ":" + minute + ":" + second;
    // 显示的文字内容自定义
    document.getElementById("clock").innerText = "现在的时间是：" + time;
}

1. 示例二：使用SVG图标代替文字显示时间

function showTime(){
    var date = new Date();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    // 将时间转换成字符串
    var time = hour + ":" + minute + ":" + second;
    // 创建SVG图标元素
    var svgIcon = "<svg class ='icon' aria-hidden='true'><use xlink:href='#icon-clock'></use></svg>";
    // 使用innerHTML将SVG图标插入div标签中
    document.getElementById("clock").innerHTML = svgIcon + time;
}

其中，#icon-clock是引用了网上的SVG图标，我们需要将SVG图标文件下载保存在项目文件夹中，并在HTML文件中链接。

<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
    <symbol id="icon-clock" viewBox="0 0 1024 1024">
      <path d="M512 64c141.376 0 256 114.624 256 256s-114.624 256-256 256-256-114.624-256-256S370.624 64 512 64M512 32C264.576 32 64 232.576 64 480s200.576 448 448 448 448-200.576 448-448S759.424 32 512 32L512 32z" fill=""/>
      <path d="M570.368 634.432l0.224-281.376-101.664-9.28-0.224 281.376-111.744 67.328 25.408 41.632 154.272-93.12 154.272 93.12 25.408-41.632L570.368 634.432z" fill=""/>
    </symbol>
</svg>

以上两个示例均可以在一个HTML文件中，将其与使用上文提到的“页面实时更新时间的JS实例代码”的方式结合起来使用。