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