如何实现鼠标点击出现文字?

如何实现鼠标点击屏幕出现文字?

请粘贴复制以下代码到编辑器查看效果  :)

    (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>里面:)

posted on 2021-12-05 17:30  久居我梦  阅读(390)  评论(0编辑  收藏  举报

导航