<!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. IIS 7.5 发布Web 网站步骤

    1. 添加删除程序中,点击打开或关闭Window 功能 , 如图 , 勾选: 2. 打开 vs开发工具 控置台程序 , 注册 aspnet_regiis -i 3.设置应用程序域为指定版本 4.设置应 ...

  2. 关于Thinkphp Upload类

    $this->uploads($picurl); public function uploads($picurl) { $config = array( 'maxSize' => 3145 ...

  3. Visor 隐藏应用之一 CSS3 生成器

    Visor 有很多隐藏功能,这些功能并不是系统的核心功能,只是为了测试一些技术,做了些对初学前端的工程师还算有用的功能.今天就介绍一下CSS3 生成器. 先介绍一下Note 组件: Note是基本图形 ...

  4. cocoapods无法使用(mac os 10.11升级导致pod: command not found)

    之前安装了cocoapods, 那么输入 : sudo gem install -n /usr/local/bin cocoapods 如果还不行的话 首先在终端输入 gem sources -l 查 ...

  5. Java中main函数只能调用同类中的静态方法?

    如果想调用本类中的非静态方法可以这么来写: public class TT{ public static void main(String[] args){ TT t = new TT(); t.fu ...

  6. linux下用eclipse + GDBserver + JLINK 在线调试（ARM11）

    (一)环境: 目标版:TINY6410 OS:centOS6.5 IDE:eclipse luna CDT:v8.3 GDB:V7.5 (二)环境监理 1.安装cenntos:参考其他相关文章,这里重 ...

  7. css3旋转

    首先创建一个容器如div,然后设置其相关的3d属性,主要是三个1.perspective 透视,值越小3D感越强,值越大视觉正常.2.perspective-origin,透视点一般居于容器的中心.3 ...

  8. mysql 查询优化

    不说话,先贴代码 public PageResult<BoTmcRaw> getLargeList(BaseCondition baseCondition) { PageResult< ...

  9. jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下.   复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...

  10. vs2013发布网站

    第一次在Server2008中发布网站,期间发生了很多的错误,这里记录下来,以供以后的学习. (1).首先在IIS上先建一个网站,(网站名称.物理路径.类型 IP地址 和端口)然后点击确认,这样就是先 ...