纯 js实现动画时钟

最新推荐文章于 2023-05-11 11:27:34 发布

DOM曼珠沙华

最新推荐文章于 2023-05-11 11:27:34 发布

阅读量612

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/a18792627168/article/details/106693648

版权

javascript 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

效果图：

是图片实现的，根据时间动态切换

图片素材是这样：

找到类似的图并修改路径就可以了。

直接看代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>clock</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				width: 122px;
				height: 172px;
				float: left;
				list-style: none;
				overflow: hidden;
			}
			div{
				position: relative;
				top: 0;
				left: 0;
			}
		</style>
	</head>
	<body>
		<ul>
		    <li>
		        <div>
		            <img src="../img/0.JPG"/>
		            <img src="../img/0.JPG"/>
		        </div>
		    </li>
		    <li>
		        <div>
		            <img src="../img/0.JPG"/>
		            <img src="../img/0.JPG"/>
		        </div>
		    </li>
		    <li>
		        <img src="../img/colon.JPG" id="img1"/>
		    </li>
		    <li>
		        <div>
		            <img src="../img/0.JPG"/>
		            <img src="../img/0.JPG"/>
		        </div>
		    </li>
		    <li>
				<div>
		            <img src="../img/0.JPG"/>
		            <img src="../img/0.JPG"/>
		        </div>
		    </li>
		    <li>
		        <img src="../img/colon.JPG" id="img2"/>
		    </li>
		    <li>
		        <div>
		            <img src="../img/0.JPG"/>
		            <img src="../img/0.JPG"/>
		        </div>
		    </li>
		    <li>
		        <div>
		            <img src="../img/0.JPG"/>
		            <img src="../img/0.JPG"/>
		        </div>
		    </li>
		</ul>
		
		<script type="text/javascript">
			function $( v ){
				if( typeof v === 'function' ){
					window.onload = v;
				} else if ( typeof v === 'string' ) {
					return document.getElementById(v);
				} else if ( typeof v === 'object' ) {
					return v;
				}
			}
			
			
			var aDiv = document.getElementsByTagName('div');
			var oDate = new Date();
			
			function addZ(a){return a<10 ? '0'+a : ''+a;}
			// 获取得到的时间
			var str1 = addZ(oDate.getHours()) + addZ(oDate.getMinutes()) + addZ(oDate.getSeconds());
			//这里时间的数字为6位
			for(var i = 0;i < 6; i++){
				i % 2 == 0 ? twoPic(aDiv[i],str1.charAt(i),nextNumS) : twoPic(aDiv[i],str1.charAt(i), nextNumG);
			}
			function twoPic(nDiv, fNum, nFn){
				var aImg = nDiv.getElementsByTagName('img')
				aImg[0].src = '../img/' + fNum + '.JPG';
				aImg[1].src = '../img/' + nFn(Number(fNum)) + '.JPG';
			}
			function nextNumG(a){  //时分秒的个位数的下一位数
				return a + 1 > 9 ? 0 : a +1;
			}
			function nextNumS(a){  //时分秒的十位数的下一位数
				return a + 1 > 5 ? 0 : a +1;
			}
			setInterval(showTime, 1000);
			function showTime(){
				$('img1').src= $('img2').src='../img/colon0.JPG';
				var oDate = new Date()
				var str2 = addZ(oDate.getHours()) + addZ(oDate.getMinutes()) + addZ(oDate.getSeconds());
				for(var i = 0;i < 6; i++){
					i % 2 == 0 ? changePic(str1.charAt(i),str2.charAt(i),aDiv[i],nextNumS,str2) :changePic(str1.charAt(i),str2.charAt(i),aDiv[i],nextNumG,str2);
				}
				str1 = str2;  //更新原来获取的时间
				setTimeout(function(){  //每隔0.5秒切换一下':'图片，出现一闪一闪的效果
					$("img1").src = $("img2").src = '../img/colon.JPG';
				},500)
			}	
			// 判断当前时间和下一秒是否相等来切换图片
			function changePic(fNum, nNum, nDiv, nFn, endTime){
				if(fNum != nNum){
					var aImg = nDiv.getElementsByTagName('img')
					doMove(nDiv, 'top',10 ,-172);
					//172px每30毫秒移动10px，移动大概需要用500多毫秒，因此下面延时计时器时间应该在600-1000毫秒之间
					setTimeout(function(){
						aImg[0].src="../img/" + nNum + '.JPG'; //23:59:59时下一秒的图片皆为0
						aImg[1].src = endTime === '235959' ? '../img/' + 0 + '.JPG': '../img/' + nFn(Number(nNum)) + '.JPG' ;
						nDiv.style.top = 0 + 'px';
					}, 900);
				}
			}
			
			
			
			function getStyle( obj, attr ){
				return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle( obj )[attr];
			}
			function doMove ( obj, attr, dir, target, endFn ) {
				dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
				clearInterval( obj.timer );
				obj.timer = setInterval(function () {
					var speed = parseInt(getStyle( obj, attr )) + dir;	// 步长
					if ( speed > target && dir > 0 ||  speed < target && dir < 0  ) {
						speed = target;
					}
					obj.style[attr] = speed + 'px';
					if ( speed == target ) {
						clearInterval( obj.timer );
						endFn && endFn();
					}
				}, 30);
			}
		</script>
	</body>
</html>

DOM曼珠沙华

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯 js实现动画时钟

效果图：是图片实现的，根据时间动态切换图片素材是这样：直接看代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>clock</title> <style type="text/css"> *{ margin: 0; padding: 0; } li{ width: 122
复制链接

扫一扫