js随机生成div-点击button按钮生成大小、颜色、位置随机的div（进阶）

心平气荷.

已于 2023-03-23 09:06:19 修改

阅读量1.1k

点赞数 2

分类专栏： JavaScript的练习文章标签： javascript 前端 html

于 2023-03-22 15:53:48 首次发布

本文链接：https://blog.csdn.net/qq_53306713/article/details/129710046

版权

JavaScript的练习专栏收录该内容

21 篇文章 1 订阅

订阅专栏

一、需求说明：

1.页面上有一个按钮，按钮点击时，生成一个大小、位置、颜色随机的div。
2. 点击div，这个div消失

二、步骤

(1)获取页面元素。
(2)按钮点击事件 btn.onclik = function() {}

添加div并把它追加到页面上
生成div随机的宽度高度
封装一个随机色的函数 function randomColor(){}
(3)点击div 所对应的div消失用remove()

三、代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btn">生成一个div</button>
</body>
<script>
  /* 
 一、需求说明：
1.页面上有一个按钮，按钮点击时，生成一个大小、位置、颜色随机的div。
2. 点击div，这个div消失
  */

  var btn = document.getElementById("btn");
  var width = window.innerWidth;//获取浏览器的可视宽度
  var height = window.innerHeight;//获取浏览器的可视高度
  btn.onclick = function () {
    var div = document.createElement("div"); //创建div
    document.body.appendChild(div);          //追加div
    // console.log(div)                      //测试div有没有追加进去
    var w = parseInt(Math.random() * 150); //生成随机宽度
    var h = parseInt(Math.random() * 150);   //生成随机高度
    div.style.width = w + "px";
    div.style.height = h + "px";
    div.style.backgroundColor = randomColor();  //调用randomColor()

    div.style.position = "absolute";
    div.style.left = parseInt(Math.random() * (width - w)) + "px";  //width - w 浏览器的宽度减去随机生成盒子的宽度 
    div.style.top = parseInt(Math.random() * (height - h)) + "px";  //height - h 浏览器的高度减去随机生成盒子的高度

    //点击div，删除点击的div
    div.onclick = function () {
      this.remove();
    }
  }
//封装一个随机色的函数
  function randomColor() {
    var r = parseInt(Math.random() * 256);
    var g = parseInt(Math.random() * 256);
    var b = parseInt(Math.random() * 256);
    var color = "rgb(" + r + "," + g + "," + b + ")";
    return color;
  }
</script>

</html>