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

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 登录注册画面
返回列表 发新帖
查看: 2623|回复: 0

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

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

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

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

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

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

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

  22.         button, input[type=button] {
  23.             position: absolute;
  24.             top: 22%;
  25.             width: 15%;
  26.             height: 6%;
  27.             border: none;
  28.             cursor: pointer;
  29.         }

  31.         #main-login-div-button {
  32.             left: 35%;
  33.             background-color: #ff7846;
  34.         }

  36.         #main-registered-div-button {
  37.             left: 50%;
  38.             background-color: #4678ff;
  39.         }

  41.         #main-login-div, #main-registered-div {
  42.             position: absolute;
  43.             left: 35%;
  44.             top: 28%;
  45.             width: 30%;
  46.             height: 50%;
  47.             text-align: center;
  48.             padding-top: 30px;
  49.             color: #5950ff;
  50.             background-color: #a6fff0;
  51.         }

  53.         #main-registered-div *, #main-login-div * {
  54.             padding-top: 30px;
  55.             color: #5950ff;
  56.         }

  58.         #main-registered-div input, #main-login-div input {
  59.             border: 1px solid white;
  60.             border-radius: 10px;
  61.             padding-top: 0;
  62.             margin: 0 auto;
  63.             width: 60%;
  64.             height: 7%;
  65.         }

  67.         #main-login-div-title, #main-registered-div-title {
  68.             padding-top: 0;
  69.             font-size: 28px;
  70.         }

  72.         #main-login-div-getButton, #main-registered-div-getButton {
  73.             position: absolute;
  74.             border: none;
  75.             color: #fff;
  76.             background-color: #ff7846;
  77.             left: 23%;
  78.             top: 80%;
  79.         }

  81.         #main-login-div-emptyButton, #main-registered-div-emptyButton {
  82.             position: absolute;
  83.             border: none;
  84.             color: #fff;
  85.             background-color: #4678ff;
  86.             left: 23%;
  87.             top: 87%;
  88.         }

  90.         input:hover, input:focus {
  91.             background-color: #ffeb3b;
  92.         }

  94.         input:required {
  95.             background-color: #2af711;
  96.         }
  97.     </style>
  98. </head>
  99. <body>
  100.     <div id="main-div">
  101.         <button id="main-login-div-button">登录</button>
  102.         <div id="main-login-div" style="display: block;">
  103.             <h2 id="main-login-div-title">登录</h2>
  104.             <br>
  105.             <span>Username: </span><input type="text" maxlength="35" placeholder="Username" id="main-login-div-username"><br><br><br>
  106.             <span>Password: </span><input type="password" maxlength="40" placeholder="Password" id="main-login-div-password"><br><br><br><br><br><br>
  107.             <input type="button" id="main-login-div-getButton" value="确定"></input>
  108.             <input type="button" id="main-login-div-emptyButton" value="清空"></input>
  109.         </div>
  110.         <button id="main-registered-div-button">注册</button>
  111.         <div id="main-registered-div" style="display: none;">
  112.             <h2 id="main-registered-div-title">注册</h2>
  113.             <br>
  114.             <span>Username: </span><input type="text" maxlength="35" placeholder="Username" id="main-registered-div-username"><br><br><br>
  115.             <span>Password: </span><input type="password" maxlength="40" placeholder="Password" id="main-registered-div-password"><br><br><br>
  116.             <span>Password Again: </span><input type="password" maxlength="40" placeholder="Password again" id="main-registered-div-passwordAgain"><br><br><br>
  117.             <input type="button" id="main-registered-div-getButton" value="确定"></button>
  118.             <input type="button" id="main-registered-div-emptyButton" value="清空"></button>
  119.         </div>
  120.     </div>
  121.     <script src="jquery-1.7.2/jquery1.7.2.js"></script>
  122.     <script src="scriptTools.js"></script>
  123.     <script>
  124.         $(function () { //绑定文件加载的监听
  125.             var messages = {};
  126.             //获取基本数据
  127.             var $oDiv = $('#main-div');
  128.             var $oLoginDiv = $('#main-div>#main-login-div');
  129.             var $oRegisteredDiv = $('#main-div>#main-registered-div');
  130.             var $oLoginGetBtn = $('#main-div>#main-login-div-button');
  131.             var $oRegisteredGetBtn = $('#main-div>#main-registered-div-button');
  132.             var $oLoginEnter = $('#main-login-div-getButton');
  133.             var $oRegisteredEnter = $('#main-registered-div-getButton');

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

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

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

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

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

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

  164.             $oLoginEnter.on('click', function () {
  165.                 if(findElementObj(messages, $oLoginUsername.val())) {
  166.                     if($oLoginPassword.val() == messages[$oLoginUsername.val()]) {
  167.                         alert('登录成功');
  168.                         $oLoginUsername.val('');
  169.                         $oLoginPassword.val('');
  170.                     }
  171.                     else {
  172.                         alert('密码错误');
  173.                         $oLoginUsername.val('');
  174.                         $oLoginPassword.val('');
  175.                     }
  176.                 }
  177.                 else {
  178.                     alert('用户名错误');
  179.                     $oLoginUsername.val('');
  180.                     $oLoginPassword.val('');
  181.                 }
  182.             })

  184.             $oRegisteredEnter.on('click', function () {
  185.                 if($oRegisteredUsername.val() != '' && $oRegisteredPassword.val() != '' && $oRegisteredPasswordagain.val() != '') {
  186.                     if($oRegisteredPassword.val() == $oRegisteredPasswordagain.val()) {
  187.                         messages[$oRegisteredUsername.val()] = $oRegisteredPassword.val();
  188.                         $oRegisteredUsername.val('');
  189.                         $oRegisteredPassword.val('');
  190.                         $oRegisteredPasswordagain.val('');
  191.                         alert('成功注册！');
  192.                         $oRegisteredDiv.css('display', 'none');
  193.                         $oLoginDiv.css('display', 'block');
  194.                     }
  195.                     else {
  196.                         alert('密码验证错误');
  197.                         $oRegisteredUsername.val('');
  198.                         $oRegisteredPassword.val('');
  199.                         $oRegisteredPasswordagain.val('');
  200.                     }
  201.                 }
  202.                 else {
  203.                     alert('不能为空');
  204.                     $oRegisteredUsername.val('');
  205.                     $oRegisteredPassword.val('');
  206.                     $oRegisteredPasswordagain.val('');
  207.                 }
  208.             })

  210.             setInterval(function () {
  211.                 if($oLoginUsername.val() == '') {
  212.                     $oLoginUsername.prop('required', false)
  213.                 }
  214.                 else {
  215.                     $oLoginUsername.prop('required', true)
  216.                 }

  218.                 if($oLoginPassword.val() == '') {
  219.                     $oLoginPassword.prop('required', false)
  220.                 }
  221.                 else {
  222.                     $oLoginPassword.prop('required', true)
  223.                 }

  225.                 if($oRegisteredUsername.val() == '') {
  226.                     $oRegisteredUsername.prop('required', false)
  227.                 }
  228.                 else {
  229.                     $oRegisteredUsername.prop('required', true)
  230.                 }

  232.                 if($oRegisteredPassword.val() == '') {
  233.                     $oRegisteredPassword.prop('required', false)
  234.                 }
  235.                 else {
  236.                     $oRegisteredPassword.prop('required', true)
  237.                 }

  239.                 if($oRegisteredPasswordagain.val() == '') {
  240.                     $oRegisteredPasswordagain.prop('required', false)
  241.                 }
  242.                 else {
  243.                     $oRegisteredPasswordagain.prop('required', true)
  244.                 }

  246.             }, 1)
  247.         })
  248.     </script>
  249. </body>
  250. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2025-4-19 15:05

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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