<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
list-style: none;
margin: 0;
padding: 0;
}
ul{
overflow: hidden;
}
li{
float: left;
margin-right: 10px;
}
#year{
float: left;
margin-right: 20px;
}
</style>
<body>
<h1>單週日曆選項卡</h1>
<div style="overflow: hidden;">
<h2 id="year"></h2>
<h3 id="current-time"></h3>
</div>
<ul id="day"></ul>
<ul id="date"></ul>
<script>
//獲取當前時間7天前的日期
function getLast7Date(date) {
let pastArr = [];
for (let i = 1; i <= 7; i++) {
date.setDate(date.getDate() - 1);//設置日期
pastArr.push(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate());
}
document.write(pastArr)
}
let date = new Date(2017, 0, 1);
getLast7Date(date)
console.log()
//獲取最新本週週一開始的日期
const date1 = new Date();
function getNewWeekDate(date) { //單週日曆插件
if(!date instanceof Date){
throw new Error("pass the Date Type of params")
}
let curDate = date.getDate();
let dayNum = date.getDay() ? date.getDay() : 7; //如果為0 代表星期日 改為數字7
let dateCopy = new Date(date.toDateString()); //COPY 兩個不同的date對象
let dateCopy2 = new Date(date.toDateString());
let arr1 = [];
let arr2 = [];
let x1 = dayNum - 1;
let x2 = 7 - dayNum;
if (x1 > 0) {
console.time()
for (let i = 0; i < x1; i++) {
let changeDate = dateCopy.setDate(dateCopy.getDate() - 1);
arr1.unshift(dateCopy);
dateCopy = new Date(changeDate) //重新賦值 setDate返回值是調整過的日期的毫秒錶示
}
console.timeEnd()
}
if (x2 !== 0) {
for (let i = 0; i < x2; i++) {
let ui = dateCopy2.setDate(dateCopy2.getDate() + 1);
arr2.push(dateCopy2);
dateCopy2 = new Date(ui)
}
}
let res = arr1.concat([date], arr2);
//渲染
let yearDom = document.querySelector("#year");
let dayDom = document.querySelector("#day");
let dateDom = document.querySelector("#date");
yearDom.innerText = date.getFullYear();//默認取當前日期所在年份
for(let item of res){
let li1 = document.createElement('li');
let li2 = document.createElement('li');
let day = item.getDay() == 0 ? 7 : item.getDay();
switch(day){
case 1:
day = '一'
break;
case 2:
day = '二'
break;
case 3:
day = '三'
break;
case 4:
day = '四'
break;
case 5:
day = '五'
break;
case 6:
day = '六'
break;
case 7:
day = '日'
break;
default:
break;
}
li1.innerText = day
dayDom.appendChild(li1)
let date = item.getDate();
if(item.getDate() === curDate){
li2.style.color = "red"
}
li2.innerText = date;
motiveSetTime();
dateDom.appendChild(li2)
}
}
getNewWeekDate(date1);
function motiveSetTime(){
let timer = setInterval(()=>{
let date = new Date();
document.querySelector("#current-time").innerHTML = date.toLocaleTimeString();
},1000)
}
</script>
</body>
</html>注意點:
1.getNewWeekDate函數接受一個為date類型的參數
2.for循環中，對循環外對象的引用（包含object,array,date類型);數組添加方法會默認執行外層對象最終循環得到的值。例如下面例子：
var dates = new Array();
var currentDate = new Date();
for (var i =0; i < 10;i++){
currentDate.setDate(currentDate.getDate()+2);
console.log(currentDate);
dates.push(currentDate);
}
console.log(dates)
假如currentDate為2023/10/14,循環體內currentDate打印都是2023/10/14整個時間；
循環體外dates打印為10次一樣的10/14 10 2（date）=>Fri Nov 03 2023 18:25:06 GMT+0800 (中國標準時間)
//改進
var dates1 = new Array();
var currentDate = new Date();
for (var i =0; i < 10;i++){
currentDate.setDate(currentDate.getDate()+2);
console.log(currentDate);
dates1.push(new Date(currentDate));
}
console.log(dates1)
最上面實例代碼就是通過每次循環改變最外層date對象的引用來解決的
