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

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>

Js电子时钟的更多相关文章

  1. js傻瓜式制作电子时钟

    js傻瓜式制作电子时间 使用到的知识点 setInterval函数 构建函数new Date if判断 demo: //css样式请自行设置 <span id="timer" ...

  2. JS实现电子时钟

          目前有个小项目,在首页头部导航栏里需要一个电子时钟的效果,于是我就采用如下代码实现了一个电子时钟的效果.不过不完美,第一种方式容易导致网页莫名其妙的异常,后来觉得可能是做的操作太多了,然后 ...

  3. dom事件操作例题，电子时钟，验证码，随机事件

    dom事件操作 当事件发生时,可以执行js 例子: 当用户点击时,会改变<h1>的内容: <h1 onClick="this.innerHTML='文本更换'"& ...

  4. JavaScript电子时钟+倒计时

    JavaScript时间类      获取时分秒:          getHours()          getMinutes();          getSeconds();       获取 ...

  5. js 动态时钟

    js 动态时钟 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  6. 桌面小部件----LED电子时钟实现

    桌面控件是通过 Broadcast 的形式来进行控制的,因此每个桌面控件都对应于一个BroadcastReceiver.为了简化桌面控件的开发,Android 系统提供了一个 AppWidgetPro ...

  7. Qt - 与众不同的电子时钟

     Qt的电子时钟是个老掉牙的demo了,但是利用lcdNumber显示的样子非常老土(下图第一个显示效果),一看就知道是从qt帮助文档里摘出来的example,毫无新意. 美化一下系统时钟,抛开固有控 ...

  8. [TPYBoard-Micropython之会python就能做硬件 3] 制作电子时钟

    转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 一.本次实验所需器材 1.TPYboard V102板  一块 2.DS3231 ...

  9. JS实现时钟特效

    <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...

随机推荐

  1. java 多线程-1

    一.程序.进程.线程简介 程序(program)是为完成特定任务.用某种语言编写的一组指令的集合.即指一段静态的代码,静态对象 进程(process)是程序的一次执行过程,或是正在运行的一个程序.是一 ...

  2. HTML5总结整理

    (仅供大家学习分享交流) 一.简介 1.前端开发最核心技术 我们知道,用所谓的网页三剑客已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最 主要由3部分组成:结构.表现和行为.网页现在新的标准 ...

  3. python基础二（list，tuple元祖、dic字典，字符串）

    一.列表list 1.list定义 列表即数组 ,list或array..列表中的每个元素都有自己的编号,从0开始,编号也可叫做下标,角标,索引.最后一个元素的下标也可用-1表示.: list定义时, ...

  4. Codeforces Round #670 (Div. 2) 深夜掉分（A - C题补题）

    1406A. Subset Mex https://codeforces.com/contest/1406/problem/A Example input 4 6 0 2 1 5 0 1 3 0 1 ...

  5. JAVA热部署，通过agent进行代码增量热替换！！！

    在前说明:好久没有更新博客了,这一年在公司做了好多事情,包括代码分析和热部署替换等黑科技,一直没有时间来进行落地写出一些一文章来,甚是可惜,趁着中午睡觉的时间补一篇介绍性的文章吧. 首先热部署的场景是 ...

  6. 吴恩达《深度学习》-第二门课 (Improving Deep Neural Networks:Hyperparameter tuning, Regularization and Optimization)-第一周：深度学习的实践层面 (Practical aspects of Deep Learning) -课程笔记

    第一周:深度学习的实践层面 (Practical aspects of Deep Learning) 1.1 训练,验证,测试集(Train / Dev / Test sets) 创建新应用的过程中, ...

  7. Node.js使用npm安装模块太慢，解决办法

    转自 淘宝 npm 地址: http://npm.taobao.org/ 如何使用 有很多方法来配置npm的registry地址,下面根据不同情境列出几种比较常用的方法.以淘宝npm镜像举例: 1.临 ...

  8. springboot的文件路径，配置文件

    生成springboot会指定一个包路径,启动的class文件在这个目录下,其他的controller等也要在这个目录的子目录下,不然会扫不到. 一般我们会维护两三个配置文件:生产环境,开发环境,测试 ...

  9. PG-跨库操作-postgres_fdw

    接上一篇<PG-跨库操作-dblink>:讲下postgres_fdw的使用:postgres_fdw工作原理详细介绍可以去看下<PostgreSQL指南>第4章: 对FDW特 ...

  10. IDEA文本编辑区的护眼绿豆沙色配置

    第一步:打开IDEA -> File -> settings -> Editor -> Color Scheme -> General 第二步:找到右方Text -> ...