zoukankan      html  css  js  c++  java
  • 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 {
                 200px;
                height: 100px;
                line-height: 100px;
                margin: 100px auto;
                background-color: skyblue;
                text-align: center;
            }
            span {
                display: inline-block;
                 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>
  • 相关阅读:
    继承
    redis面试题收集
    spring知识点
    jvm类加载
    jvm回收机制
    HashMap和ConcurrentHashMap
    java基础
    spring-quartz整合
    alibaba-sentinel-1.8变化
    springcloud执行流程理解图
  • 原文地址:https://www.cnblogs.com/bky-/p/13824545.html
Copyright © 2011-2022 走看看