如何实现鼠标点击出现文字?
如何实现鼠标点击屏幕出现文字?
请粘贴复制以下代码到编辑器查看效果 :)
(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>里面:)
浙公网安备 33010602011771号