你把 《时间》 玩明白

​回顾    ​     

本地存储设置过期时间_0.活在风浪里的博客-CSDN博客直接发代码,不如说下思路,自己去想,其实设置本地存储时间,可谓太简单了不映入cdn,先说直接在本地操作...跟着我思路一起想首先你想下过期时间,用到了什么,对 ,是时间,好既然你知道,真牛,在添加本地存储的时候,加入时间字段,取出来时,用 当前时间 - 存入时间 >= 自定义过期时间使用场景:例如优化请求上代码看看Date.now()当前事件 new Date.getTime() 获取时间戳第一localStorage.setItem('cates......https://blog.csdn.net/m0_57904695/article/details/122009018?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166312513416800186585649%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166312513416800186585649&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-122009018-null-null.nonecase&utm_term=%E6%9C%AC%E5%9C%B0&spm=1018.2226.3001.4450

懒人必备 —— 时间神器 moment_0.活在风浪里的博客-CSDN博客_moment 去0亲测好用，及其好使的插件，开发懒人必整，就算是自己可以写，一大堆代码，真的要写吗？https://blog.csdn.net/m0_57904695/article/details/123767269?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166312533016800182160029%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166312533016800182160029&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-2-123767269-null-null.nonecase&utm_term=%E6%97%B6%E9%97%B4&spm=1018.2226.3001.4450

时间格式转换_0.活在风浪里的博客-CSDN博客<script> // 获取当前毫秒戳 console.log(new Date().getTime()); //ml:18 1638152442833 // 获取当前毫秒戳 console.log(Date.now()); //ml:18 1638152442833 // 需求将毫秒变时间 [1638152442833 ---> 2021年11月29日10:07:19] console.log(new Date(163815..https://blog.csdn.net/m0_57904695/article/details/121604466?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166312533016800182160029%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166312533016800182160029&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-3-121604466-null-null.nonecase&utm_term=%E6%97%B6%E9%97%B4&spm=1018.2226.3001.4450

模仿百度搜索 ：上下翻动、带有时间_0.活在风浪里的博客-CSDN博客类似这种效果，熟练操作键盘事件，多加一个过滤时间效果前言：写在最初，公司的项目有约一百个页面，我如何快速找到其中一个，甚至是封装组件中的点击事件一种很快的适用小技巧，一：复制url在代码中，Ctrl+p 快速找到该页面二：假如你要找这个按钮，是不是有一个百度搜索文字，记住它打开vsCode，在侧边点击右键，勾选上Search，默认是有的，如果没有在勾选上前期回顾 30秒学会 —— 《获取验证码基本操作》_0.活在风浪里的博...https://blog.csdn.net/m0_57904695/article/details/123831296?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166312533016800182160029%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166312533016800182160029&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-4-123831296-null-null.nonecase&utm_term=%E6%97%B6%E9%97%B4&spm=1018.2226.3001.4450

vue过滤器--几天前、几周前_0.活在风浪里的博客-CSDN博客function diaplayTime(data) { //将字符串转换成时间格式 let timePublish = new Date(data); let timeNow = new Date(); let minute = 1000 * 60; let hour = minute * 60; let day = hour * 24; let month = day * 30; ...https://blog.csdn.net/m0_57904695/article/details/121517498?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166312533016800182160029%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166312533016800182160029&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-5-121517498-null-null.nonecase&utm_term=%E6%97%B6%E9%97%B4&spm=1018.2226.3001.4450

目录

解释时间用法（语法） 

第一种：年月日

第二种 （季度 / 星期 / 几周、问候语、多久前、）Vue3+Ts版

---

解释时间用法（语法） 

  
  // 获取当前毫秒戳
    console.log(new Date().getTime()); //ml:18 1638152442833
 
    // 获取当前毫秒戳 1979 1 1日计算机出生日
    console.log(Date.now()); //ml:18 1638152442833
 
    // 需求将毫秒变时间   [1638152442833 ---> 2021年11月29日10:07:19]  
    console.log(new Date(1638153271716).toLocaleString()); // 自定义传毫秒数  2021/11/29 上午10:34:31
    console.log(new Date(new Date().getTime()).toLocaleString()); //当前毫秒转时间   2021/11/29 上午10:34:31
 
    // 需求将时间转为毫秒 [2021年11月29日10:07:19 ---> 1638152442833]  
    console.log((new Date("2021/11/29 10:21:11")).getTime()); //自定义时间得到豪秒数  ml:25 1638152471000
    console.log(new Date().getTime()); //当前时间得到豪秒数  ml:25 1638152471000
 
    // 2021/11/29 上午10:04:17 日期加时间
    console.log(new Date().toLocaleString());
 
    // 2021/11/29 日期
    console.log(new Date().toLocaleDateString());
 
    // 上午10:04:17  时间
    console.log(new Date().toLocaleTimeString());

第一种：年月日

<template>
    <ul class="nowTime" ref="nowTime">
        <li></li>
        <li></li>
      </ul>
</template>

<script setup lang="ts">
const nowTime = ref<HTMLDivElement | null>(null);
const NowTime = () => nowTime.value as HTMLDivElement;
//获取当前时间
const getNowFormatDate = () => {
  let date = new Date();
  let year: number | string = date.getFullYear();
  let month: number | string = date.getMonth() + 1;
  let strDate: number | string = date.getDate();
  let Hour: number | string = date.getHours(); // 获取当前小时数(0-23)
  let Minute: number | string = date.getMinutes(); // 获取当前分钟数(0-59)
  let Second: number | string = date.getSeconds(); // 获取当前秒数(0-59)
  let show_day = new Array(
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六"
  );
  let day = date.getDay();
  if (Hour < 10) {
    Hour = "0" + Hour;
  }
  if (Minute < 10) {
    Minute = "0" + Minute;
  }
  if (Second < 10) {
    Second = "0" + Second;
  }
  if (month >= 1 && month <= 9) {
    month = "0" + month;
  }
  if (strDate >= 0 && strDate <= 9) {
    strDate = "0" + strDate;
  }
  let currentdate =
    "<div><p style='text-align:left;'>" +
    year +
    "年" +
    month +
    "月" +
    strDate +
    "号</p><p style='text-align:left'>" +
    show_day[day] +
    "</p></div>";
  let HMS = Hour + ":" + Minute + ":" + Second;
  let temp_time = year + "-" + month + "-" + strDate + " " + HMS;
  NowTime().children[0].innerHTML = HMS;
  NowTime().children[1].innerHTML = currentdate;
  setTimeout(getNowFormatDate, 1000); //每隔1秒重新调用一次该函数
};
onMounted(() => {
  getNowFormatDate();
})
</script>

<style lang="scss" scoped>
 .nowTime {
      position: absolute;
      left: 10px;
      top: 23px;
      font-size: 0;

      li {
        display: inline-block;
        width: 73px;
        height: 21px;
        font-size: 16px;
        color: #000;
        float: left;
      
      }

      li:nth-child(2) {
        font-size: 9px;
      

        p {
          text-align: left;
        }
      }
    }

</style>

第二种 （季度 / 星期 / 几周、问候语、多久前、）Vue3+Ts版

 第一步：新建 formatTime.ts 文件

/**
 * 时间日期转换
 * @param date 当前时间，new Date() 格式
 * @param format 需要转换的时间格式字符串
 * @description format 字符串随意，如 `YYYY-mm、YYYY-mm-dd`
 * @description format 季度："YYYY-mm-dd HH:MM:SS QQQQ"
 * @description format 星期："YYYY-mm-dd HH:MM:SS WWW"
 * @description format 几周："YYYY-mm-dd HH:MM:SS ZZZ"
 * @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
 * @returns 返回拼接后的时间字符串
 */
export function formatDate(date: Date, format: string): string {
	let we = date.getDay(); // 星期
	let z = getWeek(date); // 周
	let qut = Math.floor((date.getMonth() + 3) / 3).toString(); // 季度
	const opt: { [key: string]: string } = {
		'Y+': date.getFullYear().toString(), // 年
		'm+': (date.getMonth() + 1).toString(), // 月(月份从0开始，要+1)
		'd+': date.getDate().toString(), // 日
		'H+': date.getHours().toString(), // 时
		'M+': date.getMinutes().toString(), // 分
		'S+': date.getSeconds().toString(), // 秒
		'q+': qut, // 季度
	};
	// 中文数字 (星期)
	const week: { [key: string]: string } = {
		'0': '日',
		'1': '一',
		'2': '二',
		'3': '三',
		'4': '四',
		'5': '五',
		'6': '六',
	};
	// 中文数字（季度）
	const quarter: { [key: string]: string } = {
		'1': '一',
		'2': '二',
		'3': '三',
		'4': '四',
	};
	if (/(W+)/.test(format))
		format = format.replace(RegExp.$1, RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '星期' + week[we] : '周' + week[we]) : week[we]);
	if (/(Q+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 4 ? '第' + quarter[qut] + '季度' : quarter[qut]);
	if (/(Z+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 3 ? '第' + z + '周' : z + '');
	for (let k in opt) {
		let r = new RegExp('(' + k + ')').exec(format);
		// 若输入的长度不为1，则前面补零
		if (r) format = format.replace(r[1], RegExp.$1.length == 1 ? opt[k] : opt[k].padStart(RegExp.$1.length, '0'));
	}
	return format;
}

/**
 * 获取当前日期是第几周
 * @param dateTime 当前传入的日期值
 * @returns 返回第几周数字值
 */
export function getWeek(dateTime: Date): number {
	let temptTime = new Date(dateTime.getTime());
	// 周几
	let weekday = temptTime.getDay() || 7;
	// 周1+5天=周六
	temptTime.setDate(temptTime.getDate() - weekday + 1 + 5);
	let firstDay = new Date(temptTime.getFullYear(), 0, 1);
	let dayOfWeek = firstDay.getDay();
	let spendDay = 1;
	if (dayOfWeek != 0) spendDay = 7 - dayOfWeek + 1;
	firstDay = new Date(temptTime.getFullYear(), 0, 1 + spendDay);
	let d = Math.ceil((temptTime.valueOf() - firstDay.valueOf()) / 86400000);
	let result = Math.ceil(d / 7);
	return result;
}

/**
 * 将时间转换为 `几秒前`、`几分钟前`、`几小时前`、`几天前`
 * @param param 当前时间，new Date() 格式或者字符串时间格式
 * @param format 需要转换的时间格式字符串
 * @description param 10秒：  10 * 1000
 * @description param 1分：   60 * 1000
 * @description param 1小时： 60 * 60 * 1000
 * @description param 24小时：60 * 60 * 24 * 1000
 * @description param 3天：   60 * 60* 24 * 1000 * 3
 * @returns 返回拼接后的时间字符串
 */
export function formatPast(param: string | Date, format: string = 'YYYY-mm-dd'): string {
	// 传入格式处理、存储转换值
	let t: any, s: number;
	// 获取js 时间戳
	let time: number = new Date().getTime();
	// 是否是对象
	typeof param === 'string' || 'object' ? (t = new Date(param).getTime()) : (t = param);
	// 当前时间戳 - 传入时间戳
	time = Number.parseInt(`${time - t}`);
	if (time < 10000) {
		// 10秒内
		return '刚刚';
	} else if (time < 60000 && time >= 10000) {
		// 超过10秒少于1分钟内
		s = Math.floor(time / 1000);
		return `${s}秒前`;
	} else if (time < 3600000 && time >= 60000) {
		// 超过1分钟少于1小时
		s = Math.floor(time / 60000);
		return `${s}分钟前`;
	} else if (time < 86400000 && time >= 3600000) {
		// 超过1小时少于24小时
		s = Math.floor(time / 3600000);
		return `${s}小时前`;
	} else if (time < 259200000 && time >= 86400000) {
		// 超过1天少于3天内
		s = Math.floor(time / 86400000);
		return `${s}天前`;
	} else {
		// 超过3天
		let date = typeof param === 'string' || 'object' ? new Date(param) : param;
		return formatDate(date, format);
	}
}

/**
 * 时间问候语
 * @param param 当前时间，new Date() 格式
 * @description param 调用 `formatAxis(new Date())` 输出 `上午好`
 * @returns 返回拼接后的时间字符串
 */
export function formatAxis(param: Date): string {
	let hour: number = new Date(param).getHours();
	if (hour < 6) return '凌晨好';
	else if (hour < 9) return '早上好';
	else if (hour < 12) return '上午好';
	else if (hour < 14) return '中午好';
	else if (hour < 17) return '下午好';
	else if (hour < 19) return '傍晚好';
	else if (hour < 22) return '晚上好';
	else return '夜里好';
}

 第二步：页面使用

<template>
  <div class="time">{{ hCurrentTime }}</div>
  <div class="time">{{ hFormatDate }}</div>
  <div class="time">当前日期是第{{ hGetWeek }}周</div>
</template>
<script setup>
// 因为我下载插件了所以不用引入vue相关依赖
import { formatAxis, formatDate, getWeek } from "/@/utils/formatTime";
// 时间问候语
const hCurrentTime = computed(() => {
  return formatAxis(new Date());
});
// 时间格式化
const hFormatDate = computed(() => {
  return formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ");
});
// 时间格式化
const hGetWeek = computed(() => {
  return getWeek(new Date());
});
</script>
<style lang="scss" scoped>
.time {
  font-size: 25px;
  color: red;
  font-weight: bold;
}
</style>

结语：

祝大家2022越来越强