A jquery plug-in every day-do date plug-in 1
Do date plugin 1
Seeing that other people’s date plug-ins don’t rub the needles, so I try to make one to see the situation, and try to improve all the actions and effects. Today, only the rendering logic is completed, and the following events will come again every day.
Current effect
Code part
*{
margin: 0px;
padding: 0px;
}
.rel{
width: 210px;
height: 210px;
}
.item{
font-size: 12px;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
float:left;
color: black;
}
.item.head{
background-color: gray;
color: white;
}
.item.prev,.item.next{
color: lightgray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做日期插件</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/zrqcj.js"></script>
<link href="css/zrqcj.css" type="text/css" rel="stylesheet" />
<style>
#div{
border: 1px solid lightgray;
margin: 20px auto;
}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>
<script>
var temp = zrqcj("div");
temp.load();
</script>
var zrqcj = function(id){
var $id= $("#"+id);
$id.addClass("rel");
for(var i = 0;i<7;i++){
var $item = $("<div class='item head'>周"+i+"</div>");
$item.appendTo($id);
}
//首先知道当前时间
var t =new Date();//时间对象
var tt = t.getTime();//时间戳
var week = t.getDay();//周
var month = t.getMonth()+1;
var day = t.getDate();
//首先算出第一天的时间戳
var tt0 = tt-1000*60*60*24*(day-1);
var t0 = new Date(tt0);
var week0 = t0.getDay();
var day0 = t0.getDate();
var month0 = t0.getMonth();
//然后分割出年月日，知道是周几，然后逐个往前往后填满预计的天
//假如不是周末，那么就往前部上几天补到周末
//中间计数有没有满6行也就是42条数据
var index= 0;
var tt1 = tt0;
while(week0>0){
tt1-=1000*60*60*24
var t1= new Date(tt1);
var day1 = t1.getDate();
var $item = $("<div class='item prev'>"+day1+"</div>");
$item.appendTo($id);
week0--;
index++;
}
var tt2 = tt0;
var t2 = new Date(tt0);
var month2 = t2.getMonth();
var day2 = t2.getDate();
//将这一个月的数据添加进来，判断条件就是月份变没变
while(month2==month0){
var $item = $("<div class='item'>"+day2+"</div>");
$item.appendTo($id);
tt2+=1000*60*60*24;
t2 = new Date(tt2);
month2 = t2.getMonth();
day2 = t2.getDate();
index++;
}
while(index<35){
var $item = $("<div class='item next'>"+day2+"</div>");
$item.appendTo($id);
tt2+=1000*60*60*24;
t2 = new Date(tt2);
month2 = t2.getMonth();
day2 = t2.getDate();
index++;
}
console.log(index)
return{
$id:$id,
load:function(){
}
}
}
The ideas are all in the comments of js, shattered sleep~
- The idea here is not to let your algorithm count leap years. We can directly add and subtract to complete the data processing. You need to understand the concept of timestamp
- I figured it out first.
- Tomorrow, we will make the function of switching the date and year, and then make this dom focus and bind it to the input box to become the sister-in-law who selects the plug-in.
- Then take a look at which actions to put in the callback, standardize the format and then show the finished product