使用提示框发弹幕

新的改变

首先，在HTML中写几个标签

    <article>        
             <aside id="aside">我是视频</aside>      
             input type="button" id=" input" value="发送弹幕" onclick="main()">    
     </article>

CSS添加样式

   <style>       
    article {           
        position: relative;         
        width: 1000px;            
        margin-top: 100px;           
        text-align: center;   
        left: 200px;            
        height: 600px;     
        overflow: hidden;
        }
        
     article aside {          
        width: 1000px;           
        height: 500px;          
        background-color: green;        
        font-size: 50px;          
        color: #fff;    
        text-align: center;    
        line-height: 500px;   
         }
     article p {        
        height: 40px;   
        line-height: 40px;      
        position: absolute;    
        left: 500px;    
        margin: 0;     
        text-align: left;   
        width: 1000px;   
        }
     input {
        position: relative;
        top: 20px       
        }    
    </style>

然后在js内添加移动效果

<script>   
    //随机函数    
    function getRandom(minNum, maxNum) {
         return parseInt((Math.random() * (maxNum - minNum + 1)) + minNum);
    }
             
    //主函数    
    function main() {
        let input = window.prompt("");
        let article = document.querySelector("article")
        let pEle = document.createElement('p');//创建节点
        pEle.style.position = (`absolute`) 
        pEle.style.left = (`1000px`);
        
       //字体随机大小
        let daxiao = getRandom(12, 46);
        pEle.style.fontSize = (`${daxiao}px`)
        
        //随机颜色
        let a = getRandom(0, 255);
        let b = getRandom(0, 255);
        let c = getRandom(0, 255);
        pEle.style.color = "rgb(" + a + "," + b + "," + c + ")"
        
        //随机位置
        let suiji = getRandom(0, 210);
        pEle.style.top = (`${suiji}px`)
        pEle.innerHTML = (input);//获取提示框输入的内容
        article.appendChild(pEle)
        move(pEle, article)  
      }


    //向左移动
        function move(ppp, articleEle) {
            let mover = setInterval(f68, 10)    
            let i = articleEle.clientWidth;     
            function f68() {     
                ppp.style.left = (`${i--}px`)   //p标签的位置向左移动
                if (ppp.offsetLeft <= -articleEle.clientWidth) {
                        clearInterval(mover);
                }  
             }  
          }
</script>

效果如下：