From a18c9b2a3687d1cdacc649b1bd6a45bccafc0b50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E6=99=97=E5=B8=8C?= <2095000342@qq.com>
Date: Sun, 1 Dec 2024 14:44:50 +0000
Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 林晗希 <2095000342@qq.com>
---
 ...65\351\235\242\351\252\214\350\257\201.md" | 313 ++++++++++++++++++
 1 file changed, 313 insertions(+)
 create mode 100644 "\346\236\227\346\231\227\345\270\214/20241024 \345\210\235\350\257\206JS/20241129 \346\263\250\345\206\214\351\241\265\351\235\242\351\252\214\350\257\201.md"
diff --git "a/\346\236\227\346\231\227\345\270\214/20241024 \345\210\235\350\257\206JS/20241129 \346\263\250\345\206\214\351\241\265\351\235\242\351\252\214\350\257\201.md" "b/\346\236\227\346\231\227\345\270\214/20241024 \345\210\235\350\257\206JS/20241129 \346\263\250\345\206\214\351\241\265\351\235\242\351\252\214\350\257\201.md"
new file mode 100644
index 0000000..f64bcd2
--- /dev/null
+++ "b/\346\236\227\346\231\227\345\270\214/20241024 \345\210\235\350\257\206JS/20241129 \346\263\250\345\206\214\351\241\265\351\235\242\351\252\214\350\257\201.md"	
@@ -0,0 +1,313 @@
+# 作业
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="renderer" content="webkit">
+  <link rel="shortcut icon" href="./favicon.ico">
+  <link rel="stylesheet" href="./css/common.css">
+  <link rel="stylesheet" href="./css/register.css">
+  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
+</head>
+
+<body>
+  <!-- 项部导航 -->
+  <div class="xtx_topnav">
+    <div class="wrapper">
+      <!-- 顶部导航 -->
+      <ul class="xtx_navs">
+        <li>
+          <a href="./login.html">请先登录</a>
+        </li>
+        <li>
+          <a href="./register.html">免费注册</a>
+        </li>
+        <li>
+          <a href="./center-order.html">我的订单</a>
+        </li>
+        <li>
+          <a href="./center.html">会员中心</a>
+        </li>
+        <li>
+          <a href="javascript:;">帮助中心</a>
+        </li>
+        <li>
+          <a href="javascript:;">在线客服</a>
+        </li>
+        <li>
+          <a href="javascript:;">
+            <i class="mobile sprites"></i>
+            手机版
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <!-- 头部 -->
+  <div class="xtx_header">
+    <div class="wrapper">
+      <!-- 网站Logo -->
+      <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
+      <!-- 主导航 -->
+      <div class="xtx_navs">
+        <ul class="clearfix">
+          <li>
+            <a href="./index.html">首页</a>
+          </li>
+          <li>
+            <a href="./category01.html">生鲜</a>
+          </li>
+          <li>
+            <a href="./category01.html">美食</a>
+          </li>
+          <li>
+            <a href="./category01.html">餐厨</a>
+          </li>
+          <li>
+            <a href="./category01.html">电器</a>
+          </li>
+          <li>
+            <a href="./category01.html">居家</a>
+          </li>
+          <li>
+            <a href="./category01.html">洗护</a>
+          </li>
+          <li>
+            <a href="./category01.html">孕婴</a>
+          </li>
+          <li>
+            <a href="./category01.html">服装</a>
+          </li>
+        </ul>
+      </div>
+      <!-- 站内搜索 -->
+      <div class="xtx_search clearfix">
+        <!-- 购物车 -->
+        <a href="./cart-none.html" class="xtx_search_cart sprites">
+          <i>2</i>
+        </a>
+        <!-- 搜索框 -->
+        <div class="xtx_search_wrapper">
+          <input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="xtx-wrapper">
+    <div class="container">
+      <!-- 卡片 -->
+      <div class="xtx-card">
+        <h3>新用户注册</h3>
+        <form class="xtx-form">
+          <div data-prop="username" class="xtx-form-item">
+            <span class="iconfont icon-zhanghao"></span>
+            <input name="username" type="text" placeholder="设置用户名称">
+            <span class="msg"></span>
+          </div>
+          <div data-prop="phone" class="xtx-form-item">
+            <span class="iconfont icon-shouji"></span>
+            <input name="phone" type="text" placeholder="输入手机号码  ">
+            <span class="msg"></span>
+          </div>
+          <div data-prop="code" class="xtx-form-item">
+            <span class="iconfont icon-zhibiaozhushibiaozhu"></span>
+            <input name="code" type="text" placeholder="短信验证码">
+            <span class="msg"></span>
+            <a class="code" href="javascript:;">发送验证码</a>
+          </div>
+          <div data-prop="password" class="xtx-form-item">
+            <span class="iconfont icon-suo"></span>
+            <input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合">
+            <span class="msg"></span>
+          </div>
+          <div data-prop="confirm" class="xtx-form-item">
+            <span class="iconfont icon-suo"></span>
+            <input name="confirm" type="password" placeholder="请再次输入上面密码">
+            <span class="msg"></span>
+          </div>
+          <div class="xtx-form-item pl50">
+            <i class="iconfont icon-queren"></i>
+            已阅读并同意<i>《用户服务协议》</i>
+          </div>
+          <div class="xtx-form-item">
+            <button class="submit">下一步</button>
+            <!-- <a class="submit" href="javascript:;">下一步</a> -->
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+  <!-- 公共底部 -->
+  <div class="xtx_footer clearfix">
+    <div class="wrapper">
+      <!-- 联系我们 -->
+      <div class="contact clearfix">
+        <dl>
+          <dt>客户服务</dt>
+          <dd class="chat">在线客服</dd>
+          <dd class="feedback">问题反馈</dd>
+        </dl>
+        <dl>
+          <dt>关注我们</dt>
+          <dd class="weixin">公众号</dd>
+          <dd class="weibo">微博</dd>
+        </dl>
+        <dl>
+          <dt>下载APP</dt>
+          <dd class="qrcode">
+            <img src="./uploads/qrcode.jpg">
+          </dd>
+          <dd class="download">
+            <span>扫描二维码</span>
+            <span>立马下载APP</span>
+            <a href="javascript:;">下载页面</a>
+          </dd>
+        </dl>
+        <dl>
+          <dt>服务热线</dt>
+          <dd class="hotline">
+            400-0000-000
+            <small>周一至周日 8:00-18:00</small>
+          </dd>
+        </dl>
+      </div>
+    </div>
+    <!-- 其它 -->
+    <div class="extra">
+      <div class="wrapper">
+        <!-- 口号 -->
+        <div class="slogan">
+          <a href="javascript:;" class="price">价格亲民</a>
+          <a href="javascript:;" class="express">物流快捷</a>
+          <a href="javascript:;" class="quality">品质新鲜</a>
+        </div>
+        <!-- 版权信息 -->
+        <div class="copyright">
+          <p>
+            <a href="javascript:;">关于我们</a>
+            <a href="javascript:;">帮助中心</a>
+            <a href="javascript:;">售后服务</a>
+            <a href="javascript:;">配送与验收</a>
+            <a href="javascript:;">商务合作</a>
+            <a href="javascript:;">搜索推荐</a>
+            <a href="javascript:;">友情链接</a>
+          </p>
+          <p>CopyRight &copy; 小兔鲜儿</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    //设置用户名
+    const username = document.querySelector(`[name="username"]`)
+    //添加改变内容就触发验证事件
+    username.addEventListener('change',checkUsername)
+    function checkUsername() {
+      //用户名要求
+      const a = /^\w{6,16}$/
+      //判断填入的用户名是否符合要求
+      if (a.test(username.value) === false) {
+        username.nextElementSibling.innerHTML = '请输入6-16位的字母或数字或-、_字符'
+      } else {
+        username.nextElementSibling.innerHTML = '输入正确'
+      }
+    }
+
+    //输入手机号码
+    const phone = document.querySelector(`[name="phone"]`)
+    //添加改变内容就触发验证事件
+    phone.addEventListener('change',checkPhone )
+    function checkPhone() {
+      //输入手机号要求
+      const b = /^1[3-9]\d{9}$/
+      //判断填入的手机号码是否符合要求
+      if (b.test(phone.value) === false) {
+        phone.nextElementSibling.innerHTML = '请输入正确的手机号码'
+      } else {
+        phone.nextElementSibling.innerHTML = '输入正确'
+      }
+    }
+
+    //短信验证码
+    //防止重复点击导致显示混乱，设置一个开关
+    let getcode=true;
+    const code=document.querySelector('.code');
+    code.addEventListener('click',checkCode)
+    function checkCode(){
+      getcode=false;//点击后马上关闭
+      code.innerHTML='05秒后重新获取'
+      let i=5;
+      const n=setInterval(function(){
+        i--
+        code.innerHTML=`0${i}秒后重新获取`
+        if(i===0){
+          clearInterval(n)
+          code.innerHTML=`重新获取`
+          getcode=true;
+        }
+      },1000)
+    }
+
+    //初次输入密码
+    const password = document.querySelector(`[name="password"]`)
+    //添加改变内容就触发验证事件
+    password.addEventListener('change', checkPassword)
+    function checkPassword() {
+      //输入密码要求
+      const c = /^\S{6,20}$/
+      //判断填入的密码是否符合要求
+      if (c.test(password) === false) {
+        password.nextElementSibling.innerHTML = '密码为6-20位的字母或数字或-、_字符组成'
+      } else {
+        password.nextElementSibling.innerHTML = '输入正确'
+      }
+    }
+
+    //再次输入密码
+    const confirm = document.querySelector(`[name="confirm"]`)
+    //添加改变内容就触发验证事件，进行验证
+    confirm.addEventListener('change',checkAgain)
+    function checkAgain(){
+      // //再次输入密码要求
+      // const d=/^\S{6,20}$/
+      //判断填入的密码是否与初次输入的密码相同
+      if(confirm.value!=password.value){
+        confirm.nextElementSibling.innerHTML='与上次输入的密码不一致'
+      }else{
+        confirm.nextElementSibling.innerHTML='输入正确'
+      }
+    }
+    //服务协议点击事件
+    const queren=document.querySelector('.icon-queren')
+    queren.addEventListener('click',function(){
+      queren.classList.toggle('icon-queren2') //toggle为切换
+    })
+
+    //表单提交事件（验证所有项是否合规）
+    const form=document.querySelector('.xtx-form')
+    form.addEventListener('submit',function(e){
+      //判断是否选中了用户服务协议，复用是否包含queren2样式
+      if(!queren.classList.contains('icon-queren2')){
+        alert('请先同意用户服务协议')
+        e.preventDefault()//阻止默认提交
+      }
+      //还要判断每个表单项是否合规
+      if(!checkUserName()){
+        e.preventDefault()
+      }
+      if(!checkPhone())e.preventDefault()
+      if(!checkCode())e.preventDefault()
+      if(!checkPassword())e.preventDefault()
+      if(!checkAgain())e.preventDefault()
+
+    })
+  </script>
+</body>
+
+</html>
+```
-- 
Gitee

