JavaScript实现弹幕功能

最新推荐文章于 2024-04-16 09:35:27 发布

lionliu0519

最新推荐文章于 2024-04-16 09:35:27 发布

阅读量1.8k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_51354601/article/details/130419982

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <button>发送</button>
  </body>
  <script>
    let ipt = document.querySelector("input")
    let btn = document.querySelector("button")
  //  按下enter键发送弹幕
    ipt.onkeydown = function(e){
        if(e.keyCode == 13){
            let val = ipt.value;
            let span = document.createElement("span")
            span.innerHTML = val
            ipt.value = "";
            // 绝对定位
            span.style.position = "absolute"
            // 随机出现的位置
            span.style.left = document.documentElement.clientWidth + "px"
            // 随机出现的高度, 不能超出屏幕的高度, 也就是不能超出body的高度, 也就是不能超出documentElement的高度
            span.style.top = Math.floor(Math.random()*document.documentElement.clientHeight) + "px"
            // 插入到body中, 但是在第一个元素之前, 也就是在body中的第一个元素之前
            document.body.prepend(span)

            let timer = setInterval(()=>{
                span.style.left = parseInt(span.style.left) - 10 + "px"
                if(parseInt(span.style.left)<-1*span.offsetWidth){
                    span.remove()
                    clearInterval(timer)
                }
            },50)
        }
    }

    // btn.onclick = function(){
    //     let val = ipt.value;
    //     let span = document.createElement("span")
    //     span.innerHTML = val
    //     ipt.value = "";
    //     span.style.position = "absolute"
    //     span.style.left = document.documentElement.clientWidth + "px"
    //     span.style.top = Math.floor(Math.random()*document.documentElement.clientHeight) + "px"
    //     document.body.prepend(span)

    //     let timer = setInterval(()=>{
    //         span.style.left = parseInt(span.style.left) - 10 + "px"
    //         if(parseInt(span.style.left)<-1*span.offsetWidth){
    //             span.remove()
    //             clearInterval(timer)
    //         }
    //     },50)
       

    // }
  </script>
</html>