要求：
使用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>
<!-- -->
2737
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
