小さな練習をする弾幕

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
    < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
    < タイトル>ドキュメント</ タイトル> 
    < スタイル>

    .container { 
        幅：500pxなど。
        高さ：300ピクセル; 
        背景：黒; 
        位置：相対; 
    } 
    スパン{ 
        フォントサイズ：16pxに。
        色：白; 
        / * トランジション：すべての3S; * / 
        位置：絶対; 
        幅：500pxなど。
        オーバーフロー：隠されました;
    }

    </ スタイル> 
</ ヘッド> 
< 身体> 
        < divのクラス= "コンテナ" >
        
        </ DIV >    

        < DIV クラス= "コメント" > 
            < 入力タイプ= "テキスト" ID = "sendText" プレースホルダ= "来几条弹幕吧~~" > 
            < ボタンID = "及びSendBtn" >发送</ ボタン> 
        </ DIV >

< スクリプト> 
    聞かせてビデオ= document.getElementsByTagName（' ビデオ' ）;
    せコンテナ= document.getElementsByClassName（' コンテナー' ）[ 0 ];
    // 随机函数
    ランダムせ=  関数（開始、終了）{
         返すMath.floor（Math.random（）* （端を- 起動+ 1 ））+ 始めます。
    }
    せwordMove =  関数（）{
        聞かせてスパン= のdocument.createElement（" スパン" ）;
        span.innerHTML = sendText.value.substring（0 、50 ）;
        sendText.value =  "" ;
        LETスピード= （ランダム。5 、10 ）;
         // spanタグは、水平位置の移動を開始
        span.style.left = container.offsetWidth + container.offsetLeft +  " PXを" 。
        console.log（span.style.left）。

        // の垂直位置移動を開始
        totalHeight LET = container.offsetTop +  300 。
        span.style.top = ランダム（container.offsetTop +  10 、totalHeight - 15 ）+ " PX " 。
    //     にconsole.log（容器）
       container.appendChild（スパン）;


        せは、stopTimer = たsetInterval（関数（）{
            span.style.left = のparseInt（span.style.left）- スピード+  " PX " ;   // 50msの時間スパンモバイル
            // タイマーの終了後とスパンを除く0 < 
            IF （のparseInt（span.style.left）< 0 ）{
                clearInterval（は、stopTimer）。
                container.removeChild（スパン）;
            }
        }、50 ）
    }
    sendBtn.onclick = wordMove。
    document.onkeydown =  関数（E）{
         場合（e.keyCode ===  13 ）{
            wordMove（）;
        }
    }

</ スクリプト>


</ ボディ> 
</ HTML >