<!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数字时钟的更多相关文章

  1. html5 canvas js(数字时钟)

      <!doctype html> <html> <head> <title>canvas dClock</title> </head ...

  2. js动态数字时钟

    js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 ...

  3. js实现动态数字时钟

    1.效果如下 2.html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  4. js数字滑动时钟

    js数字滑动时钟: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. JS — 实现简单的数字时钟

    js实现简单的数字时钟 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  6. JS制作一个创意数字时钟

    通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...

  7. JS框架_(Vue.js)带有星期日期的数字时钟

    百度云盘 传送门 密码:tv1v 数字时钟效果: <!doctype html> <html> <head> <meta charset="utf- ...

  8. 简单酷炫的Canvas数字时钟

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 我记得很早之前就看过这个DEMO,是岑安大大博客里看到的: 就是这个数字时钟,当时觉得这个创意不错,但是也没去折腾.直到昨天同事又在网上看 ...

  9. 使用jQuery和CSS3实现一个数字时钟

    点击进入更详细教程及源码下载     在线演示 我们经常会在网站中看见一个时钟的效果.今天向大家分享一个使用jQuery和CSS3实现一个数字时钟教程. http://www.html5cn.org/ ...

随机推荐

  1. Hibernate+Oracle注解式完整实例

    MyEclipse10,新建Web Project,取名hibernate, jar包 1.Cat.java (实体类) package com.hibernate.bean; import java ...

  2. ionic开发中的各种坑

    提前说明:这些坑是ionic1的. 一.关于缓存:<ion-view>中设置cache-view="false"表示禁用缓存,默认为true; 二.列表进入详情页面后返 ...

  3. html5 audio的暂停与播放

    在html5里,audio是新增的功能.它方便了用户. 大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 audio 元素来包含音频 ...

  4. Android中的颜色设置

    1.在android中经常看到设置的颜色为八位的十六进制的颜色值,例如 public static final class color { public static final int lightb ...

  5. TRACERT命令

    这半个月  服务器从联通线路换到移动线路 导致基层用联通和电信线路的用户 上不去收费软件 tracert 120.194.42.142:8090 发现路由器 解析地址绕过很多条街后 出现丢包现象 联系 ...

  6. 易云盘(nester)-面对企业的和团队文档管理的平台

    易云盘(nester)是本人的另外一款作品,先前开发和维护的在线设计工具Visor也已经合并在Nester的最新版里了. 目前作为共享版发布. 特点 Nester后端是以Spring Framewor ...

  7. linux命令每日一练习-tail

    tail 是查看文件的末尾 tail -n 5*** 显示文件×××的最后5行 tail -n +5 ××× 显示文件×××从第5行开始的内容 tail -f *** 监视文件×××的末尾.循环展示

  8. C#实现Excel的导入导出

    Excel作为日常使用工具,在开发过程中经常会用到其导入导出功能.经过一个小的练习,学习了下导入导出功能. 导出篇: 从数据库查询到所要导出的数据,以xml的形势保存下来,最后输出excel的格式,保 ...

  9. 黑马程序员——C语言基础 内存剖析

    Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一)进制 进制是一种计数的方式,数值的表示形式.有多种进制十进制.二进制 ...

  10. UnitTesting中的ClassInitialize，ClassCleanup，TestInitialize，TestClearup

    ClassInitialize 标识一个包含代码的方法,这些代码必须在测试类中的任意测试运行之前使用,并用于分配测试类所使用的资源.此类不能被继承. http://msdn.microsoft.com ...