From b49d57da4d95bb3a8a72d83bca5ea402e41f7ef8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E6=99=97=E5=B8=8C?= <2095000342@qq.com>
Date: Thu, 28 Nov 2024 15:55:17 +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>
---
 ...31\350\241\250\350\276\276\345\274\217.md" | 323 ++++++++++++++++++
 1 file changed, 323 insertions(+)
 create mode 100644 "\346\236\227\346\231\227\345\270\214/20241024 \345\210\235\350\257\206JS/20241128 \346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md"
diff --git "a/\346\236\227\346\231\227\345\270\214/20241024 \345\210\235\350\257\206JS/20241128 \346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\346\236\227\346\231\227\345\270\214/20241024 \345\210\235\350\257\206JS/20241128 \346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md"
new file mode 100644
index 0000000..88f5a84
--- /dev/null
+++ "b/\346\236\227\346\231\227\345\270\214/20241024 \345\210\235\350\257\206JS/20241128 \346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md"	
@@ -0,0 +1,323 @@
+# 作业
+
+```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"]')
+    const phone = document.querySelector('[name="phone"]')
+    const send = document.querySelector('.xtx-form-item .code')
+    const code = document.querySelector('[name="code"]')
+    const password = document.querySelector('[name="password"]')
+    const confirm = document.querySelector('[name="confirm"]')
+    const consent = document.querySelector('.xtx-form-item i')
+    const submit = document.querySelector('.submit')
+    const texts = document.querySelectorAll('input')
+
+    //用户名
+    function setUsername() {
+        const str = username.value
+        const reg = /[0-9a-zA-Z-_]{6,16}/
+        if (reg.test(str)) {
+            username.nextElementSibling.innerText = ''
+        } else {
+            username.nextElementSibling.innerText = '请输入6-16位用户名，只能包含数字大小写字母和-_字符'
+        }
+    }
+
+    //手机号码
+    function setPhone() {
+        const str = phone.value
+        const reg = /1[3-9][0-9]{9}/
+        if (reg.test(str)) {
+            phone.nextElementSibling.innerText = ''
+        } else {
+            phone.nextElementSibling.innerText = '请输入正确的手机号码'
+        }
+    }
+
+    //填写验证码
+    function setCode() {
+        const str = code.value
+        const reg = /\d{6}/
+        if (reg.test(str)) {
+            code.nextElementSibling.innerText = ''
+        } else {
+            code.nextElementSibling.innerText = '请输入正确的验证码'
+        }
+    }
+
+    //设置密码
+    function setPassword() {
+        const str = password.value
+        const reg = /[0-9a-zA-Z-_]{6,20}/
+        if (reg.test(str)) {
+            password.nextElementSibling.innerText = ''
+        } else {
+            password.nextElementSibling.innerText = '密码为6至20位大小写字母，数字和符号-_组成'
+        }
+    }
+
+    //确认密码
+    function setConfirm() {
+        if (password.value === confirm.value && confirm.value !== '') {
+            confirm.nextElementSibling.innerText = ''
+        } else {
+            confirm.nextElementSibling.innerText = '与上面密码不相同'
+        }
+    }
+
+    username.addEventListener('change', setUsername)
+
+    phone.addEventListener('change', setPhone)
+
+    //发送验证码
+    send.addEventListener('click', function setSend() {
+        let i = 3
+        send.innerText = `重新发送(${i})`
+        send.removeEventListener('click', setSend)
+        const s = setInterval(function () {
+            if (i > 1) {
+                i--
+                send.innerText = `重新发送(${i})`
+            } else {
+                clearInterval(s)
+                send.innerText = `重新发送`
+                send.addEventListener('click', setSend)
+            }
+        }, 1000)
+    })
+
+    code.addEventListener('change', setCode)
+
+    password.addEventListener('change', setPassword)
+
+    confirm.addEventListener('change', setConfirm)
+
+    //同意协议
+    consent.addEventListener('click', function () {
+        consent.classList.toggle('icon-queren2')
+    })
+
+    //下一步
+    submit.addEventListener('click', function (e) {
+        for (let i = 0; i < texts.length; i++) {
+            if (texts[i].value) {
+                alert('注册成功')
+            } else {
+                e.preventDefault()
+                setUsername()
+                setPhone()
+                setCode()
+                setPassword()
+                setConfirm()
+                break
+            }
+        }
+    })
+    
+  </script>
+</body>
+
+</html>
+```
-- 
Gitee

