小球运动

最新推荐文章于 2023-04-14 20:34:03 发布

平凡之的世界

最新推荐文章于 2023-04-14 20:34:03 发布

阅读量178

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/pinfangdeshijie/article/details/108586889

版权

    <!DOCTYPE html>
    <html lang="en">
      <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
 </head>
 <body>
 <script>
      function xiaoqiu(){
// 宽
this.w=Math.floor(Math.random()*100);
// 高
this.h=Math.floor(Math.random()*100);
// 随机三元颜色
this.r=Math.floor(Math.random()*256);
this.g=Math.floor(Math.random()*256);
this.b=Math.floor(Math.random()*256);
// 屏幕宽度
this.top=Math.floor(Math.random()*800)
// 屏幕高度
this.left=Math.floor(Math.random()*1300)
  }
  // 构造函数的原型:xiaoqiu.prototype也是个对象
   // 构造函数的原型 产生小球的方法
    xiaoqiu.prototype.create=function(){
     //  创建div
    var odiv=document.createElement("div")
// 设置样式
odiv.style.width=this.w+"px";
odiv.style.height=this.w+"px";
odiv.style.background="rgb("+this.r+","+this.g+","+this.b+" )";
odiv.style.borderRadius="50%";
odiv.style.position="absolute";
odiv.style.left=this.left+"px";
odiv.style.top=this.top+"px";
  document.body.appendChild(odiv);
}
 setInterval(function(){
// 每次产生的100个小球之前。清空页面
 document.body.innerHTML = ""
for(var i=1;i<=100;i++){
var xq=new xiaoqiu();
xq.create();
}
},1000)
 </script>
 </body>
   </html>

平凡之的世界

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小球运动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title&...
复制链接

扫一扫