成品-结合doMove的时间变化

最新推荐文章于 2024-07-29 08:57:46 发布

weixin_34143774

最新推荐文章于 2024-07-29 08:57:46 发布

阅读量135

点赞数

文章标签： c/c++

原文链接：https://juejin.im/post/5b6738156fb9a04f951d3c88

版权


$(function(){

//wrap包裹div
var oWrap = $('wrap');
setOrdered( oWrap,'div',0 );
oWrap.style.width = 122*9 + 'px';
oWrap.style.height = 172 + 'px';
oWrap.style.overflow = 'hidden';



//手动选择两个img的父标签
var allDiv = oWrap.getElementsByTagName('div');
var oDiv = [allDiv[0],allDiv[1],allDiv[3],allDiv[4],allDiv[6],allDiv[7]];




//divLength = oDiv.length保存长度值，避免每次for都操作DOM
//每次进来创建img并插入对应的div中
var divLength = oDiv.length;
for(var i=0; i<divLength; i++){
	var chImg = document.createElement('img');
	chImg.setAttribute('src','img/0.jpg');
	oDiv[i].append(chImg);
	oDiv[i].style.width = 122 + 'px';
}



var oImg1 = [];
var oImg2 = [];

for(var i=0; i<divLength; i++){
	var img1 = oDiv[i].getElementsByTagName('img')[0];
	var img2 = oDiv[i].getElementsByTagName('img')[1];
	oImg1.push(oDiv[i].getElementsByTagName('img')[0]);
	oImg2.push(img2);
}

var oImgLength = oImg1.length;







var myDate = new Date();
var myHours = myDate.getHours();
var myMon = myDate.getMinutes();
var mySec = myDate.getSeconds();
var str = toTwo(myHours)+toTwo(myMon)+toTwo(mySec);

var oldStr = parseInt( str );
for(var i=0; i<oImgLength; i++){
	oImg1[i].src = 'img/'+ str.charAt(i) +'.jpg';
}


timeTrans();
function timeTrans(){




	setTimeout(function timer(){



		myDate = new Date();
		myHours = myDate.getHours();
		myMon = myDate.getMinutes();
		mySec = myDate.getSeconds();

		str = toTwo(myHours)+toTwo(myMon)+toTwo(mySec);
		var newStr = parseInt(str);

		fn(5,str);

		var thStatus = [];
		for(var i=6,len=1; i>len; i--){
			var a = 1, j = i;
			while(j>0){
				a *= 10;
				j--;
			}

			thStatus.push( parseInt(newStr%a/a*10) - parseInt(oldStr%a/a*10) );

		}




		for( var i=0,len = thStatus.length; i<len; i++ ){
			if( thStatus[i] != 0 ){
				fn(i,str);
			}
		}



		oldStr = newStr;


		setTimeout(timer,1000);
	},0);




}

	function fn(i,str){
		oImg2[i].src = 'img/'+ str.charAt(i) +'.jpg';

		doMove(oDiv[i],'top',15,-172,0,30,function(){
			oImg1[i].src = 'img/'+ str.charAt(i) +'.jpg';
			oDiv[i].style.top = 0;
		});

	}


});



function toTwo(n){
	return n < 10 ? '0'+n : ''+n;
}


function setOrdered(parent,childType,margins){
	parent.style.position = 'absolute';

	var childEle = parent.getElementsByTagName(childType);
	var childAttr = parseInt( getStyle( childEle[0],'width' ) );
	var chLength = childEle.length;
	for(var i=0; i<chLength; i++){
		childEle[i].style.position = 'absolute';
		childEle[i].style.left = (childAttr+margins)*i+ 'px';
	}

}


复制代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>

<style>
	*{
		margin: 0;
		padding: 0;
	}

	div{
		float: left;
	}

	img{ float: left; }

</style>

</head>
<body>


<div id="wrap">
	
	<div><img src="img/0.jpg"></div>
	<div><img src="img/0.jpg"></div>
	<div><img src="img/colon.jpg"></div>
	<div><img src="img/0.jpg"></div>
	<div><img src="img/0.jpg"></div>
	<div><img src="img/colon.jpg"></div>
	<div><img src="img/0.jpg"></div>
	<div><img src="img/0.jpg"></div>

</div>



<script src="getId.js"></script>
<script src="doMove.js"></script>
<script src="main.js"></script>

</body>
</html>
复制代码

需求实现一个有图片展示的“电子时钟”，要求时间变化对应的数字要向上滚动，也就是说向上滚动变化时间

实现思路 分三块，
1.判断时间是否变化了（仅仅做判断）
2.根据判断来执行动画函数
3.给动画函数传参

首先涉及到滚动就需要2个图片来实现，一上一下（如图），在滚动停止后需要把上面的图片地址改为下面的再把两个图片回复原位（定回来，不滚），这样视觉上就是滚动了一次，实际上还做了一步归位的动作，人眼看不出来。第一次的滚动用doMove实现，第二步赋值就是把被隐藏的图片1地址改成看得见的图片二的地址。第三步回复原位，直接把父标签的top值赋0。这是动画部分

参数部分，每次定时器获取一次新的日期值，保存成字符串类型存起来str，然后拿一个数字变化了，就把这个数字对应的str那一位传给动画函数。

判断部分，实现原理就是，保存两个值，一个上一秒的时间值a和本次的时间值b，把它们逐位减，再把减得的值push进数组，后面就判断，如果数组里的某位值不为0就说明它变了，那就调用相关函数。

难点

怎样知道最右位已经走了10秒呢，又怎样知道它还差几秒就到十，那又怎样知道右数第三张的变化呢，是不是要写一堆if，怎样实现才能优雅一点

难点解决方案就是换个思路，就成了上面我写的那样。我不可能写一堆的if判断，那样劳民伤财，如果直接if值为0就变化也不行，因为如果我分钟是0那么岂不是我小时哪里要最少动10分钟，于是乎，我想起了学c语言时用到的一个方法，就是状态保存，根据状态来改值，0为不变，非0为变化。

截图

备注：看看有什么入门的算法书看看知识源于积累

转载于:https://juejin.im/post/5b6738156fb9a04f951d3c88

weixin_34143774

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
成品-结合doMove的时间变化

$(function(){//wrap包裹divvar oWrap = $('wrap');setOrdered( oWrap,'div',0 );oWrap.style.width = 122*9 + 'px';oWrap.style.height = 172 + 'px';oWrap.style.overflow = 'hidden';//////手动选择两个img的父...
复制链接

扫一扫