资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
JS之日历实践附实现代码
程序是这个样子的:首先采集用户输入的年份和月份,经过计算获取该月份的最大天数,并获取月份第一天是星期几。然后在表格中填充该月份的具体信息。
<html> <head> <title>日历测试</title> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Afunction%20getMonthJuZhen(date)%7B%20%0D%0Aif(arguments.length%20%3D%3D%200)%7B%20%0D%0Athrow%20new%20Error(%22need%20a%20date%22)%3B%20%0D%0A%7D%20%0D%0Aif(arguments%5B0%5D%20%3D%3D%20null)%7B%20%0D%0Athrow%20new%20Error(%22date%20is%20null%20or%20undefined%22)%3B%20%0D%0A%7D%20%0D%0Aif(arguments%5B0%5D%20instanceof%20Date)%7B%20%0D%0Avar%20monthjuzhen%20%3D%20new%20Array(5)%3B%20%0D%0Afor(var%20r%20%3D%200%20%3B%20r%20%3C%205%20%3B%20r%2B%2B)%7B%20%0D%0Amonthjuzhen%5Br%5D%20%3D%20%5B0%2C0%2C0%2C0%2C0%2C0%2C0%5D%3B%20%0D%0A%7D%20%0D%0Avar%20maxDay%20%3D%20getMaxDay(arguments%5B0%5D)%3B%20%0D%0Aarguments%5B0%5D.setDate(1)%3B%20%0D%0Avar%20r%20%3D%200%3B%20%0D%0Avar%20c%20%3D%20arguments%5B0%5D.getDay()%3B%20%0D%0Afor(var%20d%20%3D%201%20%3B%20d%20%3C%3D%20maxDay%20%3B%20d%2B%2B)%7B%20%0D%0Amonthjuzhen%5Br%5D%5Bc%5D%20%3D%20d%3B%20%0D%0Aif(c%20%3D%3D%206)%7B%20%0D%0Aif(r%20%3D%3D%204)%7B%20%0D%0Ar%20%3D%200%3B%20%0D%0A%7D%20%0D%0Aelse%7B%20%0D%0Ar%2B%2B%3B%20%0D%0A%7D%20%0D%0Ac%20%3D%200%3B%20%0D%0A%7D%20%0D%0Aelse%7B%20%0D%0Ac%2B%2B%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Areturn%20monthjuzhen%3B%20%0D%0A%7D%20%0D%0Aelse%7B%20%0D%0Athrow%20new%20Error(%22need%20a%20date%22)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20getMaxDay(date)%7B%20%0D%0Aif(arguments.length%20%3D%3D%200)%7B%20%0D%0Athrow%20new%20Error(%22need%20a%20date%22)%3B%20%0D%0A%7D%20%0D%0Aif(arguments%5B0%5D%20%3D%3D%20null)%7B%20%0D%0Athrow%20new%20Error(%22date%20is%20null%20or%20undefined%22)%3B%20%0D%0A%7D%20%0D%0Aif(arguments%5B0%5D%20instanceof%20Date)%7B%20%0D%0Avar%20tempDate%20%3D%20new%20Date(arguments%5B0%5D.toString())%3B%20%0D%0Aif(arguments%5B0%5D.getMonth()%20%3D%3D%2011)%7B%20%0D%0AtempDate.setFullYear((tempDate.getFullYear()%2B1))%3B%20%0D%0AtempDate.setMonth(0)%3B%20%0D%0A%7D%20%0D%0Aelse%7B%20%0D%0AtempDate.setMonth((tempDate.getMonth()%2B1))%3B%20%0D%0A%7D%20%0D%0Areturn%20Math.floor((tempDate.getTime()-arguments%5B0%5D.getTime())%2F(1000*60*60*24))%3B%20%0D%0A%7D%20%0D%0Aelse%7B%20%0D%0Athrow%20new%20Error(%22need%20a%20date%22)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20updateDate()%7B%20%0D%0Avar%20yearInput%20%3D%20document.getElementById(%22yearinput%22)%3B%20%0D%0Avar%20monthInput%20%3D%20document.getElementById(%22monthinput%22)%3B%20%0D%0Atry%7B%20%0D%0Avar%20year%20%3D%20parseInt(yearInput.value)%3B%20%0D%0Avar%20month%20%3D%20parseInt(monthInput.value)%3B%20%0D%0Aif(isNaN(year))%7B%20%0D%0Aif(isNaN(month))%7B%20%0D%0AmonthInput.value%20%3D%20%22%22%3B%20%0D%0A%7D%20%0D%0AyearInput.value%20%3D%20%22%22%3B%20%0D%0Areturn%3B%20%0D%0A%7D%20%0D%0Aif(isNaN(month))%7B%20%0D%0AmonthInput.value%20%3D%20%22%22%3B%20%0D%0Areturn%3B%20%0D%0A%7D%20%0D%0Aif(month%20%3E%2012%20%7C%7C%20month%20%3C%201)%7B%20%0D%0AmonthInput.value%20%3D%20%22%22%3B%20%0D%0Areturn%3B%20%0D%0A%7D%20%0D%0Amonth--%3B%20%0D%0Avar%20date%20%3D%20new%20Date(year%2Cmonth)%3B%20%0D%0Avar%20monthjuzhen%20%3D%20getMonthJuZhen(date)%3B%20%0D%0Avar%20day%3B%20%0D%0Avar%20dayvalue%3B%20%0D%0Afor(var%20r%20in%20monthjuzhen)%7B%20%0D%0Afor(var%20c%20in%20monthjuzhen%5BparseInt(r)%5D)%7B%20%0D%0Aday%20%3D%20document.getElementById(r%2B%22-%22%2Bc)%3B%20%0D%0Adayvalue%20%3D%20monthjuzhen%5BparseInt(r)%5D%5BparseInt(c)%5D%3B%20%0D%0Aif(dayvalue%20%3D%3D%200)%7B%20%0D%0Aif(day.hasChildNodes())%7B%20%0D%0Aday.removeChild(day.firstChild)%3B%20%0D%0A%7D%20%0D%0Aday.onmouseover%20%3D%20null%3B%20%0D%0Aday.onmouseout%20%3D%20null%3B%20%0D%0Aday.onclick%20%3D%20null%3B%20%0D%0Acontinue%3B%20%0D%0A%7D%20%0D%0Aif(day.hasChildNodes())%7B%20%0D%0Aday.firstChild.nodeValue%20%3D%20dayvalue%3B%20%0D%0A%7D%20%0D%0Aelse%7B%20%0D%0Aday.appendChild(document.createTextNode(dayvalue))%3B%20%0D%0A%7D%20%0D%0Aday.setAttribute(%22date%22%2Cyear%2B%22-%22%2Bmonth%2B%22-%22%2Bdayvalue)%3B%20%0D%0Aday.onmouseover%20%3D%20function()%7Bthis.style.backgroundColor%20%3D%20%22black%22%3Bthis.style.color%20%3D%20%22white%22%3B%7D%3B%20%0D%0Aday.onmouseout%20%3D%20function()%7Bthis.style.backgroundColor%20%3D%20%22white%22%3Bthis.style.color%20%3D%20%22black%22%7D%3B%20%0D%0Aday.onclick%20%3D%20subDate%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Acatch(e)%7B%20%0D%0Aalert(e)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20subDate()%7B%20%0D%0Avar%20date%20%3D%20this.getAttribute(%22date%22).match(%2F(%5Cd%2B)-(%5Cd%2B)-(%5Cd%2B)%2F)%3B%20%0D%0Aalert(new%20Date(date%5B1%5D%2Cdate%5B2%5D%2Cdate%5B3%5D))%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </head> <body> <div><table style="background-color:white;"> <tr> <td colspan="7"> <input id="yearinput" type="text" size="4" MAXLENGTH="4" onchange="updateDate()"/>年 <input id="monthinput" type="text" size="2" MAXLENGTH="2" onchange="updateDate()"/>月 <span onclick="updateDate()">更新</span></td> </tr> <tr> <td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td> </tr> <tr> <td id="0-0"></td><td id="0-1"></td><td id="0-2"></td><td id="0-3"></td><td id="0-4"></td><td id="0-5"></td><td id="0-6"></td> </tr> <tr> <td id="1-0"></td><td id="1-1"></td><td id="1-2"></td><td id="1-3"></td><td id="1-4"></td><td id="1-5"></td><td id="1-6"></td> </tr> <tr> <td id="2-0"></td><td id="2-1"></td><td id="2-2"></td><td id="2-3"></td><td id="2-4"></td><td id="2-5"></td><td id="2-6"></td> </tr> <tr> <td id="3-0"></td><td id="3-1"></td><td id="3-2"></td><td id="3-3"></td><td id="3-4"></td><td id="3-5"></td><td id="3-6"></td> </tr> <tr> <td id="4-0"></td><td id="4-1"></td><td id="4-2"></td><td id="4-3"></td><td id="4-4"></td><td id="4-5"></td><td id="4-6"></td> </tr> </table> </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程