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

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>
分数不多了，求高手解答一下，谢谢！
...全文
219 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> 接下来怎么改，才能封装起来？
用Python解中考数学规律题
本文介绍了如何使用Python解析中考数学中的规律题，通过实际案例分析解题思路，包括计算前几项、发现规律和代码实现，展示了利用编程简化复杂计算的方法。
NYOJ找规律
本文介绍了一个经典的找规律问题，通过给定的前五个数字找出其背后的等差、等比或斐波那契规律，并据此预测接下来的五个数字。文章提供了完整的C++代码实现，包括输入处理、规律判断及输出结果。
打表找规律简化编程
本文解析了洛谷P1403题目，介绍了如何通过筛法求解大规模数据下的数学问题，提供了三种不同的C++代码实现，包括直接求和、使用数组记录约数个数以及简化筛法。
杭电ACM OJ 1021 Fibonacci Again 斐波那次数列 发现规律 简化操作
本文介绍了一道ACM竞赛题目“FibonacciAgain”的解决思路。该题要求计算特定斐波那契数列中第n项是否能被3整除，并通过观察规律简化计算过程。
为什么6位验证码大多很有规律？
本文探讨了6位验证码大多有规律的原因。验证码设计需平衡安全性与易用性，其有规律可能是为简化用户输入、受伪随机算法限制、用户感知偏差或开发者测试代码残留等。系统也会通过多种防护降低风险。现代系统采用混合类型、动态难度、无感验证等策略优化验证码。
JavaScript

87,990

社区成员

224,684

社区内容

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

加载中

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

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

+ 用AI写文章