Js电子时钟

简单版电子时钟，需要以下几个步骤

1. 封装一个函数 返回当前的时分秒

2. 使用定时器使当前以获取到的系统时间走动，每间隔一面调用

3. 把获取到的时间放到span盒子里，添加样式

效果展示

 

 实现代码

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子时钟</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            height: 100px;
            line-height: 100px;
            margin: 100px auto;
            background-color: skyblue;
            text-align: center;
        }
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            color: #ffffff;
            font-size: 20px;
            background-color: cornflowerblue;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>
    <script>
        let hour = document.querySelector('.hour');
        let minute = document.querySelector('.minute');
        let second = document.querySelector('.second');
      // 1. 封装一个函数 返回当前的时分秒
      getTimes();
      function getTimes() {
        let time = new Date();
        let h = time.getHours();
        h = h < 10 ? "0" + h : h;
        // 将获取到的时间h添加到span盒子里
        hour.innerHTML = h;
        let m = time.getMinutes();
        m = m < 10 ? "0" + m : m;
　　　　 // 将获取到的时间m添加到span盒子里
        minute.innerHTML = m;
 　　　　// 将获取到的时间s添加到span盒子里
        let s = time.getSeconds();
        s = s < 10 ? "0" + s : s;
        second.innerHTML = s;
      }
　　　　// 2. 使用定时器使当前以获取到的系统时间走动，每间隔一面调用
      setInterval(getTimes,1000);
      </script>
</body>
</html>

 

posted @ 2020-10-16 09:25  행운의소녀  阅读(187)  评论(0)  编辑  收藏  举报