实现效果：

准备工作：

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. [Javascript] Array methods in depth - indexOf

    indexOf is used to search for a value or reference inside of an array. In this lesson we first look ...

  2. C++中数组初始化

    #include<iostream>using std::cout;using std::endl;int arr1[5];int arr2[5] = {1,3,5};int main() ...

  3. [iOS]使用symbolicatecrash分析crash文件

    对于我们iOS开发者来说,最心碎的事莫过于苹果审核一个星期后上架app store,而第二天就报出闪退bug.一周前我刚经历过,而且最坑的是由于第一次做个人开发,经验不足,没有集成友盟的分析SDK,还 ...

  4. C复习手记(Day3)

    C预处理器 C 预处理器不是编译器的组成部分,但是它是编译过程中一个单独的步骤.简言之,C 预处理器只不过是一个文本替换工具而已,它们会指示编译器在实际编译之前完成所需的预处理.我们将把 C 预处理器 ...

  5. SQlserver表连接

    连接是两元运算,可以对两个或多个表进行查询,结果通常是含有参加连接运算的两个表或多个表的指定列的表. 在T-SQL中,连接查询有两类: 第一类:符合SQL标准的连接谓词表示形式: 第二类:T-SQL扩 ...

  6. DKNightVersion的基本使用(夜间模式)

    DKNightVersion下载地址: https://github.com/Draveness/DKNightVersion 基本原理就是利用一个单例对象来存储颜色, 然后通过runtime中的ob ...

  7. POJ3111 K Best（另类背包+二分+变态精度）

    POJ3111 K Best,看讨论区说数据有点变态,精度要求较高,我就直接把循环写成了100次,6100ms过,(试了一下30,40都会wa,50是4000ms) 第一次在POJ上看到下面这种东西还 ...

  8. POJ1276：Cash Machine(多重背包)

    Description A Bank plans to install a machine for cash withdrawal. The machine is able to deliver ap ...

  9. develop process

    -f Option is dangerous, make sure that only do this on your own branch # When you starting coding at ...

  10. HTML&CSS基础学习笔记1.13—无序列表

    无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无 ...