svg-动态创建圆，颜色随机，点击其中一个变大减淡，停止清除定时器

最新推荐文章于 2022-12-16 13:10:42 发布

车厘子：）

最新推荐文章于 2022-12-16 13:10:42 发布

阅读量262

点赞数

文章标签： svg-动态创建圆，颜色随机，点击其中一个变大减淡，停止清除定时器

本文链接：https://blog.csdn.net/qq_37155370/article/details/102548365

版权

svg-动态创建圆

<!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>
  <style>
    body {
      text-align: center
    }

    svg {
      background: #ccc
    }
  </style>
</head>

<body>
  <svg id="s3" width="500" height="400">
    <circle cx="250" cy="200" r="100" fill="#f63" id="c3"></circle>
  </svg>
  <script>
    // heml创建
    var c3 = document.getElementById("c3");
    c3.onclick = function () {
      var r = c3.getAttribute("r");
      r *= 1.05;
      c3.setAttribute("r", r);
    }

    // 动态创建元素圆左上角
    // 1.创建圆
    var c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    // 2.添加属性
    c.setAttribute("r", 10);
    c.setAttribute("cx", 200);
    c.setAttribute("cy", 100);
    c.setAttribute("fill", "#ff0");
    // 3.将圆添加到画布
    var s3 = document.getElementById("s3");
    s3.appendChild(c)


	//开始
    // 功能：创建30个大小不同，颜色不同，位置不同，透明不同 圆
    // 0.获取画布
    // 1：创建循环执行30次
    for (var i = 0; i < 50; i++) {
      // 2.创建圆形
      var c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
      // 3.添加属性 r cx cy fill
      c.setAttribute("r", 5 + Math.random() * 10);
      c.setAttribute("cx", 1 + Math.random() * 500);
      c.setAttribute("cy",1 + Math.random() * 400);
      c.setAttribute("fill-opacity",Math.random());
      c.setAttribute("fill",rc());
      // 4.将圆追加画布
      s3.appendChild(c);
      // 5.为圆绑定点击事件
      c.onclick=function(){
        // 技巧当前元素只能点击一次
        // 1.第一次点击正常执行函数
        // 2.在函数中将点击事件清空
        this.onclick=null;
        // 5.1圆变大修改半径
        // 5.2创建定时器修改r*1.05;
        var t=setInterval(()=>{
          var r=this.getAttribute("r");
          r*=1.05;
          this.setAttribute("r",r)
          // 变淡
          // 5.3圆变淡修改透明度 fill-opacity
          var p=this.getAttribute("fill-opacity");
          p*=0.5;
          this.setAttribute("fill-opacity",p)
          // 清除
          if(p<0.1){
            clearInterval(t);//停止定时器
            s3.removeChild(this);//删除元素
          }
        },150)
      }  
    }
    // 颜色取随机
    function rc(){
      var r=Math.floor(Math.random()*256);
      var g=Math.floor(Math.random()*256);
      var b=Math.floor(Math.random()*256);
      return `rgb(${r},${g},${b})`;
    }
  </script>
</body>

</html>