JS之日历实践附实现代码- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS之日历实践附实现代码

Javascript: 用JavaScript实现浏览器地震效果; Javascript实例教程(8) 利用Javascript基于浏览器类型的重定向; Javascript实例教程(14) 鼠标触发窗口; 使主页呈现“飞舞”特效; Javascript实例教程(21) OLE Automation(1); Javascript实例教程(13) 鼠标移过时报警; Javascript实例教程(10) 随机显示图片; Javascript实例教程(2) 创建弹出式窗口; JavaScript 小技巧(第十集); Javascript实例教程(3) 创建折叠式导航菜单; Javascript实例教程(7) 利用Javascript进行密码保护; 完美解决一个事件激活多个函数(2); Javascript模拟游戏中的弹出菜单效果; Javascript实例教程(6) 在一个表单中设置和检查Cookies; JavaScript 小技巧(第八集); Javascript实例教程(4) 探测浏览器插件; JavaScript 小技巧(第九集); JavaScript学习:基础继承机制; 初学Javascript之cookie篇(译); 让弹出窗口变得“体贴”一些(javascript)

No. « ‹ 10 11 12 13 › »

技术文章搜索

关键字

Javascript 中的 JS之日历实践附实现代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 186 ::

收藏到网摘: n/a

JS 强制设为首页的代码 javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick

在很多采集信息的过程中，日期的准确输入是一个重要的问题，因为日期在不同的地方以不同的格式表达。本例旨在应用于网页中，用户可通过鼠标点击向程序输入日期数据。程序是这个样子的：首先采集用户输入的年份和月份，经过计算获取该月份的最大天数，并获取月份第一天是星期几。然后在表格中填充该月份的具体信息。

点击运行可以看到效果:

<html>
<head>
<title>日历测试</title>
<script>
function getMonthJuZhen(date){
if(arguments.length == 0){
throw new Error("need a date");
}
if(arguments[0] == null){
throw new Error("date is null or undefined");
}
if(arguments[0] instanceof Date){
var monthjuzhen = new Array(5);
for(var r = 0 ; r < 5 ; r++){
monthjuzhen[r] = [0,0,0,0,0,0,0];
}
var maxDay = getMaxDay(arguments[0]);
arguments[0].setDate(1);
var r = 0;
var c = arguments[0].getDay();
for(var d = 1 ; d <= maxDay ; d++){
monthjuzhen[r][c] = d;
if(c == 6){
if(r == 4){
r = 0;
}
else{
r++;
}
c = 0;
}
else{
c++;
}
}
return monthjuzhen;
}
else{
throw new Error("need a date");
}
}
function getMaxDay(date){
if(arguments.length == 0){
throw new Error("need a date");
}
if(arguments[0] == null){
throw new Error("date is null or undefined");
}
if(arguments[0] instanceof Date){
var tempDate = new Date(arguments[0].toString());
if(arguments[0].getMonth() == 11){
tempDate.setFullYear((tempDate.getFullYear()+1));
tempDate.setMonth(0);
}
else{
tempDate.setMonth((tempDate.getMonth()+1));
}
return Math.floor((tempDate.getTime()-arguments[0].getTime())/(1000*60*60*24));
}
else{
throw new Error("need a date");
}
}
function updateDate(){
var yearInput = document.getElementById("yearinput");
var monthInput = document.getElementById("monthinput");
try{
var year = parseInt(yearInput.value);
var month = parseInt(monthInput.value);
if(isNaN(year)){
if(isNaN(month)){
monthInput.value = "";
}
yearInput.value = "";
return;
}
if(isNaN(month)){
monthInput.value = "";
return;
}
if(month > 12 || month < 1){
monthInput.value = "";
return;
}
month--;
var date = new Date(year,month);
var monthjuzhen = getMonthJuZhen(date);
var day;
var dayvalue;
for(var r in monthjuzhen){
for(var c in monthjuzhen[parseInt(r)]){
day = document.getElementById(r+"-"+c);
dayvalue = monthjuzhen[parseInt(r)][parseInt(c)];
if(dayvalue == 0){
if(day.hasChildNodes()){
day.removeChild(day.firstChild);
}
day.onmouseover = null;
day.onmouseout = null;
day.onclick = null;
continue;
}
if(day.hasChildNodes()){
day.firstChild.nodeValue = dayvalue;
}
else{
day.appendChild(document.createTextNode(dayvalue));
}
day.setAttribute("date",year+"-"+month+"-"+dayvalue);
day.onmouseover = function(){this.style.backgroundColor = "black";this.style.color = "white";};
day.onmouseout = function(){this.style.backgroundColor = "white";this.style.color = "black"};
day.onclick = subDate;
}
}
}
catch(e){
alert(e);
}
}
function subDate(){
var date = this.getAttribute("date").match(/(\d+)-(\d+)-(\d+)/);
alert(new Date(date[1],date[2],date[3]));
}
</script>
</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 强制设为首页的代码 javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick

Javascript 中的 JS之日历实践附实现代码

评论 (0) All