JavaScript to implement login form

This article example shares the specific code of JavaScript to implement the login form for your reference. The specific content is as follows

Idea : Put the login window outside the interface, and then change it to the interface through the function in the script!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Login Form</title>
    <style>
        .loginDiv{
            /*Set the appearance of the login box*/
            border: solid red 3px;
            border-radius: 10px;
            width: 350px;
            height: 250px;
            background-color: skyblue;
            /*Set the location of the login box*/
            position: absolute;
            top: -300px;
        }
        button{
            /*Set the button style*/
            border-radius: 3px;
        }
        #closeDiv{
            /*Set the close button position*/
            position: relative;
            top: -160px;
            left: 305px;
        }
    </style>
</head>
<body>
<a href="javaScript:login()" >Login window</a>
<div class="loginDiv" id="loginDiv">
    <h2 align="center">Login window</h2>
    <table align="center">
        <tr>
            <th>Username:</th>
            <th><input type="text"></th>
        </tr>
        <tr>
            <th>Password:</th>
            <th><input type="password"></th>
        </tr>
        <tr>
            <th colspan="2">
                <button>Login</button>&nbsp
                <button type="reset">Reset</button>
            </th>
        </tr>
    </table>
    <div id="closeDiv"><a href="javaScript:close()" >[Close]</a></div>
</div>
<script>
    function login() {
        //Get the login object let loginDivObj = document.getElementById("loginDiv");
        loginDivObj.style.top="100px";
        //Set transition properties, see transitionProperty: Specifies the name of the CSS property to which the transition effect is applied.
        // Reference 2: transitionDuration: specifies how many seconds or milliseconds it takes to complete the transition effect.
        // Parameter 3: transitionTimingFunction: specifies the speed curve of the transition effect.
        // Reference 4: transitionDelay: defines when the transition effect starts.
        loginDivObj.style.transition="top 600ms linear 500ms";
    }
    function close() {
        //Get the login object let loginDivObj = document.getElementById("loginDiv");
        loginDivObj.style.top="-300px";
    }
</script>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

js implements the pop-up login box by clicking the pop-up window
JS realizes the background color gradient animation effect when clicking the login pop-up window

<<: How to improve MySQL Limit query performance

>>: The correspondence between Tomcat and JDK versions and the features of each Tomcat version