js数字时钟
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟</title>
<script>
function set(obj){
if(obj<10){
return '0'+obj; }
else
return ''+obj;
}
window.onload=function(){ var aImg=document.getElementsByTagName('img');
function tick(){
var oDate=new Date();
var str=set(oDate.getHours())+set(oDate.getMinutes())+set(oDate.getSeconds()); for(var i=0;i<str.length;i++){
aImg[i].src='img/'+str[i]+'.png';
}
}
tick();
setInterval(tick
,1000); //alert(str);
};
</script>
</head>
<body style="background:red; color:red; font-size:50px">
<img src='img\0.png' / >
<img src='img\0.png' />
:
<img src='img\0.png' />
<img src='img\0.png' />
:
<img src='img\0.png' />
<img src='mg\0.png' />
</body>
</html>
定时器小应用+date对象。。。
关键在于字符串的处理。。。。
将date对象中获取的数字不会按字符串加在一起，自定义set函数将返回值全变为字符串并在个位数前补0.。。。。。
再处理每个img标签。。。配以炫酷的png/jpg图像，效果好的很。。。。
js数字时钟的更多相关文章
- html5 canvas js(数字时钟)
<!doctype html> <html> <head> <title>canvas dClock</title> </head ...
- js动态数字时钟
js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 ...
- js实现动态数字时钟
1.效果如下 2.html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- js数字滑动时钟
js数字滑动时钟: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- JS — 实现简单的数字时钟
js实现简单的数字时钟 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- JS制作一个创意数字时钟
通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...
- JS框架_(Vue.js)带有星期日期的数字时钟
百度云盘 传送门 密码:tv1v 数字时钟效果: <!doctype html> <html> <head> <meta charset="utf- ...
- 简单酷炫的Canvas数字时钟
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 我记得很早之前就看过这个DEMO,是岑安大大博客里看到的: 就是这个数字时钟,当时觉得这个创意不错,但是也没去折腾.直到昨天同事又在网上看 ...
- 使用jQuery和CSS3实现一个数字时钟
点击进入更详细教程及源码下载 在线演示 我们经常会在网站中看见一个时钟的效果.今天向大家分享一个使用jQuery和CSS3实现一个数字时钟教程. http://www.html5cn.org/ ...
随机推荐
- eclipse打开文件或者目录位置
1.点击Run-->External Tools-->External Tools Configurations... 右击program,点击new 2.填写名称,Location,Ar ...
- nginx 模块讲解
1. 通用配置选项: --prefix=<path> 指定Nginx的安装路径,所有其他的路径都要依赖于该选项 --sbin-path=<path> ...
- centos下在线安装mysql
1 首先查看是否有安装过,如果已经安装过,就不必再安装了 yum list installed mysql* rpm -qa | grep mysql* 2 查看有没有安装包: yum list my ...
- Github——入门笔记
一般操作步骤 developer:(你在别人基础上开发) init->clone->add->commit->remote add(origin的地址)->push or ...
- 转载《遭受arp攻击怎么办》
ARP(Address Resolution Protocol,地址解析协议)协议的基本功能就是通过目标设备的IP地址,查询目标设备的MAC地址,以保证通信的进行.ARP攻击仅能在以太网(局 域网如: ...
- js动画之多物体运动
多个物体这不能使用一个定时器了,要给每个物体一个定时器 <!DOCTYPE html> <html lang="en"> <head> < ...
- 个人对sort()排序方法中比较函数一直很混乱，今日理清
需求:使用随机数来打印出0-10,并排序. 代码: var a = new Array();var testArray = function() { while (1) { var b = parse ...
- JAVA小知识
eclipse是日蚀的意思,eclipse是IBM公司的,当年和SUN公司的java竞争,sun的意思是太阳,所以你明白了? Java的起名是 java(爪哇)咖啡,java原意是爪哇的意思,当初起名 ...
- iOS开发学习概述及知识整理
设计师设计出来了一个不错的引导界面,然而当我看到设计稿的时候,我们的app也没几天就要上线了.这个界面模仿了Evernote iOS app的风格. 我以迅雷不及掩耳盗铃之势开始在Xcode上编程,用 ...
- Centos配置国内yum源
网易(163)yum源是国内最好的yum源之一 ,无论是速度还是软件版本,都非常的不错,将yum源设置为163yum,可以提升软件包安装和更新的速度,同时避免一些常见软件版本无法找到.具体设置方法如下 ...