<!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. LeetCode 2 Add Two Numbers 模拟,读题 难度:0

    https://leetcode.com/problems/add-two-numbers/ You are given two linked lists representing two non-n ...

  2. Shell练习

    1   在终端下运行程序,首先清屏,然后提示:“Input a file or directory name, please!”.从键盘输入一个字符串(如:xxx),如果该字符串是目录,则显示:“xx ...

  3. CABasicAnimation的基本使用方法（移动·旋转·放大·缩小）

    出处:http://blog.csdn.net/iosevanhuang/article/details/14488239 CABasicAnimation类的使用方式就是基本的关键帧动画. 所谓关键 ...

  4. Python Day04

    一.迭代器与生成器: 迭代器(iterator): 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,迭代器的一大优点是不要求事 ...

  5. Adding a WebPart to a SharePoint 2013 Master Page 分类： Sharepoint 2015-07-08 01:03 7人阅读 评论(0) 收藏

    On SharePoint 2013 you can not add the Web Parts to the master page the same way of 2010. Please use ...

  6. jQuery focus、blur事件 添加、删除类名

    jQuery.focusblur = function(ele,className){ var focusblurid = $(ele); focusblurid.focus(function(){ ...

  7. Html标签第一课

    <p>段落标签</p> <h1>字体标签,1到6,越来越小</h1>.....<h6></h6><h>标签自动换行 ...

  8. php 导出对象生成代码并执行var_export和eval

    var_export($obj,true) 导出一个合法的php代码,返回一个字符串 eval($str) 执行一个字符串代码 __set_state 当用var_export导出一个类时,自动调用, ...

  9. java nio 与io区别

    转自:http://blog.csdn.net/keda8997110/article/details/19549493 当学习了Java NIO和IO的API后,一个问题马上涌入脑海: 我应该何时使 ...

  10. python 中的高级函数map()

    map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把函数 f 依次作用在 list 的每个元素上,得到一个新的 list 并返回. 例如,对于list [1, 2 ...