前端项目中常用的小功能

  1. 列举两个日期间的所有日期
    举例:开始日期:2020-03-11 结束日期:2020-04-01, 列举出中间的日期,包括两头的日期。
getDate (datestr) {
  let temp = datestr.split('-')
  if (temp[1] === '01') {
    temp[0] = parseInt(temp[0], 10) - 1
    temp[1] = '12'
  } else {
    temp[1] = parseInt(temp[1], 10) - 1
  }
  // new Date()的月份入参实际都是当前值-1
  let date = new Date(temp[0], temp[1], temp[2])
  return date
},
getDiffDate (start, end) {
  let startTime = this.getDate(start)
  let endTime = this.getDate(end)
  let dateArr = []
  while ((endTime.getTime() - startTime.getTime()) >= 0) {
    let year = startTime.getFullYear()
    let month = (startTime.getMonth() + 1).toString().length === 1 ? '0' + (parseInt(startTime.getMonth().toString(), 10) + 1) : (startTime.getMonth() + 1)
    let day = startTime.getDate().toString().length === 1 ? '0' + startTime.getDate() : startTime.getDate()
    dateArr.push(year + '-' + month + '-' + day)
    startTime.setDate(startTime.getDate() + 1)
  }
  return dateArr
},
  1. 倒计时
    举例:给定一个时间 2020-03-31 11:50:00,实现倒计时
 var countDownTimer = null, timeStr = ''
 countDown() {
   let time = '2020-03-31 11:50:00'
   let endTime = new Date(time).getTime()
   // console.log('endTime',endTime)

   let nowTime = Date.now()

   // 获取时间差
   let diffTime = endTime - nowTime
   if (diffTime <= 0) {
     clearTimeout(countDownTimer)
     return
   }
   // console.log('时间差',diffTime)
   
   // 获取剩余的天数
   let day = parseInt(diffTime / 1000 / 3600 / 24)
   // console.log('day',day)
   
   // 获取剩余的小时数
   let hour = parseInt(diffTime / 1000 / 3600 % 24)
   // console.log('hour',hour)
   
   // 获取剩余的分钟数
   let minute = parseInt(diffTime / 1000 / 60 % 60)
   // console.log('minute',minute)
   
   // 获取剩余的秒数
   let second = parseInt(diffTime / 1000 % 60)
   // console.log('second',second)

   day = setNum(day)
   hour = setNum(hour)
   minute = setNum(minute)
   second = setNum(second)

   this.timeStr = `${day}${hour}${minute}${second}秒`

   if (day === '00') {
     timeStr = `${hour}${minute}${second}秒`
   }
   if (day === '00' && hour === '00') {
     timeStr = `${minute}${second}秒`
   }
   if (day === '00' && hour === '00' && minute === '00') {
     timeStr = `${second}秒`
   }
   // console.log('timeStr', this.timeStr)
   countDownTimer = setTimeout(countDown, 1000)
 }
 setNum (num) {
   if (num < 10) {
     num = `0${num}`
   }
   return num
 }

3、获取当前月的天数

let date = new Date()
let d = new Date(date.getFullYear(), date.getMonth() + 1, 0)
let currentMonthDays = d.getDate()
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端面试时,项目可能会遇到各种问题。其一些常见的问题包括: - 兼容性问题:不同浏览器对于某些CSS属性或JS方法的支持可能存在差异,导致页面在不同浏览器上显示效果不一致。 - 性能问题:页面加载速度慢、渲染迟缓等问题都会影响用户的体验。 - 响应式设计问题:在不同设备上展示页面时,可能会出现布局错乱、字体大小不合适等问题。 - 数据交互问题:与后端接口对接时,可能会出现数据格式不一致、请求超时等问题。 - 页面安全性问题:如XSS(跨站脚本攻击)、CSRF(跨站请求伪造)等安全漏洞可能会对页面造成影响。 解决这些问题的方法和技巧有很多,以下是一些常用的方法: - 使用CSS预处理器(如Less、Sass)来简化样式的编写,并提供一些方便的功能(如变量、嵌套、混合等)。 - 使用代码压缩工具(如UglifyJS、CSSNano)来压缩JS和CSS文件,以减少文件大小和网络传输时间。 - 使用缓存策略(如HTTP缓存、LocalStorage)来提高页面加载速度和用户体验。 - 使用性能分析工具(如Google PageSpeed Insights、Lighthouse)来评估和改进页面的性能。 - 使用响应式设计框架(如Bootstrap、Foundation)来简化响应式设计的开发过程,并提供一致的用户体验。 - 使用安全性工具(如CSP、X-XSS-Protection)来防止页面受到恶意攻击。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值