每天一个jquery插件-做日期插件1
做日期插件1
看到别人家的日期插件针不搓，所以自己也尝试搞一个出来看看情况，尽量完善所有动作和效果，今天只把渲染的逻辑完成了，后面的事件每天再来
目前效果
代码部分
*{
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(){
}
}
}
思路都在js的注释里面了，碎觉碎觉~
- 这里面需要的思路不是让你算法去算啥闰年啥的，我们直接加减就能完成数据的处理，需要对时间戳的概念了解一下
- 先是大概的样子弄出来了
- 明天再把切换日期和年份的功能做出来然后把这个dom做成focus绑定在输入框上变成选择插件的小姑
- 接着看看哪些动作放回调进去，规范一下格式再展示成品吧