- A+
所属分类：Web前端
一、创建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 月 日历
