SVG -- [ 五彩小圆点 ]

最新推荐文章于 2024-04-12 16:19:09 发布

chengguxie8582

最新推荐文章于 2024-04-12 16:19:09 发布

阅读量416

点赞数

原文链接：https://my.oschina.net/u/3512197/blog/914294

版权

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      text-align: center;
    }
    svg {
      background: #ddd;
    }
  </style>
</head>
<body>
<h1>SVG -- 五彩小圆点</h1>
<svg id="s9" width="500" height="400">
</svg>
<script>
  for(var i=0; i<30; i++){
    var c = document.createElementNS('http://www.w3.org/2000/svg','circle');
    c.setAttribute('r', rn(10, 80));
    c.setAttribute('cx', rn(0, 500));
    c.setAttribute('cy', rn(0, 400));
    c.setAttribute('fill', rc(0,255));
    c.setAttribute('fill-opacity', Math.random());
    c.onclick = function(){
      var that = this;  //保留this(circle元素)的引用

      //为防止当前圆形再次被点击，应取消其事件监听
      that.onclick = null;

      //启用定时器，让圆形慢慢变大变淡
      var t = setInterval(function(){
        var r = that.getAttribute('r');
        r *= 1.05;
        that.setAttribute('r', r);

        var p = that.getAttribute('fill-opacity');
        p *= 0.9;
        that.setAttribute('fill-opacity',p);
        if(p<0.01){ //圆形几乎已经看不见了
          clearInterval(t);
          s9.removeChild(that); //删除圆形
        }
      },30);
    }
    s9.appendChild(c);
  }


  //random number：返回指定范围内的随机整数
  function rn(min, max) {
    var n = Math.floor(
      Math.random() * (max - min) + min
    );
    return n;
  }
  //random color: 返回指定范围内的随机颜色
  //形如： rgb(x, x, x)
  function rc(min, max) {
    var r = rn(min, max);
    var g = rn(min, max);
    var b = rn(min, max);
    return `rgb(${r},${g},${b})`;
  }
</script>

</body>
</html>

转载于:https://my.oschina.net/u/3512197/blog/914294

chengguxie8582

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SVG -- [ 五彩小圆点 ]

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { ...
复制链接

扫一扫