js高级综合案例

摇光93

于 2023-04-07 22:15:29 发布

阅读量147

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_73270720/article/details/130021839

版权

前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

js高级综合案例

注册页面

 <script>
    // 1.获取短信验证码
    const code =document.querySelector('.code')
    let  flag=true
    code.addEventListener('click',function(){
     if(flag)
     {
      flag=false
      let i=5
      code.innerHTML=`0${i}秒后重新获取`

      const timerid=setInterval(function()
      {
        i--;
        code.innerHTML=`0${i}秒后重新获取`
        if(i==0)
        {
          clearInterval(timerid)
          code.innerHTML='重新获取'
          flag=true
        }
      },1000)
     }
    })
    //2.验证用户名输入
    //  1 获取用户名表单
    const username=document.querySelector('[name=username]')
    username.addEventListener('change',verfifyName)
    //  2 封装verifyName函数
    function verfifyName()
    {
      const span=username.nextElementSibling
    // 2.3 定规则
    const reg=/^[a-zA-Z0-9_]{6,10}$/
    if(!reg.test(username.value))
    {
      span.innerHTML='输入不合法，请重新输入'
      return false
    }
    // 2.4 合法
    span.innerHTML=''
    return true
    }


     //3.验证手机号码输入
    //  1 获取手机号码表单
    const phone=document.querySelector('[name=phone]')
    phone.addEventListener('change',verfifyPhone)
    //  2 封装verifyName函数
    function verfifyPhone()
    {
      const span=phone.nextElementSibling
    // 3.3 定规则
    const reg=/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]\d{8})$/
    if(!reg.test(phone.value))
    {
      span.innerHTML='输入不合法，请重新输入'
      return false
    }
    // 3.4 合法
    span.innerHTML=''
    return true
    }

    //4.验证短信验证吗输入
    //  1 获取短信验证码表单
    const codeinput=document.querySelector('[name=code]')
    codeinput.addEventListener('change',verfifyCode)
    //  2 封装verifyName函数
    function verfifyCode()
    {
      const span=codeinput.nextElementSibling
    // 3.3 定规则
    const reg=/^[a-zA-Z0-9_]{6,10}$/
    if(!reg.test(codeinput.value))
    {
      span.innerHTML='输入不合法，请重新输入'
      return false
    }
    // 3.4 合法
    span.innerHTML=''
    return true
    }



     //5.密码输入
    //  1 获取短信验证码表单
    const password=document.querySelector('[name=password]')
    password.addEventListener('change',verfifypassword)
    //  2 封装verifyName函数
    function verfifypassword()
    {
      const span=password.nextElementSibling
    // 3.3 定规则
    const reg=/^[a-zA-Z0-9_]{6,10}$/
    if(!reg.test(password.value))
    {
      span.innerHTML='输入不合法，请重新输入'
      return false
    }
    // 3.4 合法
    span.innerHTML=''
    return true
    }


   //6.再次验证密码
    //  1 获取短信验证码表单
    const confirm=document.querySelector('[name=confirm]')
    confirm.addEventListener('change',verfifyconfirm)
    //  2 封装verifyName函数
    function verfifyconfirm()
    {
      const span=confirm.nextElementSibling
    // 3.3 定规则
    const reg=/^[a-zA-Z0-9_]{6,10}$/
    if(confirm.value != password.value)
    {
      span.innerHTML='输入不合法，请重新输入'
      return false
    }
    // 3.4 合法
    span.innerHTML=''
    return true
    }
  
  //7.确认模块
    const queren=document.querySelector('.icon-queren')
    queren.addEventListener('click',function(){
      //切换类，有就删掉，没有就添加
      this.classList.toggle('icon-queren2')

    })
 

  //8.提交模块
    const form= document.querySelector('form')
    //判断是否勾选同意协议，如果没有就终止提交
    form.addEventListener('submit',function(e){
      if(!queren.classList.contains('icon-queren2'))
      {
        alert("请勾选提交协议")
        //阻止默认提交
        e.preventDefault()
      }

      //一次判断上面每个框是否通过
      if(!verfifyName()) e.preventDefault()
      if(!verfifyPhone()) e.preventDefault()
      if(!verfifyCode()) e.preventDefault()
      if(!verfifypassword()) e.preventDefault()
      if(!verfifyconfirm()) e.preventDefault()
     
    })


 
 </script>

登录界面

<script>
    //1 tab栏切换----事件委托
    const tab_nav=document.querySelector('.tab-nav')
    const pane=document.querySelectorAll('.tab-pane ')

    tab_nav.addEventListener('click',function(e){
      if(e.target.tagName==='A')
      {
        //1.切换效果
                    //取消上一个的active，当前元素添加active（下划线效果）
        tab_nav.querySelector('.active').classList.remove('active')
        e.target.classList.add('active')
        //2.显示隐藏
            //  1.先隐藏所有
            //  2.再显示点击的东东
        for(let i=0;i<pane.length;i++)
        {
          pane[i].style.display='none'
        }

        pane[e.target.dataset.id].style.display='block'

      }
    })
    //2 点击提交模块
    const agree=document.querySelector('[name="agree"]')
    const form=document.querySelector('form')
    const username=document.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>

首页渲染登录跳转

<script>
    //1 tab栏切换----事件委托
    const tab_nav=document.querySelector('.tab-nav')
    const pane=document.querySelectorAll('.tab-pane ')

    tab_nav.addEventListener('click',function(e){
      if(e.target.tagName==='A')
      {
        //1.切换效果
                    //取消上一个的active，当前元素添加active（下划线效果）
        tab_nav.querySelector('.active').classList.remove('active')
        e.target.classList.add('active')
        //2.显示隐藏
            //  1.先隐藏所有
            //  2.再显示点击的东东
        for(let i=0;i<pane.length;i++)
        {
          pane[i].style.display='none'
        }

        pane[e.target.dataset.id].style.display='block'

      }
    })
    //2 点击提交模块
    const agree=document.querySelector('[name="agree"]')
    const form=document.querySelector('form')
    const username=document.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>

放大镜

 <script>
    const small=document.querySelector('.small')
    const middle=document.querySelector('.middle')
    const large=document.querySelector('.large')

    //1.放在小盒子上，中盒子切换，----转换src
    // tips:mouseover/mouseenter---有冒泡才能用事件委托？
    small.addEventListener('mouseover',function(e)
    {
      if(e.target.tagName==='IMG')
      {
        small.querySelector('.active').classList.remove('active')
        e.target.parentNode.classList.add('active')

        middle.querySelector('img').src=e.target.src

        //大盒子更换背景图--模板字符串装变量
        large.style.backgroundImage=`url(${e.target.src})`
      }
    })

    //2.放在中盒子上， 大盒子显示
    // tips :settimeout/strtimeinterval
    middle.addEventListener('mouseenter',show)
    middle.addEventListener('mouseleave',hide)
    let timerid=0
    //show 函数
    function show()
    {
      clearTimeout(timer)//防止多次触发，出现的bug
      large.style.display='block'
    }

    //hide 函数
    function hide()
    {
      //大盒子隐藏做个延时效果---交互效果更好
      timer=setTimeout(function(){
      large.style.display='none'
      },200)
    }

    //3.放在大盒子上的显示隐藏效果
    large.addEventListener('mouseenter',show)
    large.addEventListener('mouseleave',hide)

    //4.大盒子更换img的src



    //5.黑色遮罩盒子
        const layer=document.querySelector('.layer')
        // 1.鼠标经过中等盒子，显示隐藏-黑色盒子
        middle.addEventListener('mousemove',function(){
          layer.style.display='block'
        })
        middle.addEventListener('mouseleave',function(){
          layer.style.display='none'
        })
        // 2.黑色盒子跟着鼠标移动
          middle.addEventListener('mousemove',function(e){
            //得到鼠标在中等盒子里面的坐标--鼠标在页面的坐标-中等盒子在页面的坐标\
            //tips:offsettop--易受定位的父级影响，而getbound 不受定位父级影响
            let x=e.pageX-middle.getBoundingClientRect().left 
            let y=e.pageY-middle.getBoundingClientRect().top- document.documentElement.scrollTop
            //黑色移动在minddle内
            if(x>=0 && x<=400 && y>=0 && y<= 400)
            {
              let mx=0,my=0

              if (x < 100) mx = 0
              if (x >= 100 && x <= 300) mx = x - 100
              if (x > 300) mx = 200

              if (y < 100) my = 0
              if (y >= 100 && y <= 300) my = y - 100
              if (y > 300) my = 200

              layer.style.left= mx+ 'px'
              layer.style.top= my+ 'px'


          //3.黑色遮罩盒子移动，大盒子显示对应的图片
              large.style.backgroundPositionX=-2*mx+'px'
              large.style.backgroundPositionY=-2*my+'px'
            }

  


          })
  </script>

防抖节流

  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <script>
    //tips:1.ontimeupdate--在当前 视频/音频 发生改变时触发---触发频率高，设置节流
    //tips:2.onloadeddata--在当前帧加载完成，且还没有足够数据播放下一帧的时候触发

  const video=document.querySelector('video')
  video.ontimeupdate = _.throttle(()=>{
    localStorage.setItem('time',video.currentTime)
  },1000)

    //页面打开后触发
    video.onloadeddata=()=>{
      video.currentTime=localStorage.getItem('time')
    }
  </script>

点击按钮弹窗效果

 <script>
    //model构造函数的封装，---模态框
    function Modal(title='',message=''){
      //创建model模态框盒子
      //1.创建div盒子，并添加类名为model
      //2.model盒子内部填充两个div盒子并且修改文字内容
      
      this.modalBox=document.createElement('div')
      this.modalBox.className='modal'
      this.modalBox.innerHTML=`
      <div class="header">${title} <i>x</i></div>
      <div class="body">${message}</div>
      `
      console.log(this.modalBox);
    }


    // new Modal('温馨提示','您没有权限删除')
    // new Modal('友情提示','您还没有注册账号')

    // 2.给modal构造函数创建open函数与close函数
      Modal.prototype.open=function(){
        //tips:判断页面是否有modalbox
        const box=document.querySelector('.modal')
        box && box.remove()
        //给页面添加modal标签
        document.querySelector('body').append(this.modalBox)
        //
       this.modalBox.querySelector('i').addEventListener('click',()=>{
          this.close()
        })
      }

      
    Modal.prototype.close=function(){
      this.modalBox.remove()
    }
    // 3.点击open效果
    document.querySelector('#delete').addEventListener('click',function(){
      const a=new Modal('温馨提示','您没有权限删除')
      a.open()
    })
    document.querySelector('#login').addEventListener('click',function(){
      const a=new Modal('友情提示','您还没有注册账号')
      a.open()
    })
  </script>

购物网页价格筛选

 <script>
  // 2. 初始化数据
    const goodsList = [
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: '289.00',
        picture:'./images/course01.png'
      },
      {
        id: '4001594',
        name: '日式黑陶功夫茶组双侧把茶具礼盒装',
        price: '288.00',
        picture: './images/course01.png',
      },
      {
        id: '4001009',
        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
        price: '109.00',
        picture:'./images/course02.png'

      },
      {
        id: '4001874',
        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
        price: '488.00',
        picture:'./images/course03.png'

      },
      {
        id: '4001649',
        name: '大师监制龙泉青瓷茶叶罐',
        price: '139.00',
        picture:'./images/course04.png'

      },
      {
        id: '3997185',
        name: '与众不同的口感汝瓷白酒杯套组1壶4杯',
        price: '108.00',
        picture:'./images/course05.png'

      },
      {
        id: '3997403',
        name: '手工吹制更厚实白酒杯壶套装6壶6杯',
        price: '99.00',
        picture:'./images/course06.png'

      },
      {
        id: '3998274',
        name: '德国百年工艺高端水晶玻璃红酒杯2支装',
        price: '139.00',
        picture:'./images/course07.png'
      },
    ]
  // 3.渲染函数  封装
    render(goodsList)
    function render(arr)
    {
      //声明空字符串
      let str=''
    
      //遍历数组
      arr.forEach(item => 
      {
        //解构
        const {name,picture,price}=item
          str+=`
            <div class="item">
            <img src=${picture} alt="">
            <p class="name">${name}</p>
            <p class="price">${price}</p>
          </div>`
      });
        //追加给list
        document.querySelector('.list').innerHTML=str
    }
  // 4.筛选效果--filter()---只能><等符号来返回新数组
  document.querySelector('.filter').addEventListener('click',function(e){
    //判断
    const {tagName,dataset}=e.target//解构
    if(tagName==='A')
    {
      //返回的新数组
      let arr=goodsList
      if(dataset.index==='1')
      {
        arr=goodsList.filter(item=> item.price>0 &&item.price<=100)
      }
      else if(dataset.index==='2')
      {
        arr=goodsList.filter(item=> item.price>=100 &&item.price<=300)
      }
      else if(dataset.index==='3')
      {
        arr=goodsList.filter(item=> item.price>=300)
      }
      //渲染函数
      render(arr)
      
    }
  })

  </script>

购物网页合计商品总额

 <script>
  // 需求
    // 生成所有的结构，渲染到大盒子list里面去
    //map 方法遍历还有返回值--为数组
    //reduce 方法求和计算总价
//1.渲染list
   const goodsList = [
      {
        id: '4001172',
        name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
        price: 289.9,
        picture:'./images/course01.png',
        count: 2,
        spec: { color: '白色' }
      },
      {
        id: '4001009',
        name: '竹制干泡茶盘正方形沥水茶台品茶盘',
        price: 109.8,
        count: 3,
        picture:'./images/course04.png',
        spec: { size: '40cm*40cm', color: '黑色' }
      },
      {
        id: '4001874',
        name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
        price: 488,
        count: 1,
        picture:'./images/course02.png',
        spec: { color: '青色', sum: '一大四小' }
      },
      {
        id: '4001649',
        name: '大师监制龙泉青瓷茶叶罐',
        price: 139,
        count: 1,
        picture:'./images/course03.png',
        spec: { size: '小号', color: '紫色' },
        gift: '50g茶叶,清洗球'
      }
    ]
   const str= goodsList.map(item=>
   {
    //对象解构--换名
    const {name,price,count,picture,spec,gift}=item

    //规格模块处理
    const text=Object.values(spec).join('/')

    //处理赠品模块---将字符串转换为数组-遍历数组，将数组元素渲染到页面中--因为返回的是数组，需要转换为字符串
    const gif= gift ? gift.split(',').map(item=>
      `<span class="tag">【赠品】${item}</span>`
    ).join('') : ''

    //计算小计模块----注意精度问题，转换为整数
    const sub_total=((price*100*count)/100).toFixed(2)

    return `
    <div class="item">
      <img src=${picture} alt="">
      <p class="name">${name} ${gif} </p>
      <p class="spec">${text}</p>
      <p class="price">${price.toFixed(2)}</p>
      <p class="count">x${count}</p>
      <p class="sub-total">${sub_total}</p>
    </div>`
    }).join('')

  document.querySelector('.list').innerHTML=str
//2.合计模块---reduce
    const total=goodsList.reduce((prev,item)=>prev+((item.price*100*item.count)/100),0)
    document.querySelector('.amount').innerHTML=total.toFixed(2)