DON基本的なイベント

入射光スイッチ

<!DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
    <スタイル> 
        .c1 { 
            高さ:400ピクセル; 
            幅:400ピクセル; 
            境界半径:50%。
        } 

        .c2 { 
            背景色:赤。
        } 

        .c3 { 
            背景色:緑。
        } 


    </スタイル> 
</ HEAD> 
<BODY> 

<DIV CLASS = "C1 C2 C3"> </ div> 
<ボタンクラス= "B2">点击</ button>の


<SCRIPT> 
 
    divele =ドキュメント。
    buttonele =ドキュメント。getElementsByClassName( "B2")[0]; 
    buttonele.onclick =関数(){
        divele.classList.toggle( "C3")

    } 


</ SCRIPT> 


</ BODY> 

</ HTML> 
<! - 第1ランプスイッチの1からパターンを調整する
ランプタグに見られる2つのバースイッチ
3ボタンのラベルを見つけるために
イベントバインディング4ボタンのラベルを
クラスの5が失われた緑のスタイルクラスの操作のイベントで書かれています
- >

 

ショータイムイベント

<!DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
</ HEAD> 
<BODY> 
の<input type = "text"クラス= "C1"> 
<ボタンクラス= "C2">开始</ボタン> 
<ボタンクラス= "C3">结束</ボタン> 


<スクリプト> 

    butele1 = document.getElementsByClassName( "C2")[0]; 
    butele2 = document.getElementsByClassName( "C3")[0]; 
    VARさt = NULL; 

    機能ショータイム(){ 
        時間=新しいDate(); 
        inputele = document.getElementsByClassName( "C1")[0]; 
        inputele.value =時間。
 
        } 

    }; 
    butele2.onclick =関数(){ 
        てclearInterval(T); 
        T =ヌル

    } 

</ SCRIPT> 
</ BODY> 
</ HTML> 


<! - 
第1の書き込み入力ボックス。
2スクリプトは、値に、出力値をオブジェクトを定義する時間
インターバルタイマーで表示時間を制御するために3 
書き込み開始終了制御するいくつかのボタンで4 
イベント結合、buttonタグJSSによって見出さ5 
6注ドーガンは多くのオープンタイマーになる場合ここでは、スタートボタンのスタイルを押してください。私たちは、タイマーは、タイマーを指すようにグローバル変数を定義するの数を制限したい
最初は彼が実行できない場合は、彼が実行できない場合は、時間
我々はタイマーを取り消すこと7注意を。空のグローバル変数
- >

  

イベントは、フォーカスを取得します

<!DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
</ HEAD> 
<BODY> 

の<input type = "text"の値= "帅的什么也没有留下"クラス= "C1"> 


<SCRIPT> 
    inputele = document.getElementsByClassName( "C1")[0]; 
    inputele.onfocus =関数(){ 
        inputele.value = "" 

    }。
    inputele.onblur =関数(){ 
        inputele.value = "老板记得下一次在来哦" 

    } 

</ SCRIPT> 

</ body> 
</ HTML> 
<!

  

地方連携イベント


    s1ele =のdocument.getElementById( "D1")。
    s2ele =のdocument.getElementById( "D2")。
    VaRのオペル=のdocument.createElement( "オプション"); 
    {(iはデータに聞かせて)のために










    opel.innerText = " -请选择- "。
    s1ele.appendChild(オペル)。

        VAR opele =のdocument.createElement( "オプション"); 
        opele.innerText = I; 
        opele.value = I; 
        s1ele.appendChild(opele)
    } 
    s1ele.onchange =関数(){ 
        VARのA = s1ele.value。
        VaRのB =データ[A]。
        s2ele.innerHTML = ""; 

        以下のために(;私はのb.lengthを<; I = 0ましょう私は++){ 
            VAR opele2 =のdocument.createElement( "オプション"); 
            opele2.innerText = B [i]は、
            opele2.value = bの[I]。
            s2ele.appendChild(opele2)
        } 
    } 
</ SCRIPT> 
</ BODY> 
</ HTML> 


<!
4私たちは、動的テキストを作成するために、各ループのオプションが渡された範囲内のオプションの値ラベルラベル
5最初のをしてから、我々は選択した値を選択.VALUEアウトラベルによる方法で私たちを残してONCHANGE結合ラベルを選択
6とを私たちは、市内のリスト内の値の取得値を選択していた
7と、動的作成オプションラベルのループ内の都市の値いったん削除します。オプションのラベルにテキスト値
たびに、我々は削除する最後のタグ情報に動的な時間の価値を渡すことを8注
- >

  

モーダルボックスイベント

<!DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>タイトル</ TITLE> 
    <スタイル> 
        .c2 { 
            位置:固定; 
            トップ:0; 
            左:0; 
            右:0; 
            下:0; 
            背景色:RGBA(128、128、128、0.4)。
            Zインデックス:1。
        } 

        .c3 { 
            高さ:200pxの。
            幅:400ピクセル; 
            位置:固定; 
            トップ:50%; 
            左:50%; 
            マージントップ:-100px; 
            margin-left:-200px;

            背景色:白; 
            Zインデックス:2。

        } 

        .h1 { 
            表示:なし。
        } 


    </スタイル> 
</ HEAD> 
<BODY> 
<DIV CLASS = "C1">我是最下面的</ div> 
<ボタンクラス= "D1">登录</ button>の
<divのクラス= "C2さh1" > </ div> 
<divのクラス= "C3さh1"> 
    <P>ユーザ名の<input type = "text"> </ P> 
    <P>パスワードの<input type = "パスワード"> </ P> 
    <ボタンクラス= "D2">取消</ボタン> 
</ div> 

<スクリプト> 
    のvar divele1 = document.getElementsByClassName( "D1" )[0]; 
    divele1.onclick =関数(){  
        divele2 = document.getElementsByClassName( "C2")[0];
        divele3 = document.getElementsByClassName( "C3")[0];
        divele2.classList.remove( "のH1"); 
        divele3.classList.remove( "のH1")
    } 


    VAR divele4 = document.getElementsByClassName( "D2")[0]; 
    divele4.onclick =関数(){ 
        divele5 = document.getElementsByClassName ( "C2")[0]; 
        divele6 = document.getElementsByClassName( "C3")[0]; 
        divele5.classList.add( "のH1"); 
        divele6.classList.add( "のH1")
    } 


</ SCRIPT> 


< / BODY> 
</ HTML> 


<! - 
。1定義する3つのdivの最初の最下層のクラスの内容です。第二は、モーダルボックスであり、第3は、ログインボックスで
、それ以外の場合は浮上しないであろう、これらは絶対DIVを配置する必要があることメモ
干支隠すためにクラスを定義し、その後3時間および
ボタン結合動作を通じて4お隠されたdivのクラスのそれぞれを変更します 
時間が5増加削除ボタン
- >

  

 

おすすめ

転載: www.cnblogs.com/cherish937426/p/11493911.html