一、創建Date對象 var dateObj=new Date(); var now = Date.now() 當前時間 二、Date方法 1、將日期轉為字元串 toLocaleString() toLocaleDateString() toLocaleTimeString() 2、獲取年、月、日、 ...
一、創建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 月 日曆
