javascript制作的时钟

最新推荐文章于 2024-01-31 16:02:42 发布

青天诀

最新推荐文章于 2024-01-31 16:02:42 发布

阅读量611

点赞数

分类专栏： Web前端文章标签： javascript Web前端

本文链接：https://blog.csdn.net/u012193330/article/details/41149459

版权

Web前端专栏收录该内容

123 篇文章 1 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<style>
			body{
				margin:0px;
				padding:0px;
				
			}
			#timer{
				margin:0px auto;
				padding-top:100px;
				width:950px;
			}
		</style>
		<script>
			window.οnlοad=function(){
				var imgs=document.getElementsByClassName('timer');
				
				setInterval(clock,1000);
				clock();
			/**
			 * 将获取的时间的时、分、秒，都转变成两位数，并以字符串的形式返回
			 */	
				function toDouStr(n){
					if(n<10){
						return '0'+n;
					}
					else
					{
						return ''+n;
					}
				}
			/**
			 * 通过改变图片，达到时钟的效果
			 */	
				function clock(){
					var oDate=new Date();
					var sTimer=toDouStr(oDate.getHours())+toDouStr(oDate.getMinutes())+toDouStr(oDate.getSeconds());
					for(var i=0;i<sTimer.length;i++)
					{
						imgs[i].src='img/'+sTimer.charAt(i)+'.png';
					}
				}
			};
		</script>
	</head>
	<body>
		<div id="timer">
			<img class="timer"  src="img/0.png" />
			<img class="timer"  src="img/0.png" />
			
			<img src="img/点.png" />
			
			<img class="timer"  src="img/0.png" />
			<img class="timer"  src="img/0.png" />
			
			<img src="img/点.png" />
			
			<img class="timer"  src="img/0.png" />
			<img class="timer"  src="img/0.png" />
		</div>
		
	</body>
</html>

注意事项：

1. Date对象获取的时、分、秒，都是Number类型，所以需要转化为字符串

2. 对于字符串sTimer，当应用sTimer[i]时，在IE7中是不兼容的，sTimer.charAt(i)才兼容所有浏览器，所以我们这里使用charAt()。

所用到的图片如下所示：

运行视图：

青天诀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript制作的时钟

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> New Web Project body{ margin:0px; padding:0px; } #timer{ mar
复制链接

扫一扫