如何实现鼠标点击出现文字?
如何实现鼠标点击屏幕出现文字?
请粘贴复制以下代码到编辑器查看效果 :)
(function() {
let arr=["富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善"]
let flag=true
document.body.addEventListener(\'click\',function(e) {
if(flag) {
let X=e.pageX; //字体的x坐标
let Y=e.pageY; //字体的y坐标
let curT=Y;
let curF=20; //字体的大小
let curO=1; //opacity
// 随机出现的标题
let title=arr[Math.floor(Math.random()*12)]
let span=document.createElement(\'span\')
span.className=\'idName\'
span.innerText=title
//初始化节点
span.style.position="fixed"
span.style.top=curT+\'px\';
span.style.fontSize=curF+\'px\'
span.style.opacity=curO;
span.style.left=X+\'px\';
document.body.appendChild(span)
let a=document.getElementsByClassName(\'idName\')[0]
// 随机颜色
a.style.color=\'rgb(\'+Math.floor(Math.random()*225)+\',\'+Math.floor(Math.random()*225)+\',\'+Math.floor(Math.random()*225)+\')\'
// console.log(a)
// 开启定时器
this.timer=setInterval(() => {
curT-=10;
curF+=1
curO-=0.1
a.style.top=curT+\'px\';
a.style.fontSize=curF+\'px\'
a.style.opacity=curO;
},50)
setTimeout(() => {
// 清除定时器
clearInterval(this.timer)
document.body.removeChild(a)
flag=true
},500)
flag=false
}
})
})()
//注意请复制到<script></script>里面:)