前端常用代码整理(不断更新中)

文章提供了JavaScript的基础代码示例,包括随机数生成、倒计时实现、时间精确显示、表单数据删除方法、排他思想的核心代码以及轮播图的实现,涵盖了前端开发中常见的功能和技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一. 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)
    })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值