注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

记录~~~

Stay Hungry. Stay Foolish.

 
 
 

日志

 
 

一个JS题  

2013-01-29 19:03:24|  分类: 前端知识 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

要求:

使用JS写出一个自定义的箱子类,该箱子具有属性:高、宽、位置、颜色;现创造出两个箱子,位置随即,其宽高在100-200px之间随即生成,并设置其在屏幕上左右弹动。


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{margin: 0;padding: 0}

</style>

</head>

<body>

<script type="text/javascript">


function box(obj){

var dv = document.createElement(obj);

document.body.appendChild(dv);

dv.style.position="absolute";

dv.style.height= Math.floor(Math.random()*100)+100+"px";

dv.style.width= Math.floor(Math.random()*100)+100+"px";

dv.style.backgroundColor="red";

return dv;

}


var step=5;

var box1 = new box("div");

box1.id="box1";

box1.style.backgroundColor="#ccc";

box1.style.left="0px";

var w = document.body.scrollWidth;

var h_a=parseInt(box1.style.height);


mov_a();

var tag_a="r";


function mov_a(){

if(parseInt(box1.style.left)+parseInt(box1.style.width)>=w){

tag_a="l";

}

if(parseInt(box1.style.left)<=0){

tag_a="r";

}


if(tag_a=="l"){


box1.style.left=parseInt(box1.style.left)-step+"px";

}

if(tag_a=="r"){


box1.style.left=parseInt(box1.style.left)+step+"px";

}

setTimeout(mov_a,80);

}

///box2


var box2 = new box("div");

box2.id="box2";

box2.style.backgroundColor="#000";

box2.style.left="0px";

box2.style.top=h_a+5+"px";

var w = document.body.scrollWidth;

mov_b();

var tag_b="r";

function mov_b(){


if(parseInt(box2.style.left)+parseInt(box2.style.width)>=w){


tag_b="l";

}


if(parseInt(box2.style.left)<=0){

tag_b="r";

}



if(tag_b=="l"){


box2.style.left=parseInt(box2.style.left)-step+"px";

}

if(tag_b=="r"){


box2.style.left=parseInt(box2.style.left)+step+"px";

}



setTimeout(mov_b,50);

}

</script>

</body>

</html>


<!-- -->

  评论这张
 
阅读(195)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018