前端基础知识笔记

75 阅读2分钟

1. JS常用方法

1.1 求百分比

/**
 * 求百分比
 * @param {当前数} num 
 * @param {总数} total 
 * @returns 
 */
GetPercent(num, total) {
  num = parseFloat(num);
  total = parseFloat(total);
  if (isNaN(num) || isNaN(total)) {
    return "-";
  }
  return total <= 0 ? "0%" : (Math.round(num / total * 10000) / 100.00) + "%";
}

1.2 判断字符串是否是一个JSON数据

isJSON = (str) => {
  if (typeof str === 'string') {
    try {
      let jsonStr = JSON.parse(str)
      console.log("转换成功" + jsonStr)
      return true
    } catch(e) {
      console.log('error:'+str+'!!!'+e)
      return false
    }
  } else {
    console.log('获取到的数据不是字符串')
    return false
  }
}

1.3 获取时间信息

1、获取当前时间以及一些具体操作

const myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-???)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
let mytime = myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间

2、获取各个时间点的时间字符串

commonData.js

推荐使用Moment.js

// 昨天:2022-8-21 00:00:00
export function getYesterdayStr() {
  let day = new Date();
  day.setTime(day.getTime() - 24 * 60 * 60 * 1000);
  return day.getFullYear() + "-" + (day.getMonth() + 1).toString().padStart(2, "0") + "-" + day.getDate().toString().padStart(2, "0") + " 00:00:00";
}

// 今天:2022-8-22 23:59:59
export function getTodayStr() {
  let day = new Date();
  return day.getFullYear() + "-" + (day.getMonth() + 1).toString().padStart(2, "0") + "-" + day.getDate().toString().padStart(2, "0") + " 23:59:59";
}

// 今天:2022-8-22 00:00:00
export function getTodayStr_2() {
  let day = new Date();
  return day.getFullYear() + "-" + (day.getMonth() + 1).toString().padStart(2, "0") + "-" + day.getDate().toString().padStart(2, "0") + " 00:00:00";
}

// 当月初:2022-8-1 00:00:00
export function getCurrentMonthStr() {
  let day = new Date();
  let month = day.getMonth() + 1;
  if (month < 10) {
    month = "0" + month;
  }
  return day.getFullYear() + "-" + month + "-01 00:00:00";
}

// 当月末:2022-8-31 23:59:59
export function getCurrentMonthEndStr() {
  let day = new Date();
  let year = day.getFullYear();
  let month = day.getMonth() + 1;
  let d = new Date(year, month, 0);
  return day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + d.getDate() + " 23:59:59";
}

// 半年前:2022-2-01 00:00:00
export function getHalfYearStr() {
  let curDate = (new Date()).getTime()
  let halfYear = 365 / 2 * 24 * 3600  * 1000
  let pastResult = curDate - halfYear
  let pastDate = new Date(pastResult)
  return pastDate.getFullYear() + "-" + (pastDate.getMonth() + 1) +"-01 00:00:00";
}

//一年前
export function getHalfYearStr() {
  let curDate = (new Date()).getTime()
  let halfYear = 365 * 24 * 3600  * 1000
  let pastResult = curDate - halfYear
  let pastDate = new Date(pastResult)
  return pastDate.getFullYear() + "-" + (pastDate.getMonth() + 1) +"-01 00:00:00";
}

2.CSS常用样式

2.1 CSS 控制超出文字省略号显示

1、 显示一行

.textOverflow {
  padding: 5px;
  min-width: 200px;
  max-width: 250px;
  width: 100%;
  max-height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}

2、 显示多行

.textOverflow {
  padding: 5px;
  min-width: 200px;
  max-width: 250px;
  width: 100%;
  max-height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;  //控制显示行数
  -webkit-box-orient: vertical;
}