前端常用代码大全_web前端开发代码

一. js

1.随机函数代码

 function getRandom(min, max) { 
   
        return Math.floor(Math.random() * (max - min + 1)) + min
      }

2.倒计时代码

      let now = +new Date()
      // 2. 得到指定时间的时间戳
      let last = +new Date('这里写想要达到的时间')
      // 3. （计算剩余的毫秒数） / 1000 === 剩余的秒数
      let count = (last - now) / 1000
      // console.log(count)
      // 4. 转换为时分秒
      // h = parseInt(总秒数 / 60 / 60 % 24) // 计算小时
      let h = parseInt(count / 60 / 60 % 24)
      h = h < 10 ? '0' + h : h
      // m = parseInt(总秒数 / 60 % 60); // 计算分数
      let m = parseInt(count / 60 % 60)
      m = m < 10 ? '0' + m : m
      // s = parseInt(总秒数 % 60); // 计算当前秒数
      let s = parseInt(count % 60);
      s = s < 10 ? '0' + s : s
      // console.log(h, m, s)
      

3.精确显示时间代码

 let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        let div = document.querySelector('div')
        // 先调用，就省去了1秒的空白期
        getTime()
        setInterval(getTime, 1000)
        function getTime() { 
   
            // 1. 实例化时间对象 一定写到定时器里面才可以额
            let date = new Date()
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let date1 = date.getDate()
            let hour = date.getHours()
            let min = date.getMinutes()
            let sec = date.getSeconds()
            let day = date.getDay()
            div.innerHTML = `今天是： ${ 
     year}年${ 
     month}月${ 
     date1}日 ${ 
     hour}:${ 
     min}:${ 
     sec} ${ 
     arr[day]}`
        }

4.表单删除常用代码

 // 删除操作， 删除的也是数组里面的数据 ， 但是我们用事件委托，注意单独写，不要写道循环
    tbody.addEventListener('click', function (e) { 
   
      // 我们只能点击了链接 a ，才会执行删除操作
      // console.dir(e.target.tagName)输出A（A是点击的删除超链接标签）
      if (e.target.tagName === 'A') { 
   
        // 删除操作 删除 数组里面的数据 arr.splice(从哪里开始删，1)
        // 我要得到a的id 需要在渲染的时候动态添加即可
        // console.log(e.target.id)
        arr.splice(e.target.id, 1)
        // 重新渲染我们的函数
        render()
      }
    })

5.排他思想核心代码

       // 1. 获元取素 
        let items = document.querySelectorAll('.item')
        for (let i = 0; i < items.length; i++) { 
   
            items[i].addEventListener('click', function () { 
   
                // 找到上一个active 移除类
                document.querySelector('.aside .active').classList.remove('active')
                // 点击谁谁添加类
                this.classList.add('active')
            })
        }

6.轮播图案例核心代码

    // 给多个小li绑定事件（下方导航小圆点），此案例使用的是鼠标移入移出的事件
    for (let i = 0; i < lis.length; i++) { 
   
      lis[i].addEventListener('mouseenter', function () { 
   
        // 选出唯一的那个active ，删除类
        document.querySelector('.indicator .active').classList.remove('active')
        // 鼠标经过谁，谁加上active 这个类
        this.classList.add('active')
        // 需求② ：大图片跟随变化 一定要放到鼠标经过事件里面
        // 对应的大图片跟着显示，如果想要过渡效果，可以使用opacity效果，可以利用CSS淡入 淡出的效果，还是添加类
        // 选出唯一的那个active ，删除类
        document.querySelector('.slides ul .active').classList.remove('active')
        // 对应序号的那个 li，谁加上active 这个类
        piclis[i].classList.add('active')
        text.innerHTML = `第${ 
     i + 1}张图的描述信息`
        // 点击右侧按钮可以实现播放下一张，但是鼠标经过前面的，播放就会乱序
        // 解决方案： 让变化量 index 重新赋值为 当前鼠标经过的索引号
        // 鼠标经过了那个小li 他的索引号就是 i 
        // 右侧按钮是通过 index 来了控制播放的
        index = i
      })
    }
    // 需求③：右侧按钮播放效果
    // 点击右侧按钮，可以自动播放下一张图片
    // 需要一个变化量 index 不断自增
    // 如果到了最后一张，必须要还原为第1张图片
    // 教你一招： 索引号 = 索引号 % 数组长度 （放到播放前面）
    let index = 0  // 全局变量 信号量 控制器 为了给 右侧按钮和左侧按钮同时使用
    next.addEventListener('click', function () { 
   
      index++
      // 选出 index 小图片 做操作
      // console.log(index)
      // if (index === lis.length) { 
   
      // index = 0
      // }
      index = index % lis.length
      common()
    })

    // 教你一招： 索引号 = (数组长度 + 索引号) % 数组长度
    prev.addEventListener('click', function () { 
   
      index--
      // 选出 index 小图片 做操作
      // console.log(index)
      if (index < 0) { 
   
        index = lis.length - 1
      }
      // index = (lis.length + index) % lis.length
      common()
    })
    // 需求⑥：
    // 因为左侧按钮和右侧按钮里面有大量相同的操作，可以抽取封装一个函数 common
    function common() { 
   
      document.querySelector('.indicator .active').classList.remove('active')
      lis[index].classList.add('active')
      // 选出 index 大图片 做操作
      document.querySelector('.slides ul .active').classList.remove('active')
      piclis[index].classList.add('active')
      text.innerHTML = `第${ 
     index + 1}张图的描述信息`
    }
    // 需求：开启定时器
    // 其实定时器自动播放，就相当于点击了右侧按钮，此时只需要， next.click()
    let timer = setInterval(function () { 
   
      // 自动调用右侧按钮的点击事件
      next.click()
    }, 1000)
    // 需求⑧：
    // 鼠标经过停止定时器 （清除定时器）
    main.addEventListener('mouseenter', function () { 
   
      clearInterval(timer)
    })
    // 鼠标离开开启定时器 （开启定时器）
    main.addEventListener('mouseleave', function () { 
   
      timer = setInterval(function () { 
   
        // 自动调用右侧按钮的点击事件
        next.click()
      }, 1000)
    })

今天的文章前端常用代码大全_web前端开发代码分享到此就结束了，感谢您的阅读。