由Javascript实现的页面日历


Posted in Javascript onNovember 04, 2011

效果图:
由Javascript实现的页面日历
CSS代码:

<style type="text/css"> 
*{ 
margin:0; 
padding:0; 
font:10px tahoma; 
} 
#calender{ 
text-align:center; 
width:147px; 
font-size:10px; 
/*color: #27B0C1;*/ 
margin:12px 0 12px 6px; 
border-top:1px solid #EEEEEE; 
border-left:1px solid #EEEEEE; 
} 
#calender .arrow_over{ 
color: #FF1493; 
} 
#calender .arrow_out{ 
color: #FF8C00; 
} 
#calender td{ 
border-bottom:1px solid #EEEEEE; 
border-right:1px solid #EEEEEE; 
width:21px; 
height:20px; 
line-height:16px; 
color:#666666; 
} 
#calender #cal_title{ 
width:147px; background:#EFEFEF; 
} 
#calender #week td{ 
background: #F8F8F8; 
} 
#calender .current{ 
background: #AAE7E8; 
display: block; 
margin:2px; 
} 
#calender .notcurrent{ 
display: block; 
margin:2px; 
background:#EDEDED; 
} 
</style>

脚本代码:
<script type="text/javascript"> 
<!-- 
document.writeln("<div id='calenderdiv' style>日历加载中...</div>"); 
var press_tag; 
function changecal(action,year,month) 
{ 
var strcal; 
switch(action) 
{ 
case "nextmonth": 
if(month==11) 
{ 
month = 1; 
year = year*1 + 1; 
}else{ 
month = month*1 + 2; 
} 
strcal = "<span onmouseover=\"this.className='arrow_over'\" onmouseout=\"this.className='arrow_out'\" class='arrow_out' onclick='calender(" + year + "," + month +")' title='下一个月' style='cursor:hand;'>> </span>"; 
break; 
case "premonth": 
if(month==0) 
{ 
month = 12; 
year = year*1 - 1; 
} 
strcal = "<span onmouseover=\"this.className='arrow_over'\" onmouseout=\"this.className='arrow_out'\" class='arrow_out' onclick='calender(" + year + "," + month +")' title='上一个月' style='cursor:hand;'> <</span>"; 
break; 
case "nextyear": 
year = year*1 + 1; 
month = month*1 + 1; 
strcal = "<span onmouseover=\"this.className='arrow_over'\" onmouseout=\"this.className='arrow_out'\" class='arrow_out' onclick='calender(" + year + "," + month +")' title='下一年' style='cursor:hand;'>>></span>"; 
break; 
case "preyear": 
year = year*1 - 1; 
month = month*1 + 1; 
strcal = "<span onmouseover=\"this.className='arrow_over'\" onmouseout=\"this.className='arrow_out'\" class='arrow_out' onclick='calender(" + year + "," + month +")' title='上一年' style='cursor:hand;'><<</span>"; 
break; 
default:; 
} 
strcal = " " + strcal + " "; 
return(strcal); 
} 
function calender(cyear,cmonth) 
{ 
var d,d_date,d_day,d_month; 
//定义每月天数数组 
var monthdates = ["31","28","31","30","31","30","31","31","30","31","30","31"] 
d = new Date(); 
d_year = d.getYear(); //获取年份 
//判断闰月,把monthdates的二月改成29 
if (((d_year % 4 == 0) && (d_year % 100 != 0)) || (d_year % 400 == 0)) monthdates[1] = "29"; 
if ((cyear != "" ) || (cmonth != "")) 
{ 
//如果用户选择了月份和年份,则当前的时间改为用户设定 
d.setYear(cyear); 
d.setMonth(cmonth-1); 
d.setDate(1); 
} 
d_month = d.getMonth(); //获取当前是第几个月 
d_year = d.getYear(); //获取年份 
d_date = d.getDate(); //获取日期 
//修正19XX年只显示两位的错误 
if(d_year<2000){d_year = d_year + 1900} 
//===========输出日历=========== 
var str; 
str = "<table cellspacing='0' cellpadding='0' id='calender'>"; 
str += "<tr><td id='cal_title' colspan='7' >" 
str += changecal("preyear",d_year,d_month) 
str += changecal("premonth",d_year,d_month) 
str += d_year + " - " + (d_month*1+1) 
str += changecal("nextmonth",d_year,d_month) 
str += changecal("nextyear",d_year,d_month) 
str += "</td></tr>"; 
str += "<tr id='week'><td>Su</td><td>Mo</td><td>Tu</td><td>We</td><td>Th</td><td>Fr</td><td>Sa</td></tr>"; 
str += "<tr>"; 
var firstday,lastday,totalcounts,firstspace,lastspace,monthdays; 
//需要显示的月份共有几天,可以用已定义的数组来获取 
monthdays = monthdates[d.getMonth()]; 
//设定日期为月份中的第一天 
d.setDate(1); 
//需要显示的月份的第一天是星期几 
firstday = d.getDay(); 
//1号前面需要补足的的空单元格的数 
firstspace = firstday; 
//设定日期为月份的最后一天 
d.setDate(monthdays); 
//需要显示的月份的最后一天是星期几 
lastday = d.getDay(); 
//最后一天后面需要空单元格数 
lastspace = 6 - lastday; 
//前空单元格+总天数+后空单元格,用来控制循环 
totalcounts = firstspace*1 + monthdays*1 + lastspace*1; 
//count:大循环的变量;f_space:输出前空单元格的循环变量;l_space:用于输出后空单元格的循环变量 
var count,flag,f_space,l_space; 
//flag:前空单元格输完后令flag=1不再继续做这个小循环 
flag = 0; 
for(count=1;count<=totalcounts;count++) 
{ 
//一开始flag=0,首先输出前空单元格,输完以后flag=1,以后将不再执行这个循环 
if(flag==0) 
{ 
if(firstspace!=0) 
{ 
for(f_space=1;f_space<=firstspace;f_space++) 
{ 
str += "<td> </td>"; 
if(f_space!= firstspace) count++; 
} 
flag = 1; 
continue; 
} 
} 
if((count-firstspace)<=monthdays) 
{ 
//输出月份中的所有天数 
curday = d_year+","+(d_month*1+1)+","+(count - firstspace)+"|" 
linkday = d_year+","+(d_month*1+1)+","+(count - firstspace) 
var today = new Date(); 
if( (d_year == today.getYear()) && (d_month == today.getMonth()) && ((count-firstspace) == today.getDate()) ) 
{ 
//将本地系统中的当前天数高亮 
str += "<td><span class='current'>" + (count - firstspace) + "</span></td>"; 
}else{ 
//不用高亮的部分,没有日志 
str += "<td>" + (count - firstspace) + "</td>"; 
} 
if(count%7==0) 
{ 
if(count<totalcounts) 
{ 
str += "</tr><tr>"; 
}else{ 
str += "</tr>"; 
} 
} 
}else{ 
//如果已经输出了月份中的最后一天,就开始输出后空单元格补足 
for(l_space=1;l_space<=lastspace;l_space++) 
{ 
str += "<td> </td>"; 
if(l_space!= lastspace) count++; 
} 
continue; 
} 
} 
str += "<tr><td colspan='7' style='text-indent:9px;'><a href='https://3water.com' title='网站设计'>www.sugood.cn</a></td></tr></table>" 
document.getElementById("calenderdiv").innerHTML = "<div id='calenderdiv'>" + str + "</div>"; 
} 
//调用函数 
calender("","") 
//--> 
</script>

Javascript 相关文章推荐
JS 操作符整理[推荐收藏]
Nov 15 Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
微信小程序实现简单表格
Feb 14 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 Javascript
微信小程序实现时间戳格式转换
Jul 20 Javascript
jQuery中jqGrid分页实现代码
Nov 04 #Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 #Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 #Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 #Javascript
关于URL中的特殊符号使用介绍
Nov 03 #Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 #Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 #Javascript
You might like
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
Python中最大递归深度值的探讨
2019/03/05 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
Python @property及getter setter原理详解
2020/03/31 Python
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
小区门卫值班制度
2014/01/24 职场文书
人事部岗位职责范本
2014/03/05 职场文书
《忆江南》教学反思
2014/04/07 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
体检通知范文
2015/04/21 职场文书
2016高考感言
2015/08/01 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python