ログインフォームを実装するためのJavaScript

この記事の例では、ログインフォームを実装するためのJavaScriptの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

アイデア: ログインウィンドウをインターフェイスの外側に配置し、スクリプト内の関数を通じてインターフェイスに変更します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ログインフォーム</title>
    <スタイル>
        .ログインDiv{
            /*ログインボックスの外観を設定する*/
            境界線: 赤実線 3px;
            境界線の半径: 10px;
            幅: 350ピクセル;
            高さ: 250px;
            背景色: スカイブルー;
            /*ログインボックスの場所を設定する*/
            位置: 絶対;
            上: -300px;
        }
        ボタン{
            /*ボタンのスタイルを設定する*/
            境界線の半径: 3px;
        }
        #閉じるDiv{
            /*閉じるボタンの位置を設定する*/
            位置: 相対的;
            上: -160px;
            左: 305px;
        }
    </スタイル>
</head>
<本文>
<a href="javaScript:login()" >ログインウィンドウ</a>
<div class="loginDiv" id="loginDiv">
    <h2 align="center">ログインウィンドウ</h2>
    <テーブルの位置合わせ="center">
        <tr>
            <th>ユーザー名:</th>
            <th><input type="text"></th>
        </tr>
        <tr>
            <th>パスワード:</th>
            <th><input type="パスワード"></th>
        </tr>
        <tr>
            <番目 colspan="2">
                <button>ログイン</button>
                <button type="reset">リセット</button>
            </th>
        </tr>
    </テーブル>
    <div id="closeDiv"><a href="javaScript:close()" >[閉じる]</a></div>
</div>
<スクリプト>
    関数ログイン() {
        //ログイン オブジェクトを取得します。let loginDivObj = document.getElementById("loginDiv");
        loginDivObj.style.top="100px";
        // トランジション プロパティを設定します。transitionProperty を参照してください。トランジション効果が適用される CSS プロパティの名前を指定します。
        // 参照 2: transitionDuration: トランジション効果を完了するのにかかる秒数またはミリ秒数を指定します。
        // パラメータ 3: transitionTimingFunction: トランジション効果の速度曲線を指定します。
        // 参照 4: transitionDelay: 遷移効果がいつ開始するかを定義します。
        loginDivObj.style.transition="トップ 600ms リニア 500ms";
    }
    関数close() {
        //ログイン オブジェクトを取得します。let loginDivObj = document.getElementById("loginDiv");
        loginDivObj.style.top="-300px";
    }
</スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: