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

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. asp.net中使用单例

    摘要 有这样一个service,需要运行的asp.net站点上,但要保证这个实例是唯一的.单例用来启用聊天机器人,保证唯一,以免启动多个,造成客户端发送消息的时候,会造成每个机器人都发送消息,app收 ...

  2. linux 服务初识

    1. daemon 和 service 系统为了实现某些功能,必须提供一些服务(service),但是service的提供总是需要进程的运行,实现service 的程序我们称为daemon(“守护神” ...

  3. 深度学习入门教程UFLDL学习实验笔记一:稀疏自编码器

    UFLDL即(unsupervised feature learning & deep learning).这是斯坦福网站上的一篇经典教程.顾名思义,你将在这篇这篇文章中学习到无监督特征学习和 ...

  4. eclipse中输入@符号自动提示Annotation

    将Eclipse中Content Assist中的Auto activation for java里.的后面加上@符号即可

  5. 纯原生js移动端城市选择插件

    接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...

  6. win10十周年更新后cent os 虚拟机无法连接到xshell

    1.在vmware中打开编辑-->虚拟网络编辑器-->还原默认设置

  7. Testing a Redux &amp; React web application

    Part 1 - https://www.youtube.com/watch?v=iVKPbH3qyW0 Part 2 - https://www.youtube.com/watch?v=M5lwOs ...

  8. JS - 数据类型的值拷贝函数(深拷贝)

    function mottoClone (obj) { if (obj === null || typeof obj !== 'object') return obj; if (obj instanc ...

  9. 不可不知的socket和TCP连接过程

    html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...

  10. Hbase写Hfile报错:Trying to load more than 32 hfiles to one family of one region

    在写Hfile的时候 ,如果一个family下超过了默认的32个hfile,就会报如下错误: ERROR mapreduce.LoadIncrementalHFiles: Trying to load ...