JS之日历实践附实现代码
2009-02-01 00:00
681 查看
程序是这个样子的:首先采集用户输入的年份和月份,经过计算获取该月份的最大天数,并获取月份第一天是星期几。然后在表格中填充该月份的具体信息。
日历测试
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 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]));
}
年
月 更新
日一二三四五六
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
日历测试
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 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]));
}
年
月 更新
日一二三四五六
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关文章推荐
- JS之日历实践附实现代码
- 分别实现数字时钟和日历的js代码
- js编写当天简单日历效果【实现代码】
- 纯js简单日历实现代码
- 【实践】js实现windows系统日历
- js编写当天简单日历效果【实现代码】
- 纯js简单日历实现代码
- JS获取下拉列表所选中的TEXT和Value的实现代码
- 用js实现before和after伪类的样式修改的示例代码
- three.js实现3D模型展示的示例代码
- js 禁止选择功能实现代码(兼容IE/Firefox)
- 使用DWR实现JS调用服务端Java代码
- js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
- JS实现的另类手风琴效果网页内容切换代码
- Vue.js实现输入框绑定的实例代码
- Vue.js移动端左滑删除组件的实现代码
- JS option location 页面跳转实现代码
- js实现的map方法示例代码
- 用js判断页面是否加载完成实现代码
- JS组件Bootstrap Table表格行拖拽效果实现代码