基於jquery實現日曆簽到功能

2022-09-01 02:36:05 字數 3048 閱讀 5308

思路:

1、獲取當月第一天是週幾

2、獲取當月共幾天

通過獲取下月的第0天,即是當月最後一天日期

3、通過二維陣列構造當月日曆

4、將獲取到的日期第一天在日曆中展示..

知識點:

1、js獲取當月的天數

getdate() 方法可返回月份的某一天,返回值是 1 ~ 31 之間的乙個整數。

var d = new date()

document.write(d.getdate())

輸出:17

getday() 方法可返回表示星期的某一天的數字,返回值是 0(週日) 到 6(週六) 之間的乙個整數。

var d=new date()

document.write(d.getday())

輸出:3

var d = new date();

代表下個月,月份索引從0開始,即當前月為6月時,getmonth()返回值為5,建立日期時同理

//此處構造的日期為下個月的第0天,天數索引從1開始,第0天即代表上個月的最後一天

var curmonthdays = new date(d.getfullyear(), (d.getmonth()+1), 0).getdate();

alert("本月共有 "+ curmonthdays +" 天");

2、構造當月日曆二維陣列

bulidcal : function(iyear, imonth)

for (w = 2; w < 7; w++) }}

return amonth;

}獲取當月第一天是週幾:

var dcaldate = new date(iyear, imonth - 1, 1);

var idayoffirst = dcaldate.getday();

獲取當月共幾天:

getdaysinmonth : function(imonth, iyear)

3、構造當月日曆html

drawcal : function(iyear, imonth ,signlist) else

}htmls.push("");

}htmls.push("");

htmls.push("

");htmls.push("

");return htmls.join('');

}4、控制項的事件處理機制

指定乙個預設的eventname:"load",不同的事件定義不同的eventname

預設時:

setmonthandday:function()

break;

case "next":

var nowmonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];

calutil.showmonth=parseint(nowmonth)+1;

if(calutil.showmonth==13)

break;}},

不同的事件觸發:

bindenvent:function(),,,];

calutil.eventname="prev";

calutil.init(signlist);

});//繫結下個月事件

$(".calendar_month_next").click(function(),,,];

calutil.eventname="next";

calutil.init(signlist);

});}

效果圖:

頁面引用:

js:var calutil = ,

draw:function(signlist),

//繫結事件

bindenvent:function(),,,];

calutil.eventname="prev";

calutil.init(signlist);

});//繫結下個月事件

$(".calendar_month_next").click(function(),,,];

calutil.eventname="next";

calutil.init(signlist);

});},

//獲取當前選擇的年月

setmonthandday:function()

break;

case "next":

var nowmonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];

calutil.showmonth=parseint(nowmonth)+1;

if(calutil.showmonth==13)

break;}},

getdaysinmonth : function(imonth, iyear),

bulidcal : function(iyear, imonth)

for (w = 2; w < 7; w++) }}

return amonth;

},ifhassigned : function(signlist,day)

});return signed ;

},drawcal : function(iyear, imonth ,signlist) else

}htmls.push("");

}htmls.push("");

htmls.push("

");htmls.push("

");return htmls.join('');}};

js php 實現日曆簽到 js實現每日簽到功能

js var calutil else 內層for語句結束 document.write 外層for語句結束 單元格的自然序號是否代表有效日期非常關鍵,為此必須加入乙個過濾機制 僅列印有效的日期。有效的日期大於0小於小於等於處理月的總天數。三.以下是完整的js日曆 function is leap ...

Redis基於Bitmap實現使用者簽到功能

目錄 很多應用上都有使用者簽到的功能,尤其是配合積分系統一起使用。現在有以下需求 對於使用者簽到資料,如果直接採用資料庫儲存,當出現高併發訪問時,對資料庫壓力會很大,例如雙十一簽到活動。這時候應該採用快取,以減輕資料庫的壓力,redis是高效能的記憶體資料庫,適用於這樣的場景。如果採用string型...

Android快速實現簽到日曆

總結一下需求 1 展示共35天的日期,五行七列 2 當天日期必須處在日曆最中間的一行,也就是第三行。效果圖 1 用兩個網格布局的recyclerview分別展示日曆的星期和日期 2 獲取當天日期在日曆中所處的位置,由於當天日期是展示在第三行的,每行有七個日期,位置從零開始算,也就是第三行是從第14個...