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

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的ArrayList实现随机生成N-M之间N个不重复的随机数

    在此之前我使用Java的数组实现了产生N-M之间的不重复的随机数,下面是使用数列ArrayList实现同样的功能,代码如下: /** * 随机生成 N--M,N个不重复随机数 使用ArrayList ...

  2. C# .Net 委托和事件的区别

    在.net中,事件是一种特殊的委托,那他到底特殊在哪,换句话说,加上event关键字到底有什么用,我理解主要有两方面,下面用实例说明: 一 .事件只能在本类型内部“触发”,委托不管在本类型内部还是外部 ...

  3. unittest上下关联关系的接口——继承测试用例类

    如果有上下关联,可以用到一个类继承测试用例类(里面的测试用例函数名不要带test)的方法去调用用例, 注意:如果放到同一个类会出现用例重复执行的情况 ,如果测试用例的函数带了test,一旦被调用,会被 ...

  4. Linux下用户的创建与删除

    我们在Linux下创建用户主要有两种方式:adduser和useradd,它们的区别以及主要用法如下: adduser adduser的用法很简单,只需adduser+username即可,如下: s ...

  5. IDEA 2020.2安装破解版教程激活码注册码破解补丁 for Mac Windows Linux-中关村老大爷

    IntelliJ Idea Ultimate 2020.2.x版软件最新安装破解版教程方法,本教程提供Idea Ultimate 2020.2版安装包,破解补丁,激活码,亲测100%完美破解激活,支持 ...

  6. redis-port支持前缀迁移

    一.介绍 redis-port是一款redis数据迁移工具,用来将数据从一个redis迁移到另一个redis实例/redis集群中 ,以下是官方地址: https://github.com/Codis ...

  7. JVM内存结构和Java内存模型

    一.JVM 首先看一张JVM结构图(某度找的) 主要看运行时数据区,里边有方法区,堆,java虚拟机栈,本地方法栈,程序计数器.其中方法区和堆是线程共享的,也是JVM进行垃圾收集的区域,java虚拟机 ...

  8. 动态加载dll的实现+远线程注入

    1.在目标进程中申请内存 2.向目标进程内存中写入shellcode(没有特征,编码比较麻烦) 3.创建远线程执行shellcode 之前可以看到shellcode很难编写还要去依赖库,去字符串区等等 ...

  9. ZooKeeper 【不仅仅是注册中心，你还知道有哪些？】

    什么是 ZooKeeper Apache ZooKeeper 是一个开源的实现高可用的分布式协调服务器.ZooKeeper是一种集中式服务,用于维护配置信息,域名服务,提供分布式同步和集群管理.所有这 ...

  10. 树莓派3B+安装64位ubuntu系统和docker工具

    想在树莓派3B上安装一些64位应用(例如64位JDK),因此首先要安装64位的操作系统,今天咱们就一起来实战: 原文地址:https://blog.csdn.net/boling_cavalry/ar ...