JavaScript 로그 인 창 구현

3038 단어 js로그 인창문
본 논문 의 사례 는 자바 스 크 립 트 가 로그 인 창 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.

사고방식:로그 인 창 을 인터페이스 밖 에 두 고 script 내의 함 수 를 통 해 인터페이스 안 으로 바 꾸 는 것 이다!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>      </title>
    <style>
        .loginDiv{
            /*        */
            border: solid red 3px;
            border-radius: 10px;
            width: 350px;
            height: 250px;
            background-color: skyblue;
            /*        */
            position: absolute;
            top: -300px;
        }
        button{
            /*  button   */
            border-radius: 3px;
        }
        #closeDiv{
            /*        */
            position: relative;
            top: -160px;
            left: 305px;
        }
    </style>
</head>
<body>
<a href="javaScript:login()" >   </a>
<div class="loginDiv" id="loginDiv">
    <h2 align="center">    </h2>
    <table align="center">
        <tr>
            <th>   :</th>
            <th><input type="text"></th>
        </tr>
        <tr>
            <th>  :</th>
            <th><input type="password"></th>
        </tr>
        <tr>
            <th colspan="2">
                <button>  </button>&nbsp
                <button type="reset">  </button>
            </th>
        </tr>
    </table>
    <div id="closeDiv"><a href="javaScript:close()" >[  ]</a></div>
</div>
<script>
    function login() {
        //      
        let loginDivObj = document.getElementById("loginDiv");
        loginDivObj.style.top="100px";
        //      ,  :transitionProperty:          CSS      。
        //               :transitionDuration:                。
        //               :transitionTimingFunction:           。
        //               :transitionDelay:          。
        loginDivObj.style.transition="top 600ms linear 500ms";
    }
    function close() {
        //      
        let loginDivObj = document.getElementById("loginDiv");
        loginDivObj.style.top="-300px";
    }
</script>
</body>
</html>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기