由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模板实现方法
Apr 27 Javascript
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
JavaScript用document.write()输出换行的示例代码
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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
JS中的三个循环小结
2017/06/20 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
python实现连连看游戏
2020/02/14 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
金讯Java笔试题目
2013/06/18 面试题
自荐信怎么写呢?
2013/12/09 职场文书
外企求职信范文分享
2013/12/31 职场文书
函授教育个人学习的自我评价
2013/12/31 职场文书
教师一岗双责责任书
2014/04/16 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
网站出售协议书范文
2014/10/10 职场文书
工作失职检讨书范文
2015/05/05 职场文书
公司规章制度范本
2015/08/03 职场文书
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技