javascript封装-DOM时间基础题

1,封装时间对象

主要练习封装.事件自己变化即可

<script>
    //获取元素
    let body = document.body

    //月份,天数,如果是个位数需要补零所以单独用个函数封装,调用
    function fu(x) {
      let num = x < 10 ? '0' + x : x
      return num
    }

    //用一个函数放封装对象,用于定时器
    function get() {
      //封装对象
    let getDate = {
      //获取当下时间
      date: new Date(),
      //使用方法
      getYear: function () {
        //获取年份
        return this.date.getFullYear()
      },
      getMonth: function  () {
        //获取月份, 月份是从0开始,所以加1
        let y =  this.date.getMonth() + 1
        //调用上方函数
        fu(y)
        return y 
      },
      getDate: function () {
        //获取天数
        let t = this.date.getDate()
        //调用函数
        fu(t)
        return t
      }
    }
      //页面打印
    body.innerHTML = `现在是:${getDate.getYear()}年${getDate.getMonth()}月${getDate.getDate()}日`
    }
    //使用定时器函数调用
    setInterval(get, 1000)

  </script>

2,焦点图-轮播图 练习

<–出门左转有css,html完整代码–>

<script>
    //获取元素
    let lis = document.querySelectorAll('.indicator li')
    let imgs = document.querySelectorAll('.slides>img')
    let h3Text = document.querySelector('.extra h3')

    //按钮获取元素
    let prev = document.querySelector('.extra .prev')
    let next = document.querySelector('.extra .next')

    let main = document.querySelector('.main')

    //按钮变量
    let index = 0

    //定时器变量
    let timer = null


    //自动播放函数
    function name() {
      index++
      index = index % lis.length
      fu()
    }

    //抽取相同代码封装
    function fu() {

      //点击时底部图片跟随变换
      document.querySelector('.indicator .active').className = ''
      lis[index].className = 'active'

      //点击时图片跟随变换
      for (let j = 0; j < imgs.length; j++) {
          //把所有图片隐藏
          imgs[j].style.display = 'none'
        }
        //以下代码写在循环外,节约浏览器性能,不用多次循环
        //单独显示经过的一个
        imgs[index].style.display = 'block'

        //文字跟随变换
        h3Text.innerHTML = `第${index + 1}张图的描述信息`
    }


    //开始底部图片鼠标经过业务
    //循环得到每个li
    for (let i = 0; i < lis.length; i++) {
      //设置鼠标经过
      lis[i].addEventListener('mouseover', function () {
        index = i
        fu()
      })
    }

    //开始右边按钮业务, 用index来控制
    next.addEventListener('click', function () {
      index++
      //判断条件
      index = index % lis.length

      //函数已封装,直接调用
      fu()
    })

    //开始左边按钮业务
    prev.addEventListener('click', function () {
      // 判断条件第一种 减减放后边
      if (index == 0) {
        index = 10
      }

      // 判断条件第二种 减减需要放前面
      // if(index < 0){
      //   index = lis.length - 1
      // }
      index--

      //函数已封装,直接调用
        fu()
    })


    //定时器函数
    timer = setInterval(name, 1000)

    //鼠标移入停止播放
    main.addEventListener('mouseover', function () {
      clearInterval(timer)
    })
    //鼠标移除开始播放
    main.addEventListener('mouseout', function () {
      timer = setInterval(name, 1000)
    })
  </script>

3,新浪下拉菜单

鼠标经过样样式

4,京东导航栏

第一种放法,后续会加上第二种封装

都是鼠标经过样式

<script>
    // 需求: 鼠标移入左侧导航, 当前导航高亮, 显示相应右侧导航, 而且鼠标也能在右侧分类中滑动, 当离开父级标签区域后, 导航高亮消失,分类隐藏
    // 思路: 鼠标移入左侧导航, 排他思想, 只设置当前li高亮和索引对应div右侧出现, 移出父级区域时, 把导航和div回归初始状态
    //获取元素
   let left = document.querySelectorAll('.left ul li')
   let right = document.querySelectorAll('.right .item')
   let body = document.body

   //鼠标移入
   for (let i = 0; i < left.length; i++) {
       //设置鼠标移入左边事件
       left[i].addEventListener('mouseover', function () {
           //鼠标移入到左边时改变背景颜色
           this.style.backgroundColor = 'rgba(153, 153, 153, 0.657)'

           //鼠标移入左边时右边的样式
           for(let j = 0; j < right.length; j++) {
               //鼠标移入右边时的样式
               right[j].addEventListener('mouseover', function () {

                //先全部隐藏
                right[j].style.display = 'none'
                //再单独显示
                right[j].style.display = 'block'

                //同时左边的背景颜色不改变
                left[j].style.backgroundColor = 'rgba(153, 153, 153, 0.657)'
               })
               //此行代码是左边鼠标移入的时候,先隐藏全部
               right[j].style.display = 'none'
           }
           //鼠标在左边的时候单独显示
           right[i].style.display = 'block'
       })
   }
   //鼠标移开
   for (let i = 0; i < left.length; i++) {
       //鼠标移出左边时的样式
       left[i].addEventListener('mouseout', function () {
           //首先背景色清空
        this.style.backgroundColor = ''
            //右边的样式
           for(let j = 0; j < right.length; j++) {
               //右边隐藏
               right[j].style.display = 'none'
               //左边颜色清空
               left[j].style.backgroundColor = ''
           }
       })
   }

   for(let j = 0; j < right.length; j++) {

       //鼠标移除右边的时候样式
       right[j].addEventListener('mouseout', function () {
           //鼠标移除时右边全部隐藏
           this.style.display = 'none'
           //右边背景色变无
           left[j].style.backgroundColor = ''
       })
            
           }
  </script>

5,关闭二维码

<script>
    //获取元素
    let close = document.querySelectorAll('.erweima .close')
    let erweima = document.querySelectorAll('.erweima')

    for(let i = 0; i < close.length; i++) {
      close[i].addEventListener('click', function() {
        for (let j = 0; j < erweima.length; j++) {
          erweima[i].style.display = 'none'
        }
        
      })
    }
  </script>