Get Single Week Calendar Tab
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>Single Week Calendar Tab</h1>
<div style="overflow: hidden;">
<h2 ></h2>
<h3 ></h3>
</div>
<ul ></ul>
<ul ></ul>
<script>
//Get the date 7 days ago the current time function getLast7Date(date) {
let pastArr = [];
for (let i = 1; i <= 7; i++) {
(() - 1);//Set date (() + '-' + (() + 1) + '-' + ());
}
(pastArr)
}
let date = new Date(2017, 0, 1);
getLast7Date(date)
()
//Get the latest date of the start of the Monday of this week const date1 = new Date();
function getNewWeekDate(date) { //Single-week calendar plug-in if(!date instanceof Date){
throw new Error("pass the Date Type of params")
}
let curDate = ();
let dayNum = () ? () : 7; //If it is 0, it means Sunday and change to the number 7 let dateCopy = new Date(()); //COPY Two different date objects let dateCopy2 = new Date(());
let arr1 = [];
let arr2 = [];
let x1 = dayNum - 1;
let x2 = 7 - dayNum;
if (x1 > 0) {
()
for (let i = 0; i < x1; i++) {
let changeDate = (() - 1);
(dateCopy);
dateCopy = new Date(changeDate) //Reassign setDate return value is the millisecond representation of the adjusted date }
()
}
if (x2 !== 0) {
for (let i = 0; i < x2; i++) {
let ui = (() + 1);
(dateCopy2);
dateCopy2 = new Date(ui)
}
}
let res = ([date], arr2);
//Render let yearDom = ("#year");
let dayDom = ("#day");
let dateDom = ("#date");
= ();//The default is the year where the current date is located for(let item of res){
let li1 = ('li');
let li2 = ('li');
let day = () == 0 ? 7 : ();
switch(day){
case 1:
day = 'one'
break;
case 2:
day = 'two'
break;
case 3:
day = 'three'
break;
case 4:
day = 'Four'
break;
case 5:
day = 'five'
break;
case 6:
day = 'six'
break;
case 7:
day = 'day'
break;
default:
break;
}
= day
(li1)
let date = ();
if(() === curDate){
= "red"
}
= date;
motiveSetTime();
(li2)
}
}
getNewWeekDate(date1);
function motiveSetTime(){
let timer = setInterval(()=>{
let date = new Date();
("#current-time").innerHTML = ();
},1000)
}
</script>
</body>
</html>Note
The function accepts a parameter of type date
In a loop, a reference to an object outside the loop (including object, array, date type); the array addition method will execute the value obtained by the final loop of the outer object by default. For example, the following example:
var dates = new Array();
var currentDate = new Date();
for (var i =0; i < 10;i++){
(()+2);
(currentDate);
(currentDate);
}
(dates)If the currentDate is 2023/10/14, the currentDate printing in the circulation body will be the entire time of 2023/10/14;
Circulating in vitro dates printed as 10 times the same 10/14 10 2 (date) =>Fri Nov 03 2023 18:25:06 GMT+0800 (China Standard Time)
//improve var dates1 = new Array();
var currentDate = new Date();
for (var i =0; i < 10;i++){
(()+2);
(currentDate);
(new Date(currentDate));
}
(dates1)The uppermost example code is solved by changing the reference of the outermost date object every time.
The above is the detailed content of JS to obtain the latest date (single-week calendar card) from the beginning of this week. For more information about JS to obtain a single-week calendar card, please pay attention to my other related articles!