忽然想到曾经遇到的一个案例：
在页面上绘制随机数量的圆并填充随机色，但鼠标点击圆时该圆逐渐放大，同时透明度降低，直至消失。
在这里用代码重现下，简单说下步骤：
- 绘制页面：
- 生成随机数，根据随机数生成随机颜色
- 利用svg绘图技术在页面绘制随机数量的圆
- 将圆填充随机色
- JS事件：
为每个圆绑定单击事件
创建定时器
代码：
- 生成随机数和随机颜色方法
/*获取指定范围内的随机数字*/
function randomNum(min,max){
var n=Math.random()*(max-min)+min;
return Math.floor(n)
}
/*生成随机色*/
function randomColor(min,max){
var r=randomNum(min,max);
var g=randomNum(min,max);
var b=randomNum(min,max);
var a=Math.random();
return `rgba(${r},${g},${b},${a})`;
}
- 利用svg绘图
html:
<svg id="svg" width="1000px" height="500px"></svg>
JavaScript:
var svg=document.getElementById("svg");
for(var i=0;i<50;i++){
//创建圆元素
var c=document.createElementNS("http://www.w3.org/2000/svg","circle");
c.setAttribute("r",randomNum(10,80));
c.setAttribute("cx",randomNum(0,800));
c.setAttribute("cy",randomNum(0,400));
c.setAttribute("fill",randomColor(0,255));
c.setAttribute("fill-opacity",Math.random());
svg.appendChild(c)
//绑定单击事件
c.onclick=function(){
var that=this;
//设置循环定时器
var timer=setInterval(function(){
var r=that.getAttribute("r");
r*=1.05;
that.setAttribute("r",r);
var fillOpac=that.getAttribute("fill-opacity");
fillOpac*=0.9;
that.setAttribute("fill-opacity",fillOpac);
//设置循环定时器停止条件
if(fillOpac<0.001){
clearInterval(timer);
timer=null;
svg.removeChild(that);
}
},20)()
}
}
效果图:
效果
