JavaScript Date对象 、日期求差案例 、 购物秒杀倒计时、日历
一、创建Date对象
var dateObj=new Date();
var now = Date.now() 当前时间
二、Date方法
1、将日期转为字符串
toLocaleString()
toLocaleDateString()
toLocaleTimeString()2、获取年、月、日、小时、分、秒
getFullYear()
var d = new Date();
var year = d.getFullYear();getMonth() 获取月份，返回值为0-11（外国人规定的），表示1月到12月，所以获取到月份之后需要+1
var d = new Date();
var month = d.getMonth()+1;getDate() 获取天，返回值为今天是几号
var d = new Date();
var date = d.getDate();补充：日历案例 var days = new Date(2023,month,0).getDate();
获取2023年，每个月有多少天
getHours() 小时
var d = new Date();
var hour = d.getHours();getMinutes() 分钟
var d = new Date();
var minute = d.getMinutes();getSeconds() 秒
var d = new Date();
var seconds = d.getSeconds();getTime() 时间戳 时间戳专门用来计算时间的差值，或者倒计时等功能 单位：毫秒ms 1s = 1000 ms
var date = new Date();
console.log(date.getTime());
补充：
使用时间戳【UNIX时间戳，timestamp】计算时间差
2021-9-5 10:30:20 -> 1630809020000
2020-8-9 12:30:45 -> 1596947445000
差多少年，天，小时，分钟，秒钟
时间戳 参照时间： 1970/1/1 0:0:0(格林威治时间) 1970/1/1 8:0:0（北京时间）
时间戳：d.getTime(); 单位是毫秒数
+ new Date（）转为时间戳
Date.now() 转为时间戳
3、定时器
setInterval(函数体,时间（毫秒）,参数（传递给函数的参数）
function times(){
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth()+1;
var date = d.getDate();
var hour = d.getHours();
var minute = d.getMinutes();
var seconds = d.getSeconds();
var t = document.querySelector('#time');
t.innerHTML = `现在是北京时间:${year}年${month}月${date}日${hour}时${minute}分${seconds}秒`;
}
setInterval(times,1000)三、日期求差案例
<div id="time"></div>
<script>
function getTime(){
var afterTime = new Date('2021-6-1 10:30:20');
var now = Date.now();
var cha = now - afterTime;
if (cha>0){
var allS = parseInt(cha/1000);
var s = allS%60;
var m = parseInt(allS/60)%60;
var h = parseInt(allS/60/60)%24;
var d = parseInt(allS/60/60/24);
time.innerHTML = `上次见面到现在${d}天${h}小时${m}分钟${s}秒`
}else{
console.log('不曾相识');
}
}
setInterval(getTime,1000)
</script>
四、购物秒杀倒计时案例
<div id="box"></div>
<script>
/*
秒杀: 10-12,显示秒杀倒计时,10之前显示秒杀未开始,12点以后显示秒杀结束
*/
function getTime(starttime,endtime){
var now = new Date();
var h = now.getHours();
// console.log(h);
if(h<starttime){
console.log('秒杀未开始');
}else if(h>=endtime){
console.log('秒杀结束');
}else{
// 10-12
var day = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`;
var endT = +new Date(day +` ${endtime}:00:00`);
var nowT = now.getTime();
var cha = endT - nowT ;
var allS = parseInt(cha/1000);
var s = allS%60;
var m = parseInt(allS/60)%60;
var h = parseInt(allS/60/60)%24;
// 显示在页面的box中
box.innerHTML = `距离结束还有：${h}:${m}:${s}`;
}
}
setInterval(function(){
getTime(16,18);
},1000)
</script>
五、当年日历
<style>
table,tr,td{
border: 1px solid #000;
}
table{
width: 500px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
function showTable(){
//1.铺垫顶部星期的基础结构
var str = '<table><tr><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th></tr>';
//2.遍历td
var month = parseInt(prompt('请输入2023年任意一个月份'));
if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
var days = 31;
}else if(month==2){
var days = 28;
}else{
var days = 30;
}
str += '<tr>'
//4.获取2023年这个月的1号是周几
var week = new Date(`2023-${month}-1`).getDay();
if(week==0){
for(var j=1;j<=6;j++){
str+='<td></td>';
}
}else{
for(var j= 1;j<week;j++){
str+='<td></td>';
}
}
//3.显示所有的td
for(var i=1;i<=days;i++){
if((week-1+i)%7 == 0){
str+=`<td>${i}</td></tr><tr>`
}else{
str += `<td>${i}</td>`
}
}
str += '</tr></table>';
box.innerHTML = str
}
showTable()
</script>2023年 11 月 日历
