前端常用代码整理（不断更新中）

文章目录

• • 一. js
  • • • 1.随机函数代码
      • 2.倒计时代码
      • 3.精确显示时间代码
      • 4.表单删除常用代码
      • 5.排他思想核心代码
      • 6.轮播图案例核心代码

一. 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() + 1let 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.lengthcommon()})//   教你一招： 索引号 = (数组长度 + 索引号) % 数组长度prev.addEventListener('click', function () {index--// 选出 index 小图片 做操作// console.log(index)if (index < 0) {index = lis.length - 1}// index = (lis.length + index) % lis.lengthcommon()})// 需求⑥：//   因为左侧按钮和右侧按钮里面有大量相同的操作，可以抽取封装一个函数 commonfunction 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)})