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

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. console线和RJ45

    123 前言 一直以为console口和RJ45是同一种接口,but后来我发现我错了~ RJ45 先介绍一下RJ45吧 什么是RJ45? RJ45是一种接口 我们家用的网线的接口 其实就是RJ45 r ...

  2. git 快速入门及常用命令

    身为技术人员,都知道Git是干嘛的.从服务端角度它是代码仓库,可以多人协作.版本控制.高效处理大型或小型项目所有内容:从客户端讲,它能够方便管理本地分支.且与服务端代码的同步,从拉取.合并.提交等等管 ...

  3. SpringBoot写后端接口，看这一篇就够了！

    摘要:本文演示如何构建起一个优秀的后端接口体系,体系构建好了自然就有了规范,同时再构建新的后端接口也会十分轻松. 一个后端接口大致分为四个部分组成:接口地址(url).接口请求方式(get.post等 ...

  4. [LeetCode]198. 打家劫舍(DP)

    题目 你是一个专业的小偷,计划偷窃沿街的房屋.每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警. 给定一个 ...

  5. js图形打印

    1. 打印等边三角形 document.writeln("打印三角形</br>"); for(var i=0;i<5;i++){ for(var j=5;j> ...

  6. C# 中 Struct 和 Class 的区别总结

    翻译自 Manju lata Yadav 2019年6月2日 的博文 <Difference Between Struct And Class In C#>,补充了一些内容和示例. 结构体 ...

  7. openstack共享组件——Memcache 缓存系统（4）

    云计算openstack共享组件——Memcache 缓存系统(4)   一.缓存系统 一.静态web页面: 1.在静态Web程序中,客户端使用Web浏览器(IE.FireFox等)经过网络(Netw ...

  8. 003.当在windows终端输入ipconfig时，显示不是内部或外部命令，也不是可运行的程序或批处理文件

    当在windows终端输入ipconfig时,显示不是内部或外部命令,也不是可运行的程序或批处理文件,这是环境变量的问题: 右键我的电脑→→→属性→→→高级系统设置→→→(高级)环境变量 在弹出的窗口 ...

  9. 栈帧的内部结构--动态链接 (Dynamic Linking)

    每个栈帧中包含: 局部变量表(Local Variables) 操作数栈(Opreand Stack) 或表达式栈 动态链接 (Dynamic Linking) (或指向运行时常量的方法引用) 动态返 ...

  10. linux学习（七）文件打包和压缩命令

    一.前言 在Windows操作系统下,我们会使用WinRAR或者快压等等的压缩软件来进行压缩或者解压. 在Linux下当然也存在压缩或解压的操作,下面我们就来学习一下在Linux下是怎么压缩和解压的! ...