jzm2842688813

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

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

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

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

分类:

技术点:

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-01-27
  • 2021-08-27
  • 2021-10-02
猜你喜欢
  • 2021-11-24
  • 2021-12-25
  • 2021-10-25
  • 2022-12-23
  • 2022-12-23
  • 2021-09-03
  • 2022-12-23
相关资源
相似解决方案