簡単にチャット]ダイアログボックス（ソース）

　　今日はビデオ少数のJSは、簡単な仕事、アヤックスに関連していない。アナログスイッチチャットアバターの主な成果両方のケースを書くためにビデオチャットダイアログを配置しました、スタイルは比較的簡単ですが、後者は手入れすることができます。

私はdivタグにあった場所は、スタイル設定により助長している、達成するために要素を追加することに注意してください、各浮動ダイアログボックスを追加すると、それをクリアするために、そうでない場合は、いくつかの連続したダイアログボックスがラインの現象に表示されますが存在します。

<！DOCTYPE HTML> 
<HTML> 
    <HEAD> 
        <METAのcharset = "UTF-8"> 
        <タイトル> </ TITLE> 
        <スタイルタイプ= "テキスト/ CSS"> 
        ■は{幅：300ピクセルによって;高さ：400ピクセル;マージン：オート20ピクセル;ボーダー：1ピクセル黒色固体} 
        ■は.cont {高さ：300ピクセルによって;ボーダー - 底：ソリッド1ピクセルブラック;オーバーフロー：自動;} 
        .contのDIV最大{ -width：220px;マージン：4PX;パディング：4PX。 RADIUSボーダー：計6Px;クリア：両方;ワードラップ：BREAK - ワード;} 
　　　　　/ * DIVし、その最大幅を設定したブレーク・ワードコンテンツラップDIV * /の使用
        .cont DIV：N番目 -child（2N）{背景：スカイブルー; フロート：左は} 
　　　　　/ *セットクリック伝送数が偶数である、DIVはフローティング* /左
        。続きをDIV：n番目-child（2N-1）{背景：オレンジ。フロート：右} 
　　　　　/ *设置点击发送次数为奇数时、DIV右浮动* / 
        ■は.btns {高さ：99px} 
        .btns {高さ*：99px;国境：なし;パディング：0;マージン：0;背景：無し; フロート：左;} 
        #txt {幅：260px;パディング：20ピクセルと、ボックスが -sizing：BORDER- ボックス} 
        #send {幅：40ピクセル;ボーダー - 左：ソリッド1ピクセルブラック;}
         </スタイル> 
    </ HEAD> 
    <本体> 
        <DIV CLASS = "ボックス"> 
            <DIV CLASS = "CONT"> </ div> 
            <DIV CLASS = "btns">  
                <テキストエリアID = "TXT"> </ TEXTAREA>
                の<input type = "ボタン"値= "发送" ID =」 
        </ div> 
    </ body> 
    <スクリプト> VAR oTxt =のdocument.getElementById（ "TXT" ）。
        VAR oSend =のdocument.getElementById（ "送信" ）;
        VAR oCont = document.querySelector（ "続き" ）;
        // VAR oCont = document.getElementsByClassName（ "CONT"） 
        oSend.onclick = 関数（）{//创建oSend的点击事件
             VAR odiv =のdocument.createElement（ "DIV" ）。　　
            odiv。
         
            oCont.appendChild（odiv）; // CONTのサブ要素内に挿入divタグ作成
            odiv.scrollIntoView（）を。//現在の要素がブラウザウィンドウ表示領域をスクロールしてみましょう
            oTxt.value = "" ; //クリアテキストボックスの内容
        }
     </ SCRIPT> 
</ HTML>

簡単にチャット]ダイアログボックス（ソース）

おすすめ