创建时间日期对象
new Date()
new Date("2017/09/06 09:00:00")
不常用的方法
var date3 = new Date('Wed Jan 27 2017 12:00:00 GMT+0800 (中国标准时间)');
var date4 = new Date(2017, 1, 27);
获取时间日期
var date = new Date();
"现在的时间是："+date.getFullYear()+"年"+date.getMonth()+"月"+date.getDate()+"日"+date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒。"
当前时间：2018年6月13日6时4分30秒。
• getTime()，获取时间戳，返回毫秒数，//setTime()，以毫秒设置日期，会改变整个日期。
• getFullYear()，返回年份，以4位数表示。//setFullYear()，设置日期的年月，必须以4位数表示。
• getMonth()，返回月份，0~11。
• getDate()，返回天数，1~31。
• getDay()，返回星期几，0~6。
• getHours()，返回小时数，0~23。
• getMinutes()，返回分钟数，0~59。
• getSeconds()，返回秒数，0~59。
• getMilliseconds()，返回毫秒数。
// 我在执行这行代码时，当前时间为 2019年2月4日，周一，13:23:52
var myDate = new Date();
console.log(myDate); // 打印结果：Mon Feb 04 2019 13:23:52 GMT+0800 (中国标准时间)
console.log(myDate.getDate()); // 打印结果：4
console.log(myDate.getDay()); // 打印结果：1
console.log(myDate.getMonth()); // 打印结果：1
console.log(myDate.getFullYear()); // 打印结果：2019
console.log(myDate.getHours()); // 打印结果：13
console.log(myDate.getMinutes()); // 打印结果：23
console.log(myDate.getSeconds()); // 打印结果：52
console.log(myDate.getMilliseconds()); // 打印结果：393
console.log(myDate.getTime()); // 获取时间戳。打印结果：1549257832393
昨天、明天、N天前后
// 昨天
let yesterday = new Date()
yesterday.setDate(new Date().getDate() - 1)
// n天前
let NdaysBefore = new Date()
NdaysBefore.setDate(new Date().getDate() - n)
// 明天
let tomorrow = new Date()
tomorrow.setDate(new Date().getDate() + 1)
// n天后
let NdaysLater= new Date()
NdaysLater.setDate(new Date().getDate() + n)
时间比较
字符串格式的日期格式为 2015/01/12 或 2017-8-13
需先转换成统一标准格式，再转换为时间戳进行比较
//非标准的字符串时间
let date_string = '2019-9-8'
//转换成统一标准格式 输出：2019/9/8
let date_standard_string = date1.replace(/\-/g,'/')
//將字符串格式日期转化为时间戳，就是1970年到当前日期的毫秒数
let date_timestamp = Date.parse(date_standard_string )
if(date_timestamp <= new Date()){
alert('该日期早于当前时间')
}else{
alert('该日期晚于当前时间')
}
时间计算
计算日期是当年的第几天
// date为日期对象
getDay(date) {
const currentYear = date.getFullYear().toString();
let days = Math.ceil((date - new Date(currentYear)) / (1000 * 60 * 60 * 24))
return days;
},
- 若参数为日期字符串，请参考下文，先将其转换为日期对象
计算日期的和——天
let days = 40
let date = new Date();
date.setDate(date.getDate() + days);
2016-16-13，加40天，结果为：2016-07-23
计算日期的差——秒
(date1 - date2) / 1000
计算日期的差——分
(date1 - date2) / (1000*60)
计算日期的差——时
(date1 - date2) / (1000*60*60)
计算日期的差——天
(date1 - date2) / (1000*60*60*24)
计算日期的差——月
let months1 = date1.getFullYear() * 12 + date1.getMonth();
let months2 = date2.getFullYear() * 12 + date2.getMonth();
months1 - months2;
时间日期格式化
Date.prototype.format = function(fmt) {
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt)) {
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(var k in o) {
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
}
//格式化为 2019-12-7 16:00:00
var time1 = new Date().format("yyyy-MM-dd hh:mm:ss");
//格式化为 2019-12-7
var time2 = new Date().format("yyyy-MM-dd");
//将 "时间戳" 转换为 "2014年-6月-8日"
var da = 1402233166999;
da = new Date(da);
var year = da.getFullYear()+'年';
var month = da.getMonth()+1+'月';
var date = da.getDate()+'日';
console.log([year,month,date].join('-'));
字符串日期 >> 时间对象
let strTime="2011-04-16"; //字符串日期格式
let date=new Date(Date.parse(strTime.replace(/-/g,"/")));//转换为Date对象
字符串日期计算星期
// 通过字符串日期计算星期，如 getWeek("2023-02-18")，得到 星期六
function getWeek(strDate) {
let index = new Date(strDate).getDay();
let weekList = [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
];
return weekList[index];
}
实战范例
// 格式化日期为 11月04日(星期三)
formatDate(date) {
return date.getMonth() + 1 + '月' + date.getDate() + '日（星期' + this.weekCN(date.getDay()) + '）'
},
毫秒转换为时分秒
不足1秒的会省略
// 毫秒转换为时分秒(不足1秒的会省略)
function msToHMS(mss) {
const hours = parseInt(mss / (1000 * 60 * 60));
const minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((mss % (1000 * 60)) / 1000);
return (
(hours < 10 ? "0" + hours : hours) +
":" +
(minutes < 10 ? "0" + minutes : minutes) +
":" +
(seconds < 10 ? "0" + seconds : seconds)
);
}
使用
const b = msToHMS(123456789);
console.log(b); // 打印 34:17:36
时间间隔
var start=1491789600000;//2017-4-10 10:00
var end=1494381600000;//2017-5-10 10:00
var utc=end-start;
utc/(24*60*60*1000);// 天
utc/(60*60*1000);//小时
utc/(60*1000); // 分
时间戳
时间戳：指的是从格林威治标准时间的1970年1月1日，0时0分0秒到当前日期所花费的毫秒数（1秒 = 1000毫秒）。
计算机底层在保存时间时，使用的都是时间戳。时间戳的存在，就是为了统一时间的单位。
var myDate = new Date("1970/01/01 0:0:0");
console.log(myDate.getTime()); // 获取时间戳
打印结果（可能会让你感到惊讶） -28800000
为啥打印结果是-28800000，而不是0呢？这是因为，我们的当前代码，是在中文环境下运行的，与英文时间会存在8个小时的时差（中文时间比英文时间早了八个小时）。如果代码是在英文环境下运行，打印结果就是0。
时间戳 >> 时间对象
var timestamp4 = new Date(1472048779952);
常用插件
安装
npm i dayjs
页面导入使用
import dayjs from 'dayjs'
function getNow() {
return dayjs().format('YYYY年MM月DD日 HH:mm:ss')
}
实战案例（重要）：每次打开页面时显示当前的日期
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 800px;
margin: 200px auto;
color: red;
text-align: center;
font: 600 30px/30px "simsun";
}
</style>
</head>
<body>
<div></div>
<script>
//模拟日历
//需求：每天打开这个页面都能定时显示年月日和星期几
//1.创建一个当前日期的日期对象
var date = new Date();
//2.然后获取其中的年、月、日和星期
var year = date.getFullYear();
var month = date.getMonth();
var hao = date.getDate();
var week = date.getDay();
// console.log(year+" "+month+" "+hao+" "+week);
//3.赋值给div
var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var div = document.getElementsByTagName("div")[0];
div.innerText = "今天是："+year+"年"+(month+1)+"月"+hao+"日 "+arr[week];
</script>
</body>
</html>
实战案例（重要）：倒计时
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 1210px;
margin: 200px auto;
color: red;
text-align: center;
font: 600 30px/30px "simsun";
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.getElementsByTagName("div")[0];
var timer = setInterval(fn, 1);
function fn() {
var nowtime = new Date();
var future = new Date("2019/02/03 11:20:00");
var timeSum = future.getTime() - nowtime.getTime(); //获取时间差：发布会时间减去此刻的毫秒值
var day = parseInt(timeSum / 1000 / 60 / 60 / 24);
var hour = parseInt(timeSum / 1000 / 60 / 60 % 24);
var minu = parseInt(timeSum / 1000 / 60 % 60);
var sec = parseInt(timeSum / 1000 % 60);
var millsec = parseInt(timeSum % 1000);
//问题处理：所有的时间小于10的时候，在前面自动补0，毫秒值要补双0（比如如，把 8 秒改成 08 秒）
day = day < 10 ? "0" + day : day; //day小于10吗？如果小于，就补0；如果不小于，就是day本身
hour = hour < 10 ? "0" + hour : hour;
minu = minu < 10 ? "0" + minu : minu;
sec = sec < 10 ? "0" + sec : sec;
if (millsec < 10) {
millsec = "00" + millsec;
} else if (millsec < 100) {
millsec = "0" + millsec;
}
// console.log(day);
// console.log(parseInt(timeSum/1000/60/60/24));
if (timeSum < 0) {
div.innerHTML = "距离苹果发布会还有00天00小时00分00秒000毫秒";
clearInterval(timer);
return;
}
div.innerHTML = "距离苹果发布会还有" + day + "天" + hour + "小时" + minu + "分" + sec + "秒" + millsec + "毫秒";
}
</script>
</body>
</html>
实战案例：计时
<template>
<div class="page">
{{ formatedTotalTime }}
</div>
</template>
<script>
function formatTotalTime(time) {
let hour = Math.floor(time / 60 / 60);
let minu = Math.floor((time / 60) % 60);
let sec = Math.floor(time % 60);
hour = hour < 10 ? "0" + hour : hour;
minu = minu < 10 ? "0" + minu : minu;
sec = sec < 10 ? "0" + sec : sec;
return `${hour}:${minu}:${sec}`;
}
export default {
mounted() {
setInterval(() => {
this.time += 1;
this.formatedTotalTime = formatTotalTime(this.time);
}, 1000);
},
data() {
return {
time: 0,
formatedTotalTime: "00:00:00",
};
},
};
</script>
<style scoped>
.page {
padding: 30px;
}
</style>
实战案例：时钟
vue3+Ts 版（使用了 dayjs）
<script setup>
import dayjs from 'dayjs'
function getNow() {
return dayjs().format('YYYY年MM月DD日 HH:mm:ss')
}
let now = ref(getNow())
let timer = null
onMounted(() => {
timer = setInterval(() => {
now.value = getNow()
}, 1000)
})
onUnmounted(() => {
// 组件卸载时，清除定时器
clearInterval(timer)
})
</script>
<template>
<div class="p-40">
{{ now }}
</div>
</template>
9320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
