js之图片数字时钟

最新推荐文章于 2024-04-15 19:39:02 发布

名字到底多长

最新推荐文章于 2024-04-15 19:39:02 发布

阅读量3.8k

点赞数

分类专栏：来自cj的js练手

本文链接：https://blog.csdn.net/mingzidaodiduochang/article/details/8142225

版权

来自cj的js练手专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Digit Clock</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="../../lib/base.js"></script>
  <link rel="stylesheet" type="text/css" href="base.css">
  <script type="text/javascript">
	window.onload = function(){
		new DigitalClock(document.getElementById('digitClock'));
	};
	
	function DigitalClock(container) {
		this.container = container;
		var xx = this.container.getElementsByTagName('img');
		this.images = [];
		for(var i=0;i<xx.length;i++){
			if(i!=2&&i!=5){
				this.images.push(xx[i]);				
			}	
		}
		this.setImage();
		this.setTime();
	}
	DigitalClock.prototype = {
		//思路是用产生的date对象的时间替换对应的图片名字 	
		setTime:function(){
			var _this = this;
			setInterval(function(){
				_this.setImage();		
			},1000);
		},
		
		setImage:function(){
			var d = new Date();		
			var h = (d.getHours()+'').addPrevZeros(2);//get函数得到的是number
			var i = (d.getMinutes()+'').addPrevZeros(2);
			var m = (d.getSeconds()+'').addPrevZeros(2);
			var a = (h+i+m).split('');
			for(var i=0;i<a.length;i++){
				this.images[i].src = 'digits/'+a[i]+'.gif';
			}
		}
	
	};
	
	//给一个字符串前面拼接0
	String.prototype.addPrevZeros = function(count){
		//s要拼接0的字符串
		//count 拼接0以后s的长度
		if(this.length>=count)
			return this;
		else{
			return new Array(count-this.length+1).join('0')+this;
		}	
	};
  </script>
</head>
<body>
	<h1>Digit Clock</h1>
	<p>
	当前时间为：
		<span id="digitClock">
		<img src="digits/0.gif" alt="0" class="clockImage" />
		<img src="digits/0.gif" alt="0" class="clockImage" />
		<img src="digits/colon.gif" alt=":"  /><!--2-->
		<img src="digits/0.gif" alt="0" class="clockImage" />
		<img src="digits/0.gif" alt="0" class="clockImage" />
		<img src="digits/colon.gif" alt=":"  /><!--5-->
		<img src="digits/0.gif" alt="0" class="clockImage" />
		<img src="digits/0.gif" alt="0" class="clockImage" />
		</span>
	</p>
	
</html>