js 点击div生成一个随机圆，点击生成的圆再生成另一个随机圆

于 2022-01-02 23:59:26 发布

阅读量536

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Vue1024/article/details/122282778

html css js jq 专栏收录该内容

36 篇文章

订阅专栏

这篇博客介绍了一个使用JavaScript编写的交互式网页示例，当用户点击一个金色圆形div时，会在页面上生成一个新的随机位置、随机大小和随机颜色的圆形。这个过程可以无限递归，每次点击新生成的圆都会触发相同的功能，为用户创造了一个动态的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js 点击div生成一个随机圆，点击生成的圆再生成另一个随机圆，

<!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>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background: gold;
      border-radius: 50%;
    }
  </style>
</head>

<body>


  <div class="box"></div>


  <script>

    var box = document.getElementsByClassName('box')[0]
    // 给box添加一个点击事件
    box.onclick = function () {
      run(this)
    }


    function run(target) {
      // 复制当前点击的div
      var obj = target.cloneNode()

      obj.style.position = 'absolute'
      obj.style.left = Math.random() * 1900 + 'px'
      obj.style.top = Math.random() * 900 + 'px'
      obj.style.background = 'rgb(' + Math.random() * 255 + ',' + Math.random() * 255 + ',' + Math.random() * 255 + ')'
      var val = Math.random() * 80 + 20 + 'px'
      obj.style.width = val
      obj.style.height = val

      // 给复制的节点添加一个点击事件
      obj.onclick = function () {
        // 把当前点击的节点传入
        run(obj)
      }

      // 把复制的节点放到页面
      document.body.appendChild(obj)
    }

  </script>


</body>

</html>