版权声明：如有文章想转载请联系qq：1289281445 tel：13253311994 https://blog.csdn.net/qq_39458856/article/details/82285635
报错原因：
定时器里面的this指向的window，而window则没有下面用到的函数
解决办法:
在定时器外把需要用的this提前赋值给一个变量
定时器内使用该变量代替this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<svg id="s3" width="800" height="600" style="background-color: yellow">
</svg>
<script>
function rn(max,min) {
var num=Math.random()*(max-min)+min;
return Math.floor(num)
}
function cn(max,min) {
var r=rn(max,min)
var g=rn(max,min)
var b=rn(max,min)
return `rgb(${r},${g},${b})`
}
console.log(rn(0,256))
//创建一个循环30次
var s3=document.getElementById("s3")
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, 800))
c.setAttribute("cy", rn(0, 600))
c.setAttribute("fill", cn(0, 256))
c.setAttribute("fill-opacity", rn(0, 10) * (0.1))
s3.appendChild(c)
c.onclick=function () {
//此处this指向的c
var that=this
//为了防止圆被再次点击，消息监听函数
that.onclick=null
console.log(this)
var x=this.getAttribute("r")
var y=this.getAttribute("fill-opacity")
var t= setInterval(function(){
//定时器里的this为window
x++
y*=0.9
that.setAttribute("r",x)
that.setAttribute("fill-opacity",y)
if(y<0.001){
clearInterval(t)
s3.removeChild(that)
}
},100)
}
}
</script>
</body>
</html>