javascript时钟代码

在已有的HTML代码之上完成Javascript代码的编写，在网页上实时显示当前时间时、分、秒。

原始代码

下面要做的就是往三个sapn标签中覆盖内容时、分、秒。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
//时间显示界面
<div style="font-size: 100px;width: 400px;background-color: #0d72da;border: 3px solid blue;border-radius: 5px;margin: auto;">
    <span id="hour">12</span>:<span id="minute">12</span>:<span id="second">12</span>
</div>
<script>
    //选择时、分、秒对应的三个span对象
    let x = document.getElementById("hour");
    let y = document.getElementById("minute");
    let z = document.getElementById("second");
</script>
</body>
</html>

实现一

获取当前时间：时、分、秒

    //实现：获取当前时间：时、分、秒
    let T = new Date();//创建Date对象
    let hour = T.getHours();//返回时针时间
    let minute = T.getMinutes();//返回分针时间
    let second = T.getSeconds();//返回秒针时间
    //获得时间分别赋值给时分秒对应的三个span对象
    x.innerHTML = hour;
    y.innerHTML = minute;
    z.innerHTML = second;

知识点

Date对象

Date是Javascript内置对象,getHours()、getMinutes()、getSeconds()都是对象的方法

实现二

不足两位数的时间补0，比如16:1:5显示16:01:05

//利用if语句判断
    if(hour < 10){
        x.innerHTML = "0" + hour;//数字hour与字符串类型"0"相加，返回一个字符串
    }
    if(hour >= 10){
        x.innerHTML = hour;
    }
    if(minute < 10){
        y.innerHTML = "0"+ minute;
    }
    if(minute >= 10){
        y.innerHTML = minute;
    }
    if(second < 10){
        z.innerHTML = "0"+ second;
    }
    if(second >= 10){
        z.innerHTML = second;
    }

知识点

数据类型转换

上面用到的Date对象三个方法返回的时间数据都是number类型，如果时间不足10，直接赋值给span元素的innerHTML属性，只能显示一位数，赋值之前要把时间数值转化为字符串然后在字符串前面加0字符

实现三

动态显示时间，实时刷新

//实现：动态显示时间
    function time() {
        let T = new Date();
        let hour = T.getHours();
        let minute = T.getMinutes();
        let second = T.getSeconds();

        if(hour < 10){
            x.innerHTML = "0" + hour;
        }
        if(hour >= 10){
            x.innerHTML = hour;
        }
        if(minute < 10){
            y.innerHTML = "0"+ minute;
        }
        if(minute >= 10){
            y.innerHTML = minute;
        }
        if(second < 10){
            z.innerHTML = "0"+ second;
        }
        if(second >= 10){
            z.innerHTML = second;
        }
        requestAnimationFrame(time);//requestAnimationFrame循环调用函数。
    }
    time();

知识点：requestAnimationFrame

requestAnimationFrame的作用是不停的调用函数time(),Javascript有全局对象，全局对象有大量方法可以使用，浏览器生态环境同样有一个顶级对象window， requestAnimationFrame()就是window对象的方法。完整使用方式window.requestAnimationFrame(函数名)，一般window可以省略。要保证秒针时间实时显示，requestAnimationFrame调用函数的频率要足够高，影响requestAnimationFrame调用函数频率因素较多，不过一般小的程序，每秒调用60次没有问题。