刷新页面随机出现方块

最新推荐文章于 2021-11-11 18:59:04 发布

_isHF

最新推荐文章于 2021-11-11 18:59:04 发布

阅读量238

点赞数

本文链接：https://blog.youkuaiyun.com/wanghuifang1223/article/details/78997804

版权

突然发现这是一个18年的草稿箱。。。每次刷新页面方块都随机出现在不同的位置

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
     #box{
       width: 400px;
       height: 400px;
       border: #FFC0CB solid 2px;
       position: relative;
       overflow: hidden;
     }
    .two{
     position: relative;
    }
     .one{
       position: absolute;
       left: 0;
       top: 0;
     }
    
  </style>
 </head>
 <body>
   <div id="box">
     <div id="food"></div>
   </div>
   <script>
     var box = document.getElementById("box");
     var food = document.getElementById("food");
         box.className="two";
         food.style.width="20px";
         food.style.height="20px";
         food.style.background="red";
     food.style.left = Math.floor(19*Math.random()*19)+"px";  
         food.style.top = Math.floor(19*Math.random()*19)+"px";
         food.className="one";
   </script>
 </body>
</html>