基础知识:
获取年月日,时间:
var date=new Date();
console.log(date);
Thu Nov 17 2022 10:15:07 GMT+0800 (中国标准时间)
实际上是对象,但是自动转为字符串显示了。
// 传递参数进去
var date1=new Date("2022/11/25 14:38:09");
console.log(date1);
注:格式一定不能乱,日期可以是/或者-,时间一定是:
用get方法:
// 获取年份
console.log(date.getFullYear())
// 获取月份
console.log(date.getMonth())
// 获取日子
console.log(date.getDate())
// 小时:getHours()
// 分钟:getMinutes()
// 秒数:getSeconds()
//毫秒:getMilliseconds()
//时间戳:
console.log(date.getTime())//这里显示的是1970年到现在的毫秒数
console.log(new Date(1669359219166))
更改年月日,时间:
用set方法:
date.setFullYear(2050)
console.log(date)
Fri Nov 25 2050 15:48:16 GMT+0800 (中国标准时间)
案例:做一个定时器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定时器</title>
</head>
<body>
<button id="btn1">清除定时器-延时</button>
<button id="btn2">清除定时器-间隔循环</button>
</body>
<script>
// 定时器属于异步执行,必须要在同步执行完后才执行,
// 如果同步比较繁忙或者根本就是死循环,那么异步将有可能不执行
console.log("我最早执行!");
// 执行一次,延时执行
var time1= setTimeout(function(){
console.log("【延时】只能执行一次");
},1000)
// 每隔一段时间执行一次
var time2=setInterval(function() {
console.log("【间隔】时间:"+new Date());
},1000)
console.log(time1,time2);
// 停止定时器
// clearTimeout(time1);
// clearInterval(time2);
console.log(btn1,btn2);
btn1.onclick = function() {
console.log("btn1 click");
clearTimeout(time1);
}
btn2.onclick = function() {
console.log("btn2 click");
clearInterval(time2);
}
console.log("我最后,但是比定时器要早出来!");
</script>
</html>
案例:倒计时:
<script>
// 截止时间设置为固定
var targetDate=new Date("2022/11/27")
function diffTime(currentDate,targetDate){
var sub=parseInt((targetDate-currentDate)/1000);
var day=parseInt(sub/(60*60*25));
var hours=parseInt(sub%(60*60*24)/(60*60));
var minutes=parseInt(sub%(60*60)/60);
var seconds=sub%60;
console.log(hours);
var obj={
day:day,
hour:hours,
minutes:minutes,
seconds:seconds
}
return obj;
}
// 使用间隔定时器让时间流动
setInterval(function() {
// 当前时间一秒钟刷新一次,以便于倒计时能实现
var currentDate=new Date();
var res=diffTime(currentDate,targetDate);
document.write("距离截止时间还有:"+res.day+"天"+res.hour+"小时"
+res.minutes+"分钟"+res.seconds+"秒");
document.write("<br>");
},1000)
</script>
第二种:
<script>
function countDown(time) {
// 使用时间戳去计算不会出现负值
var nowTime= +new Date(); //返回的是当前时间总的毫秒数
var inputTime= +new Date(time); //返回的是用户输入时间总的毫秒数
var times=(inputTime - nowTime)/1000; //times是剩余时间总的秒数
var d=parseInt(times / 60 / 60 / 24); //天
d=d<10?'0'+d:d;
var h=parseInt(times / 60 / 60 % 24);//小时
h=h<10?'0'+h:h;
var m=parseInt(times / 60 % 60); //分钟
m=m<10?'0'+m:m;
var s=parseInt(times % 60);//秒
s=s<10?'0'+s:s;
return d+'天'+h+'时'+m+'分'+s+'秒';
}
console.log(countDown('2022-12-28 20:38:00'))