由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 相关文章推荐
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
微信小程序实现左右列表联动
May 19 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
vue element-ui读取pdf文件的方法
Nov 26 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
用Flash图形化数据(二)
2006/10/09 PHP
php 魔术方法使用说明
2009/10/20 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
php微信开发之关注事件
2018/06/14 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
Python实现的金山快盘的签到程序
2013/01/17 Python
Python中取整的几种方法小结
2017/01/06 Python
python实现决策树
2017/12/21 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
pip install命令安装扩展库整理
2021/03/02 Python
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
法学研究生自我鉴定范文
2013/12/04 职场文书
家长给孩子的表扬信
2014/01/17 职场文书
研讨会通知
2015/04/27 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers