用js制作数码时钟
实现效果
图片素材
原理分析
- 用
setInterval（fn, 1000）来循环刷新图片。 - 用
date对象的getHours()、getMinutes()、getSeconds()方法来获取当前的时、分、秒，并且拼接成字符串。 - 通过字符串的处理来改变
<img>的src，从而达到改变图片显示的目的。
代码
<body style="background:black; color: white; font-size:50px; padding: 50px 80px; ">
<img src="data:images/0.png" />
<img src="data:images/0.png" />
:
<img src="data:images/0.png" />
<img src="data:images/0.png" />
:
<img src="data:images/0.png" />
<img src="data:images/0.png" />
</body>
window.onload = function () {
//获取img元素数组
aImg = document.getElementsByTagName('img'); function tick(){
var oDate = new Date(); // 获取当前的时分秒拼接成长度为6的字符串
var str = toDou(oDate.getHours()) +
toDou(oDate.getMinutes()) +
toDou(oDate.getSeconds()); // 遍历所有img，更新src
for(var i = 0; i < aImg.length; i++){
// 第i张图片的src对应str的第i为
aImg[i].src = "images/" + str.charAt(i) + ".png";
}
} // 设置定时器
setInterval(tick, 1000); // 初始化
tick()
} // 为了保证str的长度是6，用toDou()来为一位数补0
function toDou(num) {
return num < 10 ? "0" + num : "" + num;
}
分析总结
更新
src的整体思路是通过长度为6 的字符串str和长度为6的aImg数组对象一一对应，而获取的时分秒有可能是一位数，所以用toDou(num)来补位。toDou (num)中用的是三元运算符，简化了代码。//用if esle
function toDou(num){
if(n<10){
return "0"+num;
}else{
return ""+num;
}
}
//用三元运算符
function toDou(num) {
return num < 10 ? "0" + num : "" + num;
}由于setIteval(fn, 1000)的执行顺序是先延迟，再执行函数，所以在最后单独调用一下tick()，来防止刷新页面后的第一秒显示的是00：00：00。
还有一点，复习下
String对象的charAt()方法：charAt(index)方法可返回指定位置的字符（长度为1的字符串），如果index不在0和str.length之间将返回一个空字符串。
用js制作数码时钟的更多相关文章
- js之数码时钟加随机变色
HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- js绘制圆形时钟
纯js制作圆形时钟 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 通过JS制作一个简易数码时钟
设计思路: 数码时钟即通过图片数字来显示当前时间,需要显示的图片的URL根据时间变化而变化. a.获取当前时间Date()并将当前时间信息转换为一个6位的字符串; b.根据时间字符串每个位置对应的数字 ...
- js基础练习三之数码时钟
这章节有两个实例,1,定时器的使用; 2,数码时钟; 用到的js知识:定时器,Date对象. >>>>>定时器 开启定时器: setInterval 间隔型 setTim ...
- JS超酷时钟的制作
通过补充代码,实现时钟实时显示当前时间:年.月.日.时.分.秒.日期. <!DOCTYPE html> <html> <head lang="zh-CN&quo ...
- JS定时器的使用--数码时钟
<title>无标题文档</title> <script> function toDou(n){ if(n<10){ return '0'+n; }else{ ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载
HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" ...
- [JS,Canvas]日历时钟
[JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
随机推荐
- 最全的 Swift 4 新特性解析
转自: http://www.jianshu.com/p/f35514ae9c1a WWDC 2017 带来了很多惊喜.Swift 4 也伴随着 Xcode 9 测试版来到了我们的面前,很多强大的新特 ...
- Hadoop的Python框架指南
http://www.oschina.NET/translate/a-guide-to-Python-frameworks-for-Hadoop 最近,我加入了Cloudera,在这之前,我在计算生物 ...
- Asp.Net WebApi Swagger终极搭建
[PS:原文手打,转载说明出处,博客园] 关于为什么用Swagger 目前稍微有点规模的公司,已经从原先的瀑布流开发到了敏捷开发,实现前后端分离,为此后端工程师只关注写好Api即可,那程序员最讨厌的就 ...
- NewLife.Net——构建可靠的网络服务
网络程序应该注册成为系统服务,以保证其自启动以及稳定可靠运行! 这一场,讲讲怎么建立一个生产级别的网络服务. 老规矩,先上源码:https://github.com/nnhy/NewLife.Net. ...
- polysh安装与使用-同时查看多台机器日志
polysh简介 polysh 是一个交互式命令,可以在一台服务器上批量的对一批服务器进行处理,运行交互式命令.官方的简介如下: Polysh is a tool to aggregate sever ...
- Java基础：Java虚拟机(JVM)
当我们第一次学习Java时这些原理上的东西就会被提到,但是很少有真正去学习.今天开始从头过一遍Java,打算从JVM开始. 1. JVM是什么 2. JRE和JDK 3. JVM结构 3.1. 程序计 ...
- windows下virtualenv中安装MySQL-python
先在正常的环境下安装 MySQL-python-1.2.3.win-amd64-py2.7.exe (用everything搜索一下就出来) 然后到 C:\Python27\Lib\site-pack ...
- QT5:C++实现基于Multimedia的音乐播放器（序）
前段时间C++课设,决定做个播放器,于是参考了网上的代码后,做了个很简陋的音乐播放器(只写了MP3格式)出来,虽然功能甚少,但还是决定把过程记录一下. 成品如下图: 播放器功能: 上.下一首,音量控制 ...
- 最好的营销是“调情”
每一个精彩的营销案例都应该像一个精彩的故事,而故事最精彩的讲述方式就是设置一个开放的结局,把解读和诠释的权利留给读者和观众.宣讲.洗脑式的营销时代已经终结,就像单相思的深情表白永远不如两情相悦的彼此挑 ...
- MySQL类型float double decimal的区别
语法 MySQL 浮点型和定点型可以用类型名称后加(M,D)来表示,M表示该值的总共长度,D表示小数点后面的长度,M和D又称为精度和标度,如float(7,4)的 可显示为-999.9999,MySQ ...