又一日历输入效果没考虑兼容性，IE通过- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 又一日历输入效果没考虑兼容性，IE通过

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

Javascript 中的又一日历输入效果没考虑兼容性，IE通过

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

收藏到网摘: n/a

js判断浏览器的比较全的代码项目添加

点击运行可以看到效果:

<script>
onload = function()
{ var panel = new SelectPanel; var rili = new Kalendar; panel.Create(); rili.Create(panel); panel.Apply(document.form1.a); panel.Apply(document.form1.b);
}
</script>
<form name="form1">
<input name="a" readonly>
<input name="b" readonly>
</form>
<script>
/* 日历选择类
this.Width = 0; // 设置日历宽度，为零时不指定宽度。
this.Height = 0; // 设置日历高度，为零时不指定高度。
this.BorderColor = "#1095c6"; // 设置日历边框颜色。
this.BackColor = "white"; // 设置日历背景颜色。
this.CapBack = "#d9ebfe"; // 设置日历深色。
this.Tag = doc.createElement("table"); // 日历DOM节点。
this.Create = function(container) // 将日历绑定到指定对象。
*/
function Kalendar(win)
{ if(!win) win = self; var doc = win.document; var _Kalendar = this; this.Width = 0; this.Height = 0; this.BorderColor = "#1095c6"; this.BackColor = "white"; this.CapBack = "#d9ebfe"; this.Tag = doc.createElement("table"); this.Tag.style.cursor = "default"; this.Create = function(container) { if(!container) container = doc.body; this.Parent = container; this.Tag.style.borderCollapse = "collapse"; this.Tag.border = 1; this.Tag.borderColor = this.BorderColor; this.Tag.width = this.Width ? this.Width : ""; this.Tag.height = this.Height ? this.Height : ""; this.Tag.rows[0].cells[0].bgColor = this.CapBack; (container.Tag || container).appendChild(this.Tag); BuildDateFace(new Date(sltNian.value, sltYue.value)); } var today = new Date; var tr = this.Tag.insertRow(); tr.insertCell(); var sltNian = doc.createElement("select"); sltNian.options.add(new Option(today.getFullYear() + "年", today.getFullYear())); InitYearSelect(); function InitYearSelect() { while(sltNian.selectedIndex < 10) sltNian.options.add(new Option(sltNian.options[0].value - 1 + "年", sltNian.options[0].value - 1), 0); while(sltNian.options.length < sltNian.selectedIndex + 11) sltNian.options.add(new Option(sltNian.lastChild.value - 0 + 1 + "年", sltNian.lastChild.value - 0 + 1)); } var sltYue = sltNian.cloneNode(); for(var i = 0; i < 12;) { var opt = new Option(++i + "月", i-1); sltYue.options.add(opt); } sltYue.onchange = function() { BuildDateFace(new Date(sltNian.value, sltYue.value)); } sltNian.onchange = function() { sltYue.onchange(); InitYearSelect(); } sltYue.value = today.getMonth(); sltNian.value = today.getFullYear(); tr.cells[0].appendChild(sltNian); tr.cells[0].appendChild(sltYue); tr.cells[0].colSpan = 7; tr.cells[0].align = "center"; var tBody = this.Tag.tBodies[0]; tBody.insertRow(); for(var i = 0; i < 7; i++) { var td = tBody.rows[1].insertCell(); td.align = "center"; td.appendChild(doc.createTextNode("日一二三四五六".charAt(i))); } tBody.rows[1].cells[0].style.color = "red"; tBody.rows[1].cells[6].style.color = "green"; for(var i = 0; i < 6; i++) { var row = tBody.rows[1].cloneNode(true); tBody.appendChild(row); IRow.apply(row); } tBody.rows[7].deleteCell(); tBody.rows[7].cells[5].colSpan = 2; tBody.rows[7].cells[5].lastChild.data = "清空"; tBody.rows[1].style.fontWeight = "bold"; function IRow() { for(var i = 0; i < this.cells.length; i++) { this.cells[i].onmouseover = function() { if(!IsToday(this.title)) this.bgColor = _Kalendar.CapBack; } this.cells[i].onmouseout = function() { if(!IsToday(this.title)) this.bgColor = ""; } this.cells[i].onclick = function() { _Kalendar.Parent.Owner.value = this.title; _Kalendar.Parent.Tag.style.display = "none"; } } } function IsToday(date) { date = date.split("-"); var year = parseInt(date[0]); var month = parseInt(date[1], 10) - 1; date = parseInt(date[2], 10); return today.getFullYear() == year && today.getMonth() == month && today.getDate() == date; } function BuildDateFace(date) { date.setDate(1); var year = date.getFullYear(); var month = date.getMonth(); var offset = date.getDay(); var maxDate = GetDates(year, month); for(var i = 0; i < maxDate; i++) { var td = _Kalendar.Tag.cells[i + 8 + offset]; td.lastChild.data = i + 1; td.title = [year, (month < 9 ? "0" : "") + (month + 1), (i < 9 ? "0" : "") + (i + 1)].join("-"); td.bgColor = (IsToday(td.title)) ? _Kalendar.CapBack : ""; td.disabled = false; } for(var i = 8 + offset + maxDate; i < _Kalendar.Tag.cells.length - 1; i++) { var td = _Kalendar.Tag.cells[i]; td.title = ""; td.lastChild.data = i - 7 - offset - maxDate; td.disabled = true; } lastMonth = GetDates(year, month - 1); while(offset) { var td = _Kalendar.Tag.cells[8 + (--offset)]; td.title = ""; td.lastChild.data = lastMonth - date.getDay() + offset + 1; td.disabled = true; } } function GetDates(year, month) { if(month < 0) { month = 11; year--; } if(month == 12) { month = 0; year++; } var date = new Date(year, month, 31); return 31 - date.getDate() || 31; }
}
/* 选择面板类
this.Tag = doc.createElement("div"); // 面板HTML标签
this.Owner = null; // 面板对应的输入框。
this.Width = 0; // 宽度，为0时自适应
this.Height = 0; // 面板高度，为0时自适应
this.BorderColor = "#1095c6"; // 边框颜色
this.BgColor = "white"; // 面板背景颜色
this.Create(container) // 将面板创建到container内
this.Apply(target) // 将面板应用到目标控件。
*/
function SelectPanel(win)
{ if(!win) win = self; var doc = win.document; var _SelectPannel = this; this.Owner = null; this.Tag = doc.createElement("div"); this.Width = 0; this.Height = 0; this.BorderColor = "#1095c6"; this.BgColor = "white"; IMouseEvent.apply(this.Tag); if(!win._PannelList) win._PannelList = [this]; else win._PannelList.push(this); if(!doc.onmousedown) doc.onmousedown = function() { for(var i in win._PannelList) { if(!win._PannelList[i].AllowShow && win._PannelList[i].Tag.style.display != "none" && doc.activeElement.tagName != "SELECT") win._PannelList[i].Tag.style.display = "none"; } } this.Create = function(container) { var style = this.Tag.style; if(this.Width) style.width = this.Width; if(this.Height) style.height = this.Height; style.backgroundColor = this.BgColor; style.border = "1px solid " + this.BorderColor; style.position = "absolute"; style.left = "0px"; style.top = "0px"; style.overflow = "auto"; style.display = "none"; (container || doc.body).appendChild(this.Tag); } this.Apply = function(target) { target.onclick = function() { _SelectPannel.Owner = this; IMouseEvent.apply(target); var x = target.offsetLeft; var y = target.offsetTop + target.offsetHeight + 1; var sender = target; while(sender.offsetParent) { sender = sender.offsetParent; x += sender.offsetLeft; y += sender.offsetTop; } _SelectPannel.Tag.style.left = x + "px"; _SelectPannel.Tag.style.top = y + "px"; _SelectPannel.Tag.style.display = "block"; } } function IMouseEvent() { this.onmouseenter = function() { _SelectPannel.AllowShow = true; } this.onmouseleave = function() { _SelectPannel.AllowShow = false; } }
}
</script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

做得比较急，所以没考虑兼容性。
通过两个类实现，一个是面板类，一个是日历类。
由于我开发时所有公共js都是在顶级窗口一次加载的，所以在子窗口创建对象时需要把当前窗口对象传进去，例如： var panel = new parent.parent.SelectPanel(self);如果没传self参数，默认就是加载js的窗口。
marcian 在网上找的那个公历算法有点复杂，呵呵。我获取当前月最大天数，以及当前月第一天是星期几是直接通过JS自带的Date函数来实现的。

复制代码代码如下:

// 获取当月最大天数 
//asfman提供更简单的方式：return (new Date(y, m+1, 0)).getDate() 
function GetDates(year, month) 
{ 
 var date = new Date(year, month, 31); 
 return 31 - date.getDate() || 31; 
} 
// 获取当月第一天是星期几 
function GetFirstDay(year, month) 
{ 
 return (new Date(year, month, 1)).getDay(); 
} 

/* 下面这部分可以不要，因为即使出现new Date(2007, -1, 31)，这种现象，Date会自动转换成Date(2006, 12, 31)
if(month < 0)
{
month = 11;
year--;
}
if(month == 12)
{
month = 0;
year++;
}*/

js判断浏览器的比较全的代码项目添加

评论 (0) All