js实现获取最新本周周一开始的日期（单周日历卡）
更新时间：2023年10月15日 08:41:44 作者：阳哥
这篇文章主要为大家介绍了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获取单周日历卡的资料请关注脚本之家其它相关文章！
相关文章
本节为大家介绍下JavaScript DOM节点添加，将node里面的str放到h1段落中使之成为h1的新段落2014-07-07
这篇文章主要给大家介绍了关于javascript中event loop事件循环的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
在前后端分离的项目中,为了安全,Token 通常会设置有效期,本文将深度拆解 “双 Token 无感刷新” 的实现机制,有需要的小伙伴可以跟随小编一起学习一下2026-03-03
这篇文章主要和大家介绍一下JavaScript中的变量,作用域和垃圾回收的定义与使用，文中的示例代码讲解详细，对我们学习JavaScript有一定的帮助，需要的可以参考一下2022-11-11
xmlplus 是一个JavaScript框架，用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之tree，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要为大家详细介绍了解决JavaScript实现省市联动过程中的bug，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
记录微信小程序 height: calc(xx - xx)；无效问题
这篇文章主要介绍了微信小程序 - height: calc(xx - xx)；无效 问题，文中给大家扩展介绍下jquery点击添加样式，再次点击移除样式的实例代码,需要的朋友可以参考下2019-12-12
我们在使用移动、电信等运营商网上营业厅的时候，为确保业务的完整和正确性，经常会需要用到短信的验证码。最近因为某省业务需要，也做了个类似的功能2016-01-01
reduce()方法接收一个函数做为累加器,数组中的每一个值(从左到右)开始缩减,最终计算为一个值,下面这篇文章主要给大家介绍了关于JavaScript中reduce()详解及使用方法的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了微信小程序实现一张或多张图片上传，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
最新评论