js日期控制項demo

2022-03-31 13:07:03 字數 3142 閱讀 5030

最近在鑽研前端,寫了個日期控制項,內涵**注釋,希望能幫助到大家~

//顯示日曆

function showdate(year, month)

//當月份為12時 下乙個月為1

else

if (month == 12

)

var titlehtml = ""

; titlehtml += '';

titlehtml += prevm + '月'

; titlehtml += '';

titlehtml += '';

titlehtml +=year;

titlehtml += '年'

; titlehtml += '

' +month;

titlehtml += '月'

; titlehtml += '';

titlehtml += nextm + '月'

; otitle.innerhtml =titlehtml;

//將日曆標題 拼接到日曆

獲取日曆 表頭元素(以便新增事件)

var ospans = ocalender.getelementsbytagname('

span');

var prevmonth = ospans[0

];

var nextmonth = ospans[3

];

var nowmonth = ospans[2

];

var nowyear = ospans[1

];

//2.建立星期 表頭

var otable = document.createelement('

table');

var othead = document.createelement('

thead');

var otr = document.createelement('tr'

);

表頭內容填充

var arr = ['

日', '

一', '

二', '

三', '

四', '

五', '六'

];

for (var i = 0; i < arr.length; i++)

將表頭加入到日曆

//3.新增 當前日曆 全部日期

先獲得當期月 有多少天

var daynum = 0

;

if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12

) else

if (month == 4 || month == 6 || month == 9 || month == 11

) else

if (month == 2 &&isleapyear(year))

else

建立 6行7列 日期容器

var otbody = document.createelement('

tbody');

for (var i = 0; i < 6; i++)

}獲得 1號對應的是星期幾

.1.將當月1號賦值給日期變數

odate.setfullyear(year);

//注意 js日期的月份是從0 開始計算

odate.setmonth(month - 1

); odate.setdate(1);

.2.計算1號在第一行日期容器中的位置,依次給日期容器填充內容

//注意 js中 getday方法是獲取當前日期是星期幾

var week =odate.getday();

var otds = ocalender.getelementsbytagname('td'

);

for (var i = 0; i < daynum; i++)

//讓當前日期顯示紅色、後面的顯示藍色

showcolor(otds);

//給左右月份繫結點選事件

monthevent();

//判斷最後一行是否全為空

lasttr(otds);

flag = true

; document.getelementbyid(

'calender

').style.display = "

block";}}

//判斷是否是閏年

function isleapyear(year)

else

if (year % 100 != 0 && year % 4 == 0

) else

}//判斷日期容器最後一行是否有值

function lasttr(otds)

}//全是空的

if(flag) }}

//當前日期顯示紅色、前面的顯示灰色

function showcolor(otds) }}

//給左右月份繫結點選事件

function monthevent()

nextdiv.onclick =function () }}

js日期控制項

var months new array 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一月 十二月 var daysinmonth new array 31,28,31,30,31,30,31,31,30,31,30,31 var days new array 日 一 二 三 四 ...

js 是實現網頁日期控制項

var calendermonth 0 function jcalendar year,month,date jcalendar.prototype.show function html str.push html str.push html str.push for var i 0 i 7 i h...

js 日期控制項WdatePicker設定最小時間

html script 對date的擴充套件,將 date 轉化為指定格式的string 月 m 日 d 小時 h 分 m 秒 s 季度 q 可以用 1 2 個佔位符,年 y 可以用 1 4 個佔位符,毫秒 s 只能用 1 個佔位符 是 1 3 位的數字 例子 new date format yyy...