小记-结合doMove的时间变化

最新推荐文章于 2022-04-15 16:38:48 发布

weixin_33881041

最新推荐文章于 2022-04-15 16:38:48 发布

阅读量150

点赞数

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

版权

HTML

<!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>
复制代码

主要js


$(function(){

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


var allImg = document.getElementsByTagName('img');
var oImg = [allImg[0],allImg[1],allImg[3],allImg[4],allImg[6],allImg[7]];
var allDiv = oWrap.getElementsByTagName('div');
var oDiv = [allDiv[0],allDiv[1],allDiv[3],allDiv[4],allDiv[6],allDiv[7]];

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';
}





timer();
function timer(){




	setTimeout(function timer(){



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


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



		for(var i=0; i<oImg.length; i++){
			console.log(divLength);
			fn(5,str);
			oDiv[5].getElementsByTagName('img')[1].src = 'img/'+ str.charAt(i) +'.jpg';
		}



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




}

	function fn(i,str){
		doMove(oDiv[i],'top',15,-172,0,30,function(){
			oDiv[i].getElementsByTagName('img')[0].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';
	}

}


复制代码

需求的效果动画

单个实现思路

两个img实现
由于有同步异步的存在，每次会先执行，【更新系统时间取得的值赋给看不见的img】，也就是下面的div，然后执行异步任务的doMove。
doMove位置确定后执行回调函数
回调函数的做的事：【将已经被移上去的img的src替换成当前时间的】【将包裹两个img的div位置恢复原位】
之后本次定时器的任务结束，等待1s再从头执行

备注
这是初步草稿，比较乱，当中用了一个闭包，看看能不能用别的方法

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

weixin_33881041

关注

0
点赞
踩
0

收藏

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

HTML<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title><style> *{ margin: 0; padding: 0; } div{ float: left; } img{ float: ...
复制链接

扫一扫