[JavaScript知识库]原生JS实现行走的时间效果

本文主要介绍使用原生 JavaScript 实现页面实时行走的时间效果，效果图如下：

?由以上效果图可以看出时间是动态的，是每秒钟进行刷新显示的。那么话不多说，下面直接上源码：

时间：<span id="txt"></span>

    <script type="text/javascript">
        // 页面刷新调用函数启动/刷新时间
        showLeftTime()
        function showLeftTime() {
            var now = new Date()
            var year = now.getFullYear()   // 年
            var month = checkTime(now.getMonth() + 1)  // 月 记得要 +1
            var dates = checkTime(now.getDate())   // 日

            var h = checkTime(now.getHours())      // 时
            var m = checkTime(now.getMinutes())    // 分
            var s = checkTime(now.getSeconds())    // 秒

            var showTime = year + "年" + month + "月" + dates + "日 " + h + ":" + m + ":" + s
            document.querySelector('#txt').innerHTML = showTime
            //一秒刷新一次显示时间
            var nowTime = setTimeout(showLeftTime, 1000)
        }
        // 补零函数：不足10的情况，前面加0
        function checkTime(i) {
            if (i < 10) { i = "0" + i }
            return i
        }
    </script>

好的，那么以上就是使用原生 JavaScript 实现页面实时行走的时间效果小 demo 的所有内容了。如有需要直接复制以上代码放到自己的页面中稍作修改使用即可。谢谢您的访问，再见！

好好学习、天天向上！? ? ? ? ：)