实现效果：

准备工作：

1# 定时器 相关知识了解

2#javascript Date(日期)对象

3# 准备效果所用图片

实现原理：

1# 获取当前时间；

var time=new Date();

var iHours=time.getHours();

var iMinutes=time.getMinutes();

var iSeconds=time.getSeconds();

var iNow=double(iHours)+':'+double(iMinutes)+':'+double(iSeconds);

2# 设定定时器,1s执行一次；

setInterval(function(){

code//代码部分

},1000);

3# 通过实时的时间数据，动态改变对应的img属性值

3.1 方法一：  固定位置图片显示相应时间数据

arrImg[0].src='img/'+parseInt(iHours/10)+'.jpg';

arrImg[1].src='img/'+iHours%10+'.jpg';

　　

3.2 方法二：通过charAt()获取日期字符串指定位置字符，然后改变相应图片的img属性值

arrImg[i].src='img/' +iNow.charAt(i)+'.jpg';

　　

代码部分：

方法一 : 固定位置图片显示相应时间数据

<!DOCTYPE html>

<html>

<head>

	<title>时间计时器</title>

	<meta charset='utf-8'/>

    <style type="text/css">

    body{font-size: 80px;}

    img{float: left;width: 60px;margin:0 3px;}

    .middle{

    	width: 600px;

    	height: 100px;

    	position: absolute;

    	top:0;right: 0;bottom: 0;left: 0;

    	margin: auto;

    }

    </style>

</head>

<body>

<div id="time"></div>

<div class="middle">

<img src="img/0.jpg"/>

<img src="img/0.jpg"/>

<img src="img/colon.jpg"/>

<img src="img/0.jpg"/>

<img src="img/0.jpg"/>

<img src="img/colon.jpg"/>

<img src="img/0.jpg"/>

<img src="img/0.jpg"/>

</div>

<script type="text/javascript">

var oTime=document.getElementById('time');

var arrImg=document.getElementsByTagName('img');

setInterval(function(){

timer();

},1000);

timer();//消除刷新网页时,时钟函数延迟带来的误差

//时钟两位数显示

function double(n){

	if(n<10){

		return '0'+n;

	}else{

		return ''+n;

	}

}

function timer(){

var time=new Date();

var iHours=time.getHours();

var iMinutes=time.getMinutes();

var iSeconds=time.getSeconds();

var iNow=double(iHours)+':'+double(iMinutes)+':'+double(iSeconds);

arrImg[0].src='img/'+parseInt(iHours/10)+'.jpg';

arrImg[1].src='img/'+iHours%10+'.jpg';

arrImg[3].src='img/'+parseInt(iMinutes/10)+'.jpg';

arrImg[4].src='img/'+iMinutes%10+'.jpg';

arrImg[6].src='img/'+parseInt(iSeconds/10)+'.jpg';

arrImg[7].src='img/'+iSeconds%10+'.jpg';

return iNow;

}

</script>

</body>

</html>

方法二 :通过charAt()获取日期字符串指定位置字符，然后改变相应图片的img属性值

<!DOCTYPE html>

<html>

<head>

	<title>时间计时器</title>

	<meta charset='utf-8'/>

    <style type="text/css">

    body{font-size: 80px;}

    img{float: left;width: 60px;margin:0 3px;}

    .middle{

    	width: 600px;

    	height: 100px;

    	position: absolute;

    	top:0;right: 0;bottom: 0;left: 0;

    	margin: auto;

    }

    </style>

</head>

<body>

<div id="time"></div>

<div class="middle">

<img src="img/0.jpg"/>

<img src="img/0.jpg"/>

<img src="img/0.jpg"/>

<img src="img/0.jpg"/>

<img src="img/0.jpg"/>

<img src="img/0.jpg"/>

<img src="img/0.jpg"/>

<img src="img/0.jpg"/>

</div>

<!--<img src="img/colon.jpg"/>-->

<script type="text/javascript">

//alert(timer());

var oTime=document.getElementById('time');

var arrImg=document.getElementsByTagName('img');

setInterval(function(){

timer();

},1000);

timer();//消除刷新网页时,时钟函数延迟带来的误差

//时钟两位数显示

function double(n){

	if(n<10){

		return '0'+n;

	}else{

		return ''+n;

	}

}

function timer(){

var time=new Date();

var iYear=time.getFullYear();

var iMonth=time.getMonth()+1;

var iDay=time.getDay();

var iHours=time.getHours();

var iMinutes=time.getMinutes();

var iSeconds=time.getSeconds();

var iNow=double(iHours)+':'+double(iMinutes)+':'+double(iSeconds);

arrImg[0].src='img/'+parseInt(iHours/10)+'.jpg';

arrImg[1].src='img/'+iHours%10+'.jpg';

arrImg[3].src='img/'+parseInt(iMinutes/10)+'.jpg';

arrImg[4].src='img/'+iMinutes%10+'.jpg';

arrImg[6].src='img/'+parseInt(iSeconds/10)+'.jpg';

arrImg[7].src='img/'+iSeconds%10+'.jpg';

for(var i=0;i<arrImg.length;i++){

	if(i==2 || i==5){

		arrImg[i].src='img/colon.jpg';

	}else{

		arrImg[i].src='img/' +iNow.charAt(i)+'.jpg';

	}

}

return iNow;

}

</script>

</body>

</html>

　　

Javascript:一个优雅的时钟的更多相关文章

  1. webview之如何设计一个优雅健壮的Android WebView？（下）(转)

    转载:https://iluhcm.com/2018/02/27/design-an-elegant-and-powerful-android-webview-part-two/ (这篇文章写得有点晚 ...

  2. webview之如何设计一个优雅健壮的Android WebView？（上）(转)

    转接:https://iluhcm.com/2017/12/10/design-an-elegant-and-powerful-android-webview-part-one/ 前言 Android ...

  3. 如何设计一个优雅健壮的Android WebView？（下）

    转:如何设计一个优雅健壮的Android WebView?(下) 前言 在上文<如何设计一个优雅健壮的Android WebView?(上)>中,笔者分析了国内WebView的现状,以及在 ...

  4. 如何设计一个优雅健壮的Android WebView？（上）

    转:如何设计一个优雅健壮的Android WebView?(上) 前言 Android应用层的开发有几大模块,其中WebView是最重要的模块之一.网上能够搜索到的WebView资料可谓寥寥,Gith ...

  5. 在PostgreSQL自定义一个“优雅”的type

    是的,又是我,不要脸的又来混经验了.我们知道PostgreSQL是一个高度可扩展的数据库,这次我聊聊如何在PostgreSQL里创建一个优雅的type,如何理解优雅?大概就是不仅仅是type本身,其它 ...

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

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

  7. BOM 请给javascript一个说法-------Day33

    楼市低迷,业主是不是该要个说法.黄金暴跌,谁来给大妈们一个说法.中国足球,敢不敢给大家一个说法. 给个说法,谁给,给谁,这该是哲学的范畴了吧. 可是,在这里.BOM是真真切切的给javascript一 ...

  8. 用 Python 制作一个艺术签名小工具，给自己设计一个优雅的签名

    生活中有很多场景都需要我们签字(签名),如果是一些不重要的场景,我们的签名好坏基本无所谓了,但如果是一些比较重要的场景,如果我们的签名比较差的话,就有可能给别人留下不太好的印象了,俗话说字如其人嘛,本 ...

  9. 【css3+JavaScript】:一个优雅的对话框

    实现效果: 演示地址:http://codepen.io/anon/pen/BNjYrR ======2015/5/11====== 优化滚动条(scroll):默认的滚动条太丑,忍不住优化下 ::- ...

随机推荐

  1. Linux下那些奇葩的命令

    相信喜爱编程,痴迷技术的你,肯定接触过甚至深爱着linux,甚至可能已经很熟悉linux了,可是linux那逗比的一面,你又知道多少. 本文!纯粹娱乐!不喜勿喷! 1.程序猿的愤慨! yes 当我们再 ...

  2. 高速排序-c++（分别用数组和容器实现）

    /********************************************************************** *版权全部 (C)2014, cheng yang. * ...

  3. UVAlive 6131 dp+斜率优化

    这道题和06年论文<从一类单调性问题看算法的优化>第一道例题很相似. 题意:给出n个矿的重量和位置,这些矿石只能从上往下运送,现在要在这些地方建造m个heap,要使得,sigma距离*重量 ...

  4. 在Debian Wheezy 7.3.0上编译安装3.12.14内核

    最近需要对Linux的一个内核模块进行调整实验,故决定先在虚拟机中完成编译调试工作,最后再在真实的系统上进行测试.为了防止遗忘,把过程记录于此. 1. 准备系统环境 首先从官网下载最新版的Virtua ...

  5. iOS之AFN错误代码1016（Error Domain=com.alamofire.error.serialization.response Code=-1016 "Request failed: unacceptable）

    请参考这篇博客:点击查看

  6. CSS3新特性（阴影、动画、渐变、变形、伪元素等） CSS3与页面布局学习总结——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

      目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点 三.伪元素 3.1.before 3.2.after 3.3.清除浮动 四.圆角与边 ...

  7. DataGrid( 数据表格) 组件[4]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  8. Linux命令初步了解

    知识点: 1.虚拟控制台: 在系统启动时直接进入字符工作方式后,系统提供了多个(默认为6个)虚拟控制台.每个虚拟控制台可以相互独立使用,互不影响. 可以使用Alt+F1~Alt+F6进行多个虚拟控制台 ...

  9. （五）《Java编程思想》——final关键字

    可能使用final的三种情况:数据.方法.类. 1.final数据 final 常量必须是基本类型数据,且在定义时须赋值: 一个既是static又是final的域只占据一段不能改变的存储空间,只有一份 ...

  10. linux分区和系统文件和挂载

    要以root用户进入 .查看磁盘情况 lsblk .进行分区 sudo cfdisk /dev/sda 在空闲资源的地方新建分区,然后一步步的走下来就行了,最后选择write,然后quit 重启 .创 ...