本文介绍了一个使用JavaScript实现的自定义箱子类，该类具备高度、宽度、位置和颜色等属性。通过该类创建了两个随机位置、大小在100到200px之间的箱子，并实现了它们在屏幕上的左右弹动效果。
要求：
使用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>
<!-- -->
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
