register.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>注册界面</title>
  6. <script src="../js/jquery-2.1.4.js"></script>
  7. <style>
  8. /* 全局样式重置 */
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. box-sizing: border-box;
  13. font-family: "Microsoft Yahei", sans-serif;
  14. }
  15. /* 页面背景 */
  16. body {
  17. background-color: #f5f5f5;
  18. display: flex;
  19. flex-direction: column;
  20. align-items: center;
  21. padding-top: 100px;
  22. }
  23. /* 标题样式 */
  24. h1 {
  25. color: #333;
  26. margin-bottom: 30px;
  27. font-size: 28px;
  28. font-weight: 600;
  29. }
  30. /* 表单容器 */
  31. form {
  32. background-color: #fff;
  33. padding: 40px 30px;
  34. border-radius: 8px;
  35. box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  36. width: 400px;
  37. }
  38. /* 输入框样式 */
  39. input[type="text"],
  40. input[type="password"] {
  41. width: 100%;
  42. padding: 12px 15px;
  43. margin: 10px 0 20px 0;
  44. border: 1px solid #ddd;
  45. border-radius: 4px;
  46. font-size: 16px;
  47. transition: border-color 0.3s;
  48. }
  49. /* 输入框聚焦样式 */
  50. input[type="text"]:focus,
  51. input[type="password"]:focus {
  52. outline: none;
  53. border-color: #409eff;
  54. box-shadow: 0 0 5px rgba(64, 158, 255, 0.2);
  55. }
  56. /* 保存按钮样式 */
  57. input[type="button"] {
  58. width: 100%;
  59. padding: 12px;
  60. border: none;
  61. border-radius: 4px;
  62. font-size: 16px;
  63. cursor: pointer;
  64. transition: background-color 0.3s;
  65. background-color: #409eff;
  66. color: #fff;
  67. }
  68. input[type="button"]:hover {
  69. background-color: #337ecc;
  70. }
  71. /* 标签样式 */
  72. form label {
  73. color: #666;
  74. font-size: 16px;
  75. display: inline-block;
  76. width: 60px;
  77. }
  78. </style>
  79. </head>
  80. <body>
  81. <h1>注册界面</h1>
  82. <form action="">
  83. 账号: <input type="text" name="username" id="username"> <br>
  84. 密码: <input type="password" name="password" id="password"> <br>
  85. <input type="button" value="保存" onclick="register()">
  86. </form>
  87. <script>
  88. function register() {
  89. console.log("123")
  90. var username = document.getElementById("username").value
  91. var password = document.getElementById("password").value
  92. $.post("http://c46a5489.natappfree.cc/register",
  93. {username: username, password: password}, function (result) {
  94. if (result.success) {
  95. location.href = "/js-demo-day02/js-demo-day02/demo/login.html"
  96. } else {
  97. alert(result.msg)
  98. }
  99. })
  100. }
  101. </script>
  102. </body>
  103. </html>