JavaScript实现动态时间显示功能

最新推荐文章于 2024-05-17 14:01:49 发布

a小铭同学

最新推荐文章于 2024-05-17 14:01:49 发布

阅读量1.2w

点赞数 11

分类专栏： JavaScript学习文章标签： javascript

本文链接：https://blog.csdn.net/a320976399/article/details/121037752

版权

JavaScript学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、基本思路

创建showTime()函数，利用JavaScript中的Date对象的属性及方法获取时间，利用Window对象的 setInterval() 方法按照指定的周期（以毫秒计）来调用函数或计算表达式。最后利用document对象实现在页面上显示。

二、代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>显示时间</title>
</head>
<body onload="showTime()">
<script>
    function showTime() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;  //因为month属性从0开始所以加1
        var day = date.getDate();   // 日
        var week = date.getDay();  // 星期几，是个数字
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        second = second < 10 ? "0" + second : second;
        var current = year + "-" + month + "-" + day + " " + "星期" + week + " " + hour + ":" + minute + ":" + second;
        document.getElementById("time").innerHTML = current;
    }

    setInterval("showTime()", 1000);//每隔1000毫秒（即1秒）显示一次当前时间
</script>
<span id="time"></span>
</body>
</html>

结果

在这里插入图片描述

三、优化

调整星期的显示格式，用汉字替换数字
对于月、日、时、分、秒，数字小于10时，用0放前面补充为2位数字

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>显示时间</title>
</head>
<body onload="showTime()">
<script>
    function showTime() {
        var date = new Date();

        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        month = month < 10 ? "0" + month : month;
        var day = date.getDate();
        day = day < 10 ? "0" + day : day;
        var week = "日一二三四五六".charAt(date.getDay()); // 使用charAt函数提取相应汉字
        var hour = date.getHours();
        hour = hour < 10 ? "0" + hour : hour; // 用三目运算符调整数字显示格式
        var minute = date.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        var second = date.getSeconds();
        second = second < 10 ? "0" + second : second;

        var current = year + "-" + month + "-" + day + " " + "星期" + week + " " + hour + ":" + minute + ":" + second;

        document.getElementById("time").innerHTML = current;
    }

    setInterval("showTime()", 1000);
</script>
<span id="time"></span>
</body>
</html>

结果

在这里插入图片描述

a小铭同学

关注

11
点赞
踩
68

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现动态时间显示功能

一、基本思路创建showTime()函数，利用JavaScript中的Date对象的属性及方法获取时间，利用Window对象的 setInterval() 方法按照指定的周期（以毫秒计）来调用函数或计算表达式。最后利用document对象实现在页面上显示。二、代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>显示时间</title><
复制链接

扫一扫