js实现获取最新本周周一开始的日期（单周日历卡）
作者：阳哥
这篇文章主要为大家介绍了js实现获取最新本周周一开始的日期（单周日历卡）示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
获取单周日历选项卡
html
<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对象的引用来解决的
以上就是js实现获取最新本周周一开始的日期（单周日历卡）的详细内容，更多关于js获取单周日历卡的资料请关注脚本之家其它相关文章！