使用JavaScript制作一个页面的电子时钟

更新日期: 2022-05-27阅读: 897标签: 页面分享

复制链接

新浪微博

QQ 好友

扫一扫分享

题目：

做一个电子时钟，显示当前的年月日，时分秒，要求自动变化。

案例分析：

1.使用一个div盒子来展示时钟的内容；

2.将盒子在JavaScrip里面获取div盒子；

3.我们需要一个定时器setInterval每隔一秒使时钟变化一次；

4.利用时间函数Date()获取系统时间，并分别获取年月日，时分秒；

5.当获取过来的数小于10，利用三元运算符字符串拼接的方式让它显示成 2022年05月01日 00：00：00的样子

6.利用innerhtml将获得结果写进div盒子里面。

注意：

getMonth()返回的月份比当前月份小一个月，因此我们需要在后边加一。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            line-height: 100px;
            margin: 100px auto;
            background-color: black;
            color: #fff;
            text-align: center;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="box">123</div>
    <script>
        // 1.获取元素
        var box = document.querySelector('.box');
        //2.使用定时器每隔一秒更新一次
        setInterval(getTime, 1000);
        function getTime() {
            //3.利用时间函数获取系统时间
            var time = new Date();
            var year = time.getFullYear();//年
            year = year < 10 ? '0' + year : year;
            var mon = time.getMonth() + 1;//月
            mon = mon < 10 ? '0' + mon : mon;
            var date = time.getDate();//日
            date = date < 10 ? '0' + date : date;
            var h = time.getHours();//小时
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();//分钟
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();//秒
            s = s < 10 ? '0' + s : s;
            box.innerHTML = year + '年' + mon + '月' + date + '日' + '' + h + ':' + m + ':' + s;
        }
    </script>
</body>
</html>

链接: https://fly63.com/article/detial/11600

使用JavaScript制作一个页面的电子时钟

题目：

案例分析：

注意：

代码：

js禁止页面回退的方法（使浏览器后退按钮失效）

footer固定在页面底部的实现方法总结

页面重定向的几种方法

html页面实现返回上一页浏览位置

在静态页面中使用 Vue.js

js监听用户进入和离开当前页面

Flutter 之页面切换（基本路由）

解决webapck多页面内存溢出

JS内嵌多个页面,页面之间如何更快捷的查找相关联的页面

Flutter页面跳转传参