JS伝送弾幕

JS伝送弾幕を達成

 < DIV クラス= "BOX1" > 
        < DIV クラス= "BOX2" スタイル= "幅：600PX;高さ：400ピクセル" > 
            
        </ DIV > 
        < 入力プレースホルダ= "发送弹幕" /> < ボタン>发送</ ボタン> 
    </ DIV >

<スタイル> 
        
        .box1 { 
            幅：600PX。
            テキスト整列：左 ; 
        } 
        .box2 { 
            背景色：黒。
            マージン下：20ピクセル ; 
        } 
        入力 { 
            幅：300ピクセル。
            高さ：30px ; 
            フォントサイズ：21px ; 
            マージン右：20ピクセル ;
            余白左：20ピクセル ; 
        } 
        ボタン { 
            幅：100pxに。
            高さ：35px ; 
            垂直整列：トップ。
        } 
    </スタイル>

  <スクリプト> 
        
        BOX2せ = document.getElementsByClassName（ "BOX2"）[0 ]; 
        せて入力 = document.getElementsByTagName（ "入力"）[0 ]; 
        せボタン = document.getElementsByTagName（ "ボタン"）[0 ]; 

        ランドせ = 関数は、{（始端）
            numはせ = Math.floor（Math.random（）*（エンドスタート+ 1）+ スタート）。
            戻り値のNUM; 
        } 
        
        移動させ = 関数（）{ 
            スパンせ =のdocument.createElement（ "スパン" ）。
            span.innerText =input.value; 
            input.value = '' ; 
            スピードましょう =ランド（5,10 ）。
            span.style.display =「インラインブロック」。
            span.style.height = 25+ "PX" 。
            span.style.position =「絶対」。   
            span.style.left = box2.style.width。
            span.style.top =ランド（1,400のparseInt（span.style.height））+ "PX" ; 
            span.style.color =「白」。
            box2.appendChild（スパン）; 
            聞かせて停止 =のsetInterval（機能
                    span.style.left =のparseInt（span.style.left）-speed + "PX" 。
                    もし（のparseInt（span.style.left）<0 ）{ 
                        てclearInterval（停止）。
                        box2.removeChild（スパン）; 
                    } 
                }、 50 ）; 
            } 
            button.onclick = 動きます。
            document.onkeydown = 関数（E）{
                 場合（e.keyCode == 13 ）{ 
                    ムーブ（）; 
                } 
            }


     </ SCRIPT>

 実装図：