如何简化下面的代码并且找出规律

zebds_regex 2017-03-23 05:42:20
规律是:同一个角度散开，然后同一个角度收回，看下面代码吧，假如有N个DIV，应该怎么简化和改写代码？
<head>
<style>
#img{width:0px; height:766px; position:absolute; top:0; left:0;}
#div1{width:0px; height:0px; background:#CCC; position:absolute; left:0; top:0;}
#div2{width:0px; height:0px; background:#000; position:absolute; left:500; top:500;}
</style>
<title>无标题文档</title>
<script>
window.onload=function()
{
var oDiv=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
function equally(w,h)
{
var timer=null;
var timer2=null;
var timer3=null;
var timer4=null;
var i=0;
var j=0;
var l=0;
var t=0;
var n=w;
var m=h;
timer=setInterval(function(){
i++;
j++;
oDiv.style.width=i+'px';
oDiv.style.height=j+'px';
if(i==w)
{
clearInterval(timer);
i=0;
j=0;
timer2=setInterval(function(){
w--;
h--;
l++;
t++;
oDiv.style.width=w+'px';
oDiv.style.height=h+'px';
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
if(w==0)
{
clearInterval(timer2)
l=0;
t=0;
timer3=setInterval(function(){
i++;
j++;
n--;
m--;
oDiv2.style.width=i+'px';
oDiv2.style.height=j+'px';
oDiv2.style.left=n+'px';
oDiv2.style.top=m+'px';
if(n==0)
{
clearInterval(timer3)
var k=500;
var f=500;
timer4=setInterval(function(){
k--;
f--;
oDiv2.style.width=k+'px';
oDiv2.style.height=f+'px';
if(k==0)
{
clearInterval(timer4)
}
},10)
}
},10)
}
},10)
}
},10)
}
equally(500,500)

}

</script>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</htm>
分数不多了，求高手解答一下，谢谢！
...全文
215 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
天际的海浪 2017-03-23
  • 打赏
  • 举报
 回复 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
<style type="text/css">
#div1{width:0px; height:0px; background:#CCC; position:absolute; left:0px; top:0px;}
#div2{width:0px; height:0px; background:#000; position:absolute; left:500px; top:500px;}
#div3{width:0px; height:0px; background:#ff0; position:absolute; left:0px; top:0px;}
</style>
<title>无标题文档</title>
<script>

function animate(obj,css,time,callbreak) {
	var fps = 1000/60;
	var tsp = Math.round(time/fps);
	var tse = 0;
	var yp = {};
	var pi = {};
	var sty = obj.currentStyle || getComputedStyle(obj,null);
	for (var n in css){
		css[n] = parseFloat(css[n]);
		yp[n] = parseFloat(sty[n]);
		pi[n] = sty[n].replace(/^[\-\d\.]+/,"");
	}
	var timer = setInterval(function(){
		if (++tse > tsp) {
			clearInterval(timer);
			callbreak && callbreak();
			return;
		}
		for (var n in css)
			obj.style[n] = yp[n]+(css[n]-yp[n])*(tse/tsp) + pi[n];
	}, fps);
	return timer;
}

window.onload = function() {
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	var oDiv3 = document.getElementById('div3');
	function loop() {
		animate(oDiv1,{width:500,height:500},5000,function () {
			animate(oDiv1,{left:500,top:500,width:0,height:0},5000,function () {
				animate(oDiv2,{left:0,top:0,width:500,height:500},5000,function () {
					animate(oDiv2,{width:0,height:0},5000,function () {
						animate(oDiv3,{width:500,height:500},5000,function () {
							animate(oDiv3,{left:500,top:500,width:0,height:0},5000,function () {
								oDiv1.style.left = "0px";
								oDiv1.style.top = "0px";
								oDiv2.style.left = "500px";
								oDiv2.style.top = "500px";
								oDiv3.style.left = "0px";
								oDiv3.style.top = "0px";
								loop();
							});
						});
					});
				});
			});
		});
	}
	loop();
}


</script>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</htm>



</body>
</html>
zebds_regex 2017-03-23
  • 打赏
  • 举报
 回复
引用 3 楼 jslang 的回复:
与其说是要封装你的代码，还不如写个通用性好的动画函数。 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
<style type="text/css">
#div1{width:0px; height:0px; background:#CCC; position:absolute; left:0px; top:0px;}
#div2{width:0px; height:0px; background:#000; position:absolute; left:500px; top:500px;}
#div3{width:0px; height:0px; background:#ff0; position:absolute; left:0px; top:0px;}
</style>
<title>无标题文档</title>
<script>

function animate(obj,css,time,callbreak) {
	var fps = 1000/60;
	var tsp = Math.round(time/fps);
	var tse = 0;
	var yp = {};
	var pi = {};
	var sty = (obj.currentStyle||getComputedStyle(obj,null));
	for (var n in css){
		css[n] = parseFloat(css[n]);
		yp[n] = parseFloat(sty[n]);
		pi[n] = sty[n].replace(/^[\-\d\.]+/,"");
	}
	var timer = setInterval(function(){
		if (++tse > tsp) {
			clearInterval(timer);
			callbreak && callbreak();
			return;
		}
		for (var n in css)
			obj.style[n] = yp[n]+(css[n]-yp[n])*(tse/tsp) + pi[n];
	}, fps);
	return timer;
}

window.onload = function() {
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	var oDiv3 = document.getElementById('div3');
	animate(oDiv1,{width:500,height:500},5000,function () {
		animate(oDiv1,{left:500,top:500,width:0,height:0},5000,function () {
			animate(oDiv2,{left:0,top:0,width:500,height:500},5000,function () {
				animate(oDiv2,{width:0,height:0},5000,function () {
					animate(oDiv3,{width:500,height:500},5000,function () {
						animate(oDiv3,{left:500,top:500,width:0,height:0},5000,function () {
						});
					});
				});
			});
		});
	});
}


</script>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</htm>
后面我也写出了,但是不知道怎么循环,让DIV-DIV3,循环出现!
zebds_regex 2017-03-23
  • 打赏
  • 举报
 回复
引用 2 楼 jslang 的回复:
你直接用jquery的 animate()动画多好
可以控制速度，但好像不能循环吧
zebds_regex 2017-03-23
  • 打赏
  • 举报
 回复
引用 2 楼 jslang 的回复:
你直接用jquery的 animate()动画多好
JQ的好像不太好，第一不能循环，第二不能控制速度！
天际的海浪 2017-03-23
  • 打赏
  • 举报
 回复
与其说是要封装你的代码，还不如写个通用性好的动画函数。 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
<style type="text/css">
#div1{width:0px; height:0px; background:#CCC; position:absolute; left:0px; top:0px;}
#div2{width:0px; height:0px; background:#000; position:absolute; left:500px; top:500px;}
#div3{width:0px; height:0px; background:#ff0; position:absolute; left:0px; top:0px;}
</style>
<title>无标题文档</title>
<script>

function animate(obj,css,time,callbreak) {
	var fps = 1000/60;
	var tsp = Math.round(time/fps);
	var tse = 0;
	var yp = {};
	var pi = {};
	var sty = (obj.currentStyle||getComputedStyle(obj,null));
	for (var n in css){
		css[n] = parseFloat(css[n]);
		yp[n] = parseFloat(sty[n]);
		pi[n] = sty[n].replace(/^[\-\d\.]+/,"");
	}
	var timer = setInterval(function(){
		if (++tse > tsp) {
			clearInterval(timer);
			callbreak && callbreak();
			return;
		}
		for (var n in css)
			obj.style[n] = yp[n]+(css[n]-yp[n])*(tse/tsp) + pi[n];
	}, fps);
	return timer;
}

window.onload = function() {
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	var oDiv3 = document.getElementById('div3');
	animate(oDiv1,{width:500,height:500},5000,function () {
		animate(oDiv1,{left:500,top:500,width:0,height:0},5000,function () {
			animate(oDiv2,{left:0,top:0,width:500,height:500},5000,function () {
				animate(oDiv2,{width:0,height:0},5000,function () {
					animate(oDiv3,{width:500,height:500},5000,function () {
						animate(oDiv3,{left:500,top:500,width:0,height:0},5000,function () {
						});
					});
				});
			});
		});
	});
}


</script>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</htm>
天际的海浪 2017-03-23
  • 打赏
  • 举报
 回复
你直接用jquery的 animate()动画多好
zebds_regex 2017-03-23
  • 打赏
  • 举报
 回复
我自己对代码修改了一下，并且增加了一个Div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1{width:0px; height:0px; background:#CCC; position:absolute; left:0; top:0;} #div2{width:0px; height:0px; background:#000; position:absolute; left:500; top:500;} #div3{width:0px; height:0px; background:#FF0; position:absolute; left:0; top:0;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> window.onload=function() { var oDiv=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); var oDiv3=document.getElementById('div3'); function equally(w,h) { var timer=null; var timer2=null; var timer3=null; var timer4=null; var timer5=null; var timer6=null; var i=0; var j=0; var n=w; var m=h; timer=setInterval(function(){ i++; j++; oDiv.style.width=i+'px'; oDiv.style.height=j+'px'; if(i==w) { clearInterval(timer); i=0; j=0; w=n; h=m; timer2=setInterval(function(){ w--; h--; i++; j++; oDiv.style.width=w+'px'; oDiv.style.height=h+'px'; oDiv.style.left=i+'px'; oDiv.style.top=j+'px'; if(w==0) { clearInterval(timer2) i=0; j=0; w=n; h=m; timer3=setInterval(function(){ i++; j++; w--; h--; oDiv2.style.width=i+'px'; oDiv2.style.height=j+'px'; oDiv2.style.left=w+'px'; oDiv2.style.top=h+'px'; if(w==0) { clearInterval(timer3) i=0; j=0; w=n; h=m; timer4=setInterval(function(){ i++; j++; w--; h--; oDiv2.style.width=w+'px'; oDiv2.style.height=h+'px'; if(w==0) { clearInterval(timer4); i=0; j=0; w=n; h=m; timer5=setInterval(function(){ i++; j++; oDiv3.style.width=i+'px'; oDiv3.style.height=j+'px'; if(i==w) { clearInterval(timer5) i=0; j=0; w=n; h=m; timer6=setInterval(function(){ w--; h--; i++; j++; oDiv3.style.width=w+'px'; oDiv3.style.height=h+'px'; oDiv3.style.left=i+'px'; oDiv3.style.top=j+'px'; if(w==0) { clearInterval(timer6) } },10) } },10) } },10) } },10) } },10) } },10) } equally(500,500) } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </body> </html> 接下来怎么改，才能封装起来？
黑马程序员-美多商城完整项目代码.zip
黑马程序员 大事件Springboot3+vue3项目
M800VM80V系列 编程说明书(L系) ib1501636-1501637chng.pdf
M800VM80V系列 编程说明书(L系) ib1501636-1501637chng
新年烟花代码HTML5-下载即用.zip
源码下载地址： https://pan.quark.cn/s/a9b188c0f76b FireWorks 基于Html+Canvas写的一个2023年3D跨年烟花代码、可以自己修改字以及音乐 image image image
基于 Streamlit + LangChain + DeepSeek 构建的智能知识库问答应用，支持文档上传、向量库构建和智能问答
网上关于LLM大模型构建知识库的理论知识挺多的，但能跑通的代码比较少。此资源对LLM大模型的学习有很大的帮忙。
黑马程序员的Linux网络编程学习记录.zip
黑马程序员 大事件Springboot3+vue3项目
JavaScript

87,990

社区成员

224,684

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章