用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 ...
随机推荐
- 玩转Git入门篇
最近项目使用到Git管理项目,所以就学习了一番,随然网上关于 Git的文章铺天盖地,我还是整理下总结下自己学习Git相关笔记,希望也能帮助到需要他的小伙伴们,O(∩_∩)O~ 简介 Git 是分布式版 ...
- #cat /proc/meminfo 详解
$cat /proc/meminfoMemTotal: 2052440 kB //总内存MemFree: 50004 kB //空闲内存Buffers: ...
- jdbc连接阿里云服务器上的MySQL数据库 及 数据库IP限制
问题1:Jdbc 如何连接阿里云服务器上的MySQL数据库? 解决: 上截图: 其中IP是阿里云服务器的公网IP地址. 问题2: 刚开始接手开发的时候,使用Navicat连接阿里云服务器上的数据后 ...
- erlang的脚本执行---escript
1.概述: 作为程序员对于脚本语言应该很熟悉了,脚本语言的优点很多,如快速开发.容易编写.实时开发和执行, 我们常用的脚本有Javascript.shell.python等,我们的erlang语言也有 ...
- spring容器和springmvc容器，以及web容器的关系
说到spring和springmvc,其实有很多人分不清他们有什么区别,认为它俩是一样的,如果你问他项目里用的什么MVC技术,他会说我们用的spring和mybatis,或者spring和hibern ...
- Runc 简介
RunC 是什么? RunC 是一个轻量级的工具,它是用来运行容器的,只用来做这一件事,并且这一件事要做好.我们可以认为它就是个命令行小工具,可以不用通过 docker 引擎,直接运行容器.事实上,r ...
- 小隐隐于野：基于TCP反射DDoS攻击分析
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯DDoS安全专家.腾讯云游戏安全专家 陈国 0x00 引言 近期,腾讯云防护了一次针对云上某游戏业务的混合DDoS攻击.攻击持续了 ...
- CentOS在线安装RabbitMQ3.7
一.通过yum命令在线安装RabbitMQ yum在线安装,简单.快捷.自动安装相关依赖包. 1.安装Erlang环境(RabbitMQ由Erlang语言开发) 1.1)下载rpm安装包 官方地址:h ...
- PHP 7 新特性
PHP 7 新特性 标量类型声明 PHP 7 中的函数的形参类型声明可以是标量了.在 PHP 5 中只能是类名.接口.array 或者 callable (PHP 5.4,即可以是函数,包括匿名函数) ...
- C# 使用 SmtpClient.SendAsync 方法发送邮件失败，总是返回 Cancelled
问题: 调用 SmtpClient.SendAsync,在 SendCompleted 的回调函数里面总是获取到 e.Cancelled 为 true. 后来测试了一下,相同的代码,只是把 SmtpC ...