设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 登录注册画面
返回列表 发新帖
查看: 2341|回复: 0

[作品展示] 登录注册画面

[复制链接]
陈尚涵
发表于 2020-7-27 09:07:19 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
把HTML, CSS和JS放在了同一个文件。
这是登录注册画面，真的美。而且登录注册是真的可以哦~但背景图还得自己准备，在当前目录新建一个images文件夹，里面放背景图，名字是“background2.png”

好了不废话了，上代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录注册画面</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            color: #fff;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }

        body {
            background-color: #000;
            background-image: url("images/background2.png");
            background-repeat: no-repeat;
            background-size: 100%;
        }

        button, input[type=button] {
            position: absolute;
            top: 22%;
            width: 15%;
            height: 6%;
            border: none;
            cursor: pointer;
        }

        #main-login-div-button {
            left: 35%;
            background-color: #ff7846;
        }

        #main-registered-div-button {
            left: 50%;
            background-color: #4678ff;
        }

        #main-login-div, #main-registered-div {
            position: absolute;
            left: 35%;
            top: 28%;
            width: 30%;
            height: 50%;
            text-align: center;
            padding-top: 30px;
            color: #5950ff;
            background-color: #a6fff0;
        }

        #main-registered-div *, #main-login-div * {
            padding-top: 30px;
            color: #5950ff;
        }

        #main-registered-div input, #main-login-div input {
            border: 1px solid white;
            border-radius: 10px;
            padding-top: 0;
            margin: 0 auto;
            width: 60%;
            height: 7%;
        }

        #main-login-div-title, #main-registered-div-title {
            padding-top: 0;
            font-size: 28px;
        }

        #main-login-div-getButton, #main-registered-div-getButton {
            position: absolute;
            border: none;
            color: #fff;
            background-color: #ff7846;
            left: 23%;
            top: 80%;
        }

        #main-login-div-emptyButton, #main-registered-div-emptyButton {
            position: absolute;
            border: none;
            color: #fff;
            background-color: #4678ff;
            left: 23%;
            top: 87%;
        }

        input:hover, input:focus {
            background-color: #ffeb3b;
        }

        input:required {
            background-color: #2af711;
        }
    </style>
</head>
<body>
    <div id="main-div">
        <button id="main-login-div-button">登录</button>
        <div id="main-login-div" style="display: block;">
            <h2 id="main-login-div-title">登录</h2>
            <br>
            <span>Username: </span><input type="text" maxlength="35" placeholder="Username" id="main-login-div-username"><br><br><br>
            <span>Password: </span><input type="password" maxlength="40" placeholder="Password" id="main-login-div-password"><br><br><br><br><br><br>
            <input type="button" id="main-login-div-getButton" value="确定"></input>
            <input type="button" id="main-login-div-emptyButton" value="清空"></input>
        </div>
        <button id="main-registered-div-button">注册</button>
        <div id="main-registered-div" style="display: none;">
            <h2 id="main-registered-div-title">注册</h2>
            <br>
            <span>Username: </span><input type="text" maxlength="35" placeholder="Username" id="main-registered-div-username"><br><br><br>
            <span>Password: </span><input type="password" maxlength="40" placeholder="Password" id="main-registered-div-password"><br><br><br>
            <span>Password Again: </span><input type="password" maxlength="40" placeholder="Password again" id="main-registered-div-passwordAgain"><br><br><br>
            <input type="button" id="main-registered-div-getButton" value="确定"></button>
            <input type="button" id="main-registered-div-emptyButton" value="清空"></button>
        </div>
    </div>
    <script src="jquery-1.7.2/jquery1.7.2.js"></script>
    <script src="scriptTools.js"></script>
    <script>
        $(function () { //绑定文件加载的监听
            var messages = {};
            //获取基本数据
            var $oDiv = $('#main-div');
            var $oLoginDiv = $('#main-div>#main-login-div');
            var $oRegisteredDiv = $('#main-div>#main-registered-div');
            var $oLoginGetBtn = $('#main-div>#main-login-div-button');
            var $oRegisteredGetBtn = $('#main-div>#main-registered-div-button');
            var $oLoginEnter = $('#main-login-div-getButton');
            var $oRegisteredEnter = $('#main-registered-div-getButton');

            var $oLoginUsername = $('#main-login-div-username');
            var $oLoginPassword = $('#main-login-div-password');

            var $oRegisteredUsername = $('#main-registered-div-username');
            var $oRegisteredPassword = $('#main-registered-div-password');
            var $oRegisteredPasswordagain = $('#main-registered-div-passwordAgain');

            //绑定主事件
            $oLoginGetBtn.click(function () {
                $oLoginDiv.css('display', 'block');
                $oRegisteredDiv.css('display', 'none');
            })

            $oRegisteredGetBtn.click(function () {
                $oRegisteredDiv.css('display', 'block');
                $oLoginDiv.css('display', 'none');
            })

            $('#main-registered-div-emptyButton').click(function () {
                $('#main-registered-div-username').val('');
                $('#main-registered-div-password').val('');
                $('#main-registered-div-passwordAgain').val('');
            })

            $('#main-login-div-emptyButton').click(function () {
                $('#main-login-div-username').val('');
                $('#main-login-div-password').val('');
            })

            $oLoginEnter.on('click', function () {
                if(findElementObj(messages, $oLoginUsername.val())) {
                    if($oLoginPassword.val() == messages[$oLoginUsername.val()]) {
                        alert('登录成功');
                        $oLoginUsername.val('');
                        $oLoginPassword.val('');
                    }
                    else {
                        alert('密码错误');
                        $oLoginUsername.val('');
                        $oLoginPassword.val('');
                    }
                }
                else {
                    alert('用户名错误');
                    $oLoginUsername.val('');
                    $oLoginPassword.val('');
                }
            })

            $oRegisteredEnter.on('click', function () {
                if($oRegisteredUsername.val() != '' && $oRegisteredPassword.val() != '' && $oRegisteredPasswordagain.val() != '') {
                    if($oRegisteredPassword.val() == $oRegisteredPasswordagain.val()) {
                        messages[$oRegisteredUsername.val()] = $oRegisteredPassword.val();
                        $oRegisteredUsername.val('');
                        $oRegisteredPassword.val('');
                        $oRegisteredPasswordagain.val('');
                        alert('成功注册！');
                        $oRegisteredDiv.css('display', 'none');
                        $oLoginDiv.css('display', 'block');
                    }
                    else {
                        alert('密码验证错误');
                        $oRegisteredUsername.val('');
                        $oRegisteredPassword.val('');
                        $oRegisteredPasswordagain.val('');
                    }
                }
                else {
                    alert('不能为空');
                    $oRegisteredUsername.val('');
                    $oRegisteredPassword.val('');
                    $oRegisteredPasswordagain.val('');
                }
            })

            setInterval(function () {
                if($oLoginUsername.val() == '') {
                    $oLoginUsername.prop('required', false)
                }
                else {
                    $oLoginUsername.prop('required', true)
                }

                if($oLoginPassword.val() == '') {
                    $oLoginPassword.prop('required', false)
                }
                else {
                    $oLoginPassword.prop('required', true)
                }

                if($oRegisteredUsername.val() == '') {
                    $oRegisteredUsername.prop('required', false)
                }
                else {
                    $oRegisteredUsername.prop('required', true)
                }

                if($oRegisteredPassword.val() == '') {
                    $oRegisteredPassword.prop('required', false)
                }
                else {
                    $oRegisteredPassword.prop('required', true)
                }

                if($oRegisteredPasswordagain.val() == '') {
                    $oRegisteredPasswordagain.prop('required', false)
                }
                else {
                    $oRegisteredPasswordagain.prop('required', true)
                }

            }, 1)
        })
    </script>
</body>
</html>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-23 15:36

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表