小兔鲜注册页面验证、阶段案例（登录、首页页面）（重点）、小兔鲜放大镜效果—

1. 小兔鲜注册页面验证

2. 阶段案例（登录、首页页面）（重点）

3. 小兔鲜放大镜效果

1. 小兔鲜注册页面验证

验证码模块有个小问题：

连续点击获取验证码会导致触发多次计时器，会导致计时出现问题，为了解决这个问题，可以设置一个变量来控制。如 flag = true 当触发点击事件时，首先判断 flag，为真则进入函数，否则不执行，进入函数后首先将 flag取反，然后当计时结束时，再设置 flag = true.

侦听使用 change 事件，当鼠标离开了表单，并且表单值发生了变化时触发

对于同意模块使用的是小图标，而不是单选多选框，勾选的话应该为 i标签再添加一个类icon-queren2

classList.contains( ) 看看有没有包含某个类，如果有则返回 true，没有则返回false

  <script>// 使用立即执行函数，避免变量污染(function(){// 1.发送短信验证码模块const code = document.querySelector('.xtx-form a.code')let flag = true //通过一个变量来控制// 1.1 点击事件code.addEventListener('click', function(){if (flag) {// 取反了，不能马上第二次点击flag = falselet i = 5code.innerHTML = `0${i}s后重新获取`let timer = setInterval(function(){i--code.innerHTML = `0${i}s后重新获取`if (i === 0) {clearInterval(timer)code.innerHTML = `重新获取`// 到时间了，可以开启 flag了flag = true}        }, 1000)}})})();// 2. 验证用户名// 2.1 获取用户名表单const username = document.querySelector('.xtx-form [name=username]')// 2.2 使用change 事件  值发生变化的时候username.addEventListener('change', verifyName)// 2.3 封装函数function verifyName() {// console.log(00);const span =  username.nextElementSibling// 2.4 定规则 用户名const reg = /^[a-zA-Z0-9-_]{6,10}$/if (!reg.test(username.value)) {span.innerHTML = '用户名输入有误,请输入6~10位'return false}// 2.5 合法的   就清空 spanusername.nextElementSibling.innerHTML = ''return true}// 3. 验证手机号// 3.1 获取手机号表单const phone = document.querySelector('.xtx-form [name=phone]')// 3.2 使用change 事件  值发生变化的时候phone.addEventListener('change', verifyPhone)// 3.3 封装函数function verifyPhone() {// console.log(00);const span =  phone.nextElementSibling// 3.4 定规则 手机号const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/if (!reg.test(phone.value)) {span.innerHTML = '输入有误,请输入正确的手机号'return false}// 3.5 合法的   就清空 spanphone.nextElementSibling.innerHTML = ''return true}// 4. 验证验证码// 4.1 获取验证码表单const code = document.querySelector('.xtx-form [name=code]')// 4.2 使用change 事件  值发生变化的时候code.addEventListener('change', verifyCode)// 4.3 封装函数function verifyCode() {// console.log(00);const span =  code.nextElementSibling// 4.4 定规则 验证码const reg = /^\d{6}$/if (!reg.test(code.value)) {span.innerHTML = '输入有误,请输入正确的验证码'return false}// 4.5 合法的   就清空 spancode.nextElementSibling.innerHTML = ''return true}// 5. 验证密码// 5.1 获取密码表单const password = document.querySelector('.xtx-form [name=password]')// 5.2 使用change 事件  值发生变化的时候password.addEventListener('change', verifyPassword)// 5.3 封装函数function verifyPassword() {// console.log(00);const span =  password.nextElementSibling// 5.4 定规则 密码const reg = /^[a-zA-Z0-9-_]{6,20}$/if (!reg.test(password.value)) {span.innerHTML = '输入有误,6~20位数字字母符号组成'return false}// 5.5 合法的   就清空 spanpassword.nextElementSibling.innerHTML = ''return true}// 6. 密码的再次验证// 6.1 获取再次验证密码表单const confirm = document.querySelector('.xtx-form [name=confirm]')// 6.2 使用change 事件  值发生变化的时候confirm.addEventListener('change', verifyConfirm)// 6.3 封装函数function verifyConfirm() {// console.log(00);const span =  confirm.nextElementSibling// 当前表单的值不等于密码框的值就是错误的if (confirm.value !== password.value) {span.innerHTML = '两次输入密码不一致'return false}// 6.4 合法的   就清空 spanconfirm.nextElementSibling.innerHTML = ''return true}// 7. 我同意模块const agree = document.querySelector('.xtx-form-item .icon-queren')agree.addEventListener('click', function(){// 切换类，原来有就删掉，原来没有就添加this.classList.toggle('icon-queren2')})// 8. 表单提交模块const form = document.querySelector('form')form.addEventListener('submit', function(e){// 判断是否勾选我同意模块，如果有 icon-queren2 说明就勾选了，否则就没勾选if(!agree.classList.contains('icon-queren2')) {alert('请勾选同意协议')// 阻止提交e.preventDefault()}// 依次判断上面的每个框框是否通过， 只要有一个没有通过的就阻止// console.log(verifyName());if (!verifyName()) e.preventDefault()if (!verifyPhone()) e.preventDefault()if (!verifyCode()) e.preventDefault()if (!verifyPassword()) e.preventDefault()if (!verifyConfirm()) e.preventDefault()})</script>

2. 阶段案例（登录、首页页面）（重点）

小兔鲜登录页面

tab栏切换时，由于对应的 .tab-pane两个盒子没有设置 active类，所以最好不要为其设置active类，不能使用排他思想，故可将所有的 .tab-pane获得，将其隐藏起来（for循环），然后再为对应的盒子设置显示。

h5新属性 required属性表示不能为空

  <script>// 1.tab栏切换const tab_nav = document.querySelector('.tab-nav')const pane = document.querySelectorAll('.tab-pane')// 1.1事件监听，使用事件委托tab_nav.addEventListener('click', function(e){if (e.target.tagName === 'A') {// 排他思想，去掉上一个activetab_nav.querySelector('.active').classList.remove('active')// 当前元素添加activee.target.classList.add('active')// 先干掉所有人，for循环for(let i = 0; i < pane.length; i++) {pane[i].style.display = 'none'}// 让对应序号的 大pane显示pane[e.target.dataset.id].style.display = 'block'}})// 2. 点击登录跳转页面const form = document.querySelector('form')const agree = form.querySelector('[name=agree]')const username = form.querySelector('[name=username]')form.addEventListener('submit', function(e){e.preventDefault()// 判断是否勾选同意协议if(!agree.checked){       return alert('请勾选同意协议')}// 将用户名记录到本地存储中localStorage.setItem('xtx-uname', username.value)// 跳转到首页location.href = 'index.html'})</script>

小兔鲜首页页面

注意在渲染的时候渲染的是小 li 而不是 a ，因为当显示用户名时会切换链接地址和添加小图标，同时对于第二个是退出登录还是请先注册的链接地址也不一样，故给 li 的innerHTML渲染。

  <script>// 1. 获取li 元素const li1 = document.querySelector('.xtx_navs li:first-child')const li2 = li1.nextElementSibling// 2.最好做个渲染函数function render() {// 2.1 读取本地存储的用户名const uname = localStorage.getItem('xtx-uname')if(uname) {li1.innerHTML = `<a href="javascript:;"><i class="iconfont icon-user">${uname}</i></a>`li2.innerHTML = `<a href="javascript:;">退出登录</a>`} else {li1.innerHTML = `<a href="./login.html">请先登录</a>`li2.innerHTML = `<a href="./register.html">免费注册</a>`}}render()  //调用函数// 2. 点击退出登录li2.addEventListener('click', function(){// 删除本地存储的数据localStorage.removeItem('xtx-uname')// 重新渲染render()})</script>

3. 小兔鲜放大镜效果

业务分析：

①：鼠标经过对应小盒子，左侧中等盒子显示对应中等图片

②：鼠标经过中盒子，右侧会显示放大镜效果的大盒子

③：黑色遮罩盒子跟着鼠标来移动

④：鼠标在中等盒子上移动，大盒子的图片跟着显示对应位置

思路分析：

①：鼠标经过小盒子，左侧中等盒子显示对应中等图片

1. 获取对应的元素
2. 采取事件委托的形式，监听鼠标经过小盒子里面的图片，注意此时需要使用 `mouseover` 事件，因为需要事件冒泡触发small，所以以后对于鼠标经过事件想用事件委托时使用 mouseover
3. 让鼠标经过小图片的爸爸li盒子，添加类，其余的li移除类（注意先移除，后添加）
4. 鼠标经过小图片，可以拿到小图片的src，可以做两件事
- 让中等盒子的图片换成这个这个小图片的src
- 让大盒子的背景图片，也换成这个小图片的 src （稍后做）

②：鼠标经过中等盒子，右侧大盒子显示

1. 用到鼠标经过和离开，鼠标经过中盒子，大盒子利用 display 来显示和隐藏

2. 鼠标离开不会立马消失，而是有200ms的延时，用户体验更好，所以尽量使用定时器做个延时 setTimeout

3. 显示和隐藏也尽量定义一个函数，因为鼠标经过离开中等盒子，会显示隐藏，同时，鼠标经过大盒子，也会显示和隐藏

4. 给大盒子里面的背景图片一个默认的第一张图片(去CSS样式中添加，因为在JS中写的大盒子背景是鼠标移入点击事件时把小盒子的图片地址给大盒子，但当页面一打开时，大盒子没有背景图片，此时移入中等盒子不会出现背景图片，有bug，所以我们应该给大盒子一个默认的第一张图片)

    function hide() {//  鼠标离开不会立马消失，而是有200ms的延时,使用setTimeout函数setTimeout(function(){large.style.display = 'none'}, 250)}

如果我们采用上面代码，会出现问题：鼠标一离开就开启一个定时器，所以当我们快速离开进入中等盒子时，会开启多个定时器，导致鼠标即使移入了中等盒子，但是由于定时器的隐藏效果会导致图片不显示。

因此，我们应该当鼠标进入中等盒子时，关掉定时器，采用如下写法：

    let timer = nullfunction show() {// 先清除定时器clearTimeout(timer)large.style.display = 'block'}// 隐藏函数 隐藏大盒子function hide() {//  鼠标离开不会立马消失，而是有200ms的延时,使用setTimeout函数timer = setTimeout(function(){large.style.display = 'none'}, 250)}

③：黑色遮罩盒子跟着鼠标来移动

1. 先做鼠标经过中等盒子，显示隐藏黑色遮罩的盒子

2. 让黑色遮罩跟着鼠标来走, 需要用到鼠标移动事件 mousemove

3. 让黑色盒子的移动的核心思想：不断把鼠标在中等盒子内的坐标给黑色遮罩层 let top 值，这样遮罩层就可以跟着移动了

- 需求

- 我们要的是鼠标在中等盒子内的坐标，没有办法直接得到
- 得到1：鼠标在页面中的坐标
- 得到2：中等盒子在页面中的坐标

- 算法

- 得到鼠标在页面中的坐标利用事件对象的 pageX
- 得到middle中等盒子在页面中的坐标 middle.getBoundingClientRect()
- 鼠标在middle 盒子里面的坐标 = 鼠标在页面中的坐标 - middle 中等盒子的坐标
- 黑色遮罩层不断得到鼠标在middle 盒子中的坐标就可以移动起来了

>注意 y坐标特殊，需要减去页面被卷去的头部，因为getBoundingClientRect()获取的是相对于可视窗口的坐标，当页面滚动时，会出现问题
>为什么不用 box.offsetLeft 和 box.offsetTop 因为这俩属性跟带有定位的父级有关系，很容被父级影响，而getBoundingClientRect() 不受定位的父元素的影响

- 限定遮罩的盒子只能在middle 内部移动，需要添加判断

- 限定水平方向大于等于0 并且小于等于 400
- 限定垂直方向大于等于0 并且小于等于 400

通过console.log(middle.getBoundingClientRect());得到中等盒子的坐标如下图

- 遮罩盒子移动的坐标：

- 声明一个 mx 作为移动的距离
- 水平坐标 x 如果小于等于100 ，则移动的距离 mx 就是 0 不应该移动
- 水平坐标如果大于等于100 并且小于300，移动的距离 mx就是 x - 100 （100是遮罩盒子自身宽度的一半）
- 水平坐标如果大于等于300，移动的距离就是 mx 就是200 不应该在移动了
- 其实我们发现水平移动，就在 100 ~ 200 之间移动的
- 垂直同理

        // 声明两个变量， 黑色盒子移动的距离let mx = 0let my = 0if (x <= 100) mx = 0if (x > 100 && x < 300) mx = x - 100if(x >= 300) mx = 200if (y <= 100) my = 0if (y > 100 && y < 300) my = y - 100if(y >= 300) my = 200

- 大盒子图片移动的计算方法：
- 中等盒子是 400px 大盒子是 800px 的
- 中等盒子移动1px，大盒子就应该移动2px，只不过是负值

~~~JavaScript
large.style.backgroundPositionX = - 2 * mx + 'px'
large.style.backgroundPositionY = - 2 * my + 'px'

  <script>// 顶部导航栏自动滑出(function(){const sticky = document.querySelector('.sticky')const header = document.querySelector('.xtx_header .wrapper')const headerTop = header.offsetTopconst headerHeight = header.clientHeightconst top = headerTop + headerHeightwindow.addEventListener('scroll', function(){const n = document.documentElement.scrollTopif (n >= top) {sticky.style.top = '0px'} else {sticky.style.top = '-80px'}})})();// 三个盒子的故事，放大镜效果// 1. 获取三个盒子const small = document.querySelector('.small')const middle = document.querySelector('.middle')const large = document.querySelector('.large')// 2. 鼠标经过对应的小盒子，左侧中等盒子显示对应的图片// 事件委托，注意必须使用mouseover，因为事件委托利用的是冒泡原理，而mouseenter不能冒泡small.addEventListener('mouseover', function(e){if (e.target.tagName === 'IMG') {// 排他思想 干掉以前的 active  li 上面this.querySelector('.active').classList.remove('active')// 当前元素的爸爸li 添加 activee.target.parentNode.classList.add('active')// console.log(middle.children[0]);// 让中等盒子里面的图片，src 更换为   小图片srcmiddle.querySelector('img').src = e.target.src// 大盒子更换背景图片,注意图片背景的属性值为 url()large.style.backgroundImage = `url(${e.target.src})`}})// 3. 鼠标经过中等盒子，显示隐藏大盒子middle.addEventListener('mouseenter', show)middle.addEventListener('mouseleave', hide)// 显示函数 显示大盒子let timer = nullfunction show() {// 先清除定时器clearTimeout(timer)large.style.display = 'block'}// 隐藏函数 隐藏大盒子function hide() {//  鼠标离开不会立马消失，而是有200ms的延时,使用setTimeout函数timer = setTimeout(function(){large.style.display = 'none'}, 250)}// 4. 鼠标经过大盒子，显示隐藏大盒子large.addEventListener('mouseenter', show)large.addEventListener('mouseleave', hide)// 5. 做鼠标经过 中等盒子，显示隐藏 黑色遮罩 的盒子const layer = document.querySelector('.layer')middle.addEventListener('mouseenter', function(){layer.style.display = 'block'})middle.addEventListener('mouseleave', function(){layer.style.display = 'none'})// 6. 移动黑色遮罩盒子middle.addEventListener('mousemove', function(e){// 鼠标在中等盒子的坐标 = 鼠标在页面的坐标 - middle 盒子的坐标// console.log(middle.getBoundingClientRect().x);// console.log(middle.getBoundingClientRect().left);let x = e.pageX - middle.getBoundingClientRect().leftlet y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop// 黑色遮罩移动 在middle 盒子内 限定移动距离if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {// 黑色盒子不是一直移动的// 声明两个变量， 黑色盒子移动的距离let mx = 0let my = 0if (x <= 100) mx = 0if (x > 100 && x < 300) mx = x - 100if(x >= 300) mx = 200if (y <= 100) my = 0if (y > 100 && y < 300) my = y - 100if(y >= 300) my = 200layer.style.left = mx + 'px'layer.style.top = my + 'px'// 大盒子的背景图片要跟随 中等盒子移动 存在的关系是 2倍large.style.backgroundPositionX = -2 * mx + 'px'large.style.backgroundPositionY = -2 * my + 'px'}})//商品详情和商品评价切换const tabHead = document.querySelector('.tab-head')tabHead.addEventListener('click', function(e){if(e.target.tagName === 'A') {const active = document.querySelector('.tab-head .active')if (active) active.classList.remove('active')e.target.classList.add('active')const id = e.target.dataset.idconst a = id == 2 ? 3 : 2document.querySelector(`.main .cont>div:nth-child(${id})`).style.display = 'block'document.querySelector(`.main .cont>div:nth-child(${a})`).style.display = 'none'}})/* //点击尺寸(function () {const dd = document.querySelector('.item #size');dd.addEventListener('click', function (e) {if (e.target.tagName == 'SPAN') {const active = document.querySelector('.item #size .active');if (active) active.classList.remove('active');e.target.classList.add('active');}});})();//点击颜色(function () {const dd = document.querySelector('.item #color');dd.addEventListener('click', function (e) {if (e.target.tagName == 'IMG') {const active = document.querySelector('.item  #color img.active');if (active) active.classList.remove('active');e.target.classList.add('active');}});})(); */</script>