JS实现简单弹幕效果

最新推荐文章于 2023-05-29 08:50:51 发布

不会写代码的小刘c

最新推荐文章于 2023-05-29 08:50:51 发布

阅读量229

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_46783393/article/details/129923368

版权

直接上代码

<!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>
<!-- 
     实现简单弹幕效果
 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    #main {
        width: 600px;
        height: 400px;
        border: 2px solid black;
        position: relative;
    }
    
    input {
        width: 400px;
        height: 30px;
        margin-top: 10px;
    }
    
    button {
        width: 80px;
        height: 30px;
    }
    
    p {
        position: absolute;
        left: 600px;
    }
</style>

<body>
    <div id="main">
        <p></p>
    </div>
    <input type="text" id="txt">
    <button id="btn">发送弹幕</button>
    <script>
        let txt = document.querySelector("#txt");
        let btn = document.querySelector("#btn");
        let main = document.querySelector("#main");
        let timer = null;

        btn.addEventListener('click', () => {
            let p = document.createElement('p');
            clearInterval(p.timer);
            p.timer = setInterval(function() {
                let x = p.offsetLeft - 3;
                if (x == 0) {
                    clearInterval(p.timer);
                    main.removeChild(p);
                }
                //设置当前位置
                p.style.left = x + 'px';
            }, 20);

            let y = Math.ceil(Math.random() * 390);
            p.style.top = y + 'px';
            p.innerText = txt.value;
            main.appendChild(p);
            txt.value = "";

        });
    </script>
</body>

</html>

效果如下：