实现效果：

准备工作：

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. android中正确保存view的状态

    英文原文: http://trickyandroid.com/saving-android-view-state-correctly/ 转载此译文须注明出处. 今天我们聊一聊安卓中保存和恢复view状 ...

  2. canvas-画蜗牛

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...

  3. Selenium2学习之-环境搭建

    1.下载安装Eclipse 2.下载并配置jdk环境变量 2.1 介绍一下环境变量设置 2.1.1 点击环境变量 2.1.2 新增系统变量JAVA_HOME 变量名:JAVA_HOME 变量值:C:\ ...

  4. intent-filter data Uri 意图过滤器 详解

    组件的intent-filter属性         如果一个 Intent 请求在一片数据(Uri)上执行一个动作(Action), Android 如何知道哪个应用程序的哪个组件能用来响应这个请求 ...

  5. C# Interface显式实现和隐式实现

    c#中对接口的实现方式有两种:隐式实现和显式实现,之前一直没仔细看过,今天查了些资料,在这里整理一下. 隐式实现的例子 interface IChinese { string Speak(); } p ...

  6. java下文件遍历，与删除

    package cn.stat.p1.file; import java.io.File; public class newfilelist { /** * @param args */ public ...

  7. HDU4545+计算日期

    /* 计算过了D天后的日期 之前D天的日期 */ #include<stdio.h> int judge_year( int year ){ if( (year%4==0&& ...

  8. hdu 1711 Number Sequence（KMP模板题）

    我的第一道KMP. 把两个数列分别当成KMP算法中的模式串和目标串,这道题就变成了一个KMP算法模板题. #include<stdio.h> #include<string.h> ...

  9. 转自：Tsihang 三层网络设备对于IP报文的分片和重组处理原理

    三层网络设备对于IP报文的分片和重组处理原理 对于网络分片,我一年前就想整理出来,虽然说网络上的资料很多,但是真正掌握精髓的除非真正做过分片程序,不然很难将协议栈整体联系起来理解.这篇文章,包括设计分 ...

  10. 数学函数类方法的使用.java

    public class Test { public static void main(String[] args) { double a=2,b=3; double z1=Math.pow(a,b) ...