毕业论文写作

毕业设计需求

计算机毕业设计中实现弹出式登录界面

作者：帮我毕业 点击次数：0

 1.首先要在页面上设置一个登录按钮，可以是<button><a><img>都行，我们点击这个元素的时候会弹出登录框：

2.其次在页面合适位置制作两个<div>，一个登录功能的div,另一个注册功能的div，注意位置的设置，当网站首次加载进入的时候登录框不可见，那就要把样式设置为display:"none"
 

3.当用户点击登录按钮的时候，通过JS设置登录div的display=""，如何用户点击了登录界面上的注册按钮时，通过jQuery切换div透明和大小就可以完美实现登录注册的切换

4.关闭登录框的话也是同样的道理，把两个div的display设置为none就行
代码如下：

sign.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>sign</title>
  6. <style>
  7. body {
  8. text-align: center;
  9. background-color: burlywood;
  10. }
  11. .signform {
  12. font-family: 微软雅黑;
  13. position: fixed;
  14. background-color: white;
  15. top: 20%;
  16. left: 30%;
  17. width: 500px;
  18. height: 400px;
  19. border-radius: 1em;
  20. text-align: center;
  21. z-index: 999;
  22. }
  23. #registerform {
  24. height: 450px;
  25. }
  26. .signclose {
  27. cursor: pointer;
  28. float: right;
  29. overflow: hidden;
  30. text-align: center;
  31. position: relative;
  32. height: 35px;
  33. width: 35px;
  34. margin-top: 10px;
  35. margin-right: 10px;
  36. }
  37. #registerloading{
  38. position: absolute;
  39. width: 25px;
  40. height: 25px;
  41. left: 410px;
  42. top: 90px;
  43. }
  44. .signinput {
  45. text-align: center;
  46. border-radius: 0.2em;
  47. width: 280px;
  48. height: 45px;
  49. border: none;
  50. background-color:#f2f2f2;
  51. font-size: 28px;
  52. }
  53. .signinput::-webkit-input-placeholder {
  54. font-size: 26px;
  55. }
  56. .userdiv {
  57. position: relative;
  58. margin-top: 80px;
  59. }
  60. .pwddiv {
  61. position: relative;
  62. margin-top: 20px;
  63. }
  64. .postdiv {
  65. position: relative;
  66. margin-top: 20px;
  67. }
  68. .postdiv button {
  69. cursor: pointer;
  70. color: white;
  71. font-size: 26px;
  72. border: none;
  73. border-radius: 0.4em;
  74. width: 280px;
  75. height: 45px;
  76. background-color:#4CAF50;
  77. }
  78. </style>
  79. <link rel="stylesheet" href="./sign.css">
  80. </head>
  81. <body>
  82. <div>
  83. <button id="displaysign" οnclick="start()">点击登录</button>
  84. </div>
  85. <div class="signform" id="signform" style="display: none">
  86. <div class="signclose">
  87. <img src="image/signclose.ico" width="35px" height="35px" οnclick="signclose()">
  88. </div>
  89. <div class="userdiv">
  90. <input id="user" class="signinput" type="text" placeholder="用户名" name="user" >
  91. </div>
  92. <div class="pwddiv">
  93. <input id="pwd" class="signinput" type="password" placeholder="密码" name="pwd">
  94. </div>
  95. <div class="postdiv">
  96. <button>登录</button>
  97. </div>
  98. <br>
  99. <div class="change" style="color: #4d4d4d">
  100. <p>还没有账号?赶快<a href="#" style="text-decoration: none;color: #43A047">注册</a>一个吧</p>
  101. </div>
  102. </div>
  103. <div class="signform" id="registerform" style="display: none">
  104. <div class="signclose">
  105. <img src="image/signclose.ico" width="35px" height="35px" οnclick="signclose()">
  106. </div>
  107. <div class="userdiv">
  108. <input  id="registeruser" class="signinput" οnblur="loading()" type="text" placeholder="用户名" name="user">
  109. </div>
  110. <img src="image/signloading.gif" style="display: none" id="registerloading">
  111. <div class="pwddiv">
  112. <input  id="registerpwd" class="signinput" type="password" placeholder="密码" name="pwd">
  113. </div>
  114. <div class="pwddiv">
  115. <input  id="registerrepwd" class="signinput" type="password" placeholder="再次输入密码" name="pwd">
  116. </div>
  117. <div class="postdiv">
  118. <button>注册</button>
  119. </div>
  120. <br>
  121. <div class="change" style="color: #4d4d4d">
  122. <p>已有账号?立刻去<a href="#" style="text-decoration: none;color: #43A047">登录</a>吧</p>
  123. </div>
  124. </div>
  125. </body>
  126. <script src="./jquery-3.2.1.min.js"></script>
  127. <script src="./signformchange.js"></script>
  128. </html>

sign.css

  1. /*
  2. * @Author: xshis
  3. * @Date:   2018-05-23 11:45:25
  4. * @Last Modified by:   xshis
  5. * @Last Modified time: 2018-05-23 11:45:28
  6. */
  7. body {
  8. text-align: center;
  9. background-color: burlywood;
  10. }
  11. #displaysign{
  12. position: relative;
  13. top: 80px;
  14. width: 70px;
  15. height: 40px;
  16. }
  17. .signform {
  18. font-family: 微软雅黑;
  19. position: fixed;
  20. background-color: white;
  21. top: 20%;
  22. left: 30%;
  23. width: 500px;
  24. height: 400px;
  25. border-radius: 1em;
  26. text-align: center;
  27. z-index: 999;
  28. }
  29. #registerform {
  30. height: 450px;
  31. }
  32. .signclose {
  33. cursor: pointer;
  34. float: right;
  35. overflow: hidden;
  36. text-align: center;
  37. position: relative;
  38. height: 35px;
  39. width: 35px;
  40. margin-top: 10px;
  41. margin-right: 10px;
  42. }
  43. #registerloading{
  44. position: absolute;
  45. width: 25px;
  46. height: 25px;
  47. left: 410px;
  48. top: 90px;
  49. }
  50. .signinput {
  51. text-align: center;
  52. border-radius: 0.2em;
  53. width: 280px;
  54. height: 45px;
  55. border: none;
  56. background-color:#f2f2f2;
  57. font-size: 28px;
  58. }
  59. .signinput::-webkit-input-placeholder {
  60. font-size: 26px;
  61. }
  62. .userdiv {
  63. position: relative;
  64. margin-top: 80px;
  65. }
  66. .pwddiv {
  67. position: relative;
  68. margin-top: 20px;
  69. }
  70. .postdiv {
  71. position: relative;
  72. margin-top: 20px;
  73. }
  74. .postdiv button {
  75. cursor: pointer;
  76. color: white;
  77. font-size: 26px;
  78. border: none;
  79. border-radius: 0.4em;
  80. width: 280px;
  81. height: 45px;
  82. background-color:#4CAF50;
  83. }

signformchange.js

  1. /*
  2. * @Author: xshis
  3. * @Date:   2018-05-23 11:45:50
  4. * @Last Modified by:   xshis
  5. * @Last Modified time: 2018-05-23 11:45:52
  6. */
  7. $(function ()
  8. {
  9. $('.change a').click(function ()
  10. {
  11. $('.signform').animate({height: 'toggle', opacity: 'toggle'}, 'slow');
  12. });
  13. })
  14.  
  15. function start() {
  16. document.getElementById('signform').style.display=""
  17. }
  18.  
  19. function signclose() {
  20. document.getElementById('signform').style.display="none"
  21. document.getElementById('registerform').style.display="none"
  22. }
  23. function loading() {
  24. document.getElementById('registerloading').style.display=""
  25. }
 

需要自己引入juqery库，就可以跑起来了

最新毕业设计成品

计算机毕业设计网站热销排行

版权所有© 帮我毕业网 并保留所有权利

QQ 1370405256 微信 biyebang

QQ：629001810微信：biyebang

收缩
  • 联系帮我作业网客服