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にフォーカスを合わせて入力ボックスにバインドし、プラグインを選択する義姉になります。
- 次に、コールバックに入れるアクションを確認し、形式を標準化してから、完成品を表示します