由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天然的迭代器
Oct 29 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
Express的路由详解
Dec 10 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
vue实现图片上传到后台
Jun 29 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 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 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
Python 创建子进程模块subprocess详解
2015/04/08 Python
Django与JS交互的示例代码
2017/08/23 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
对python周期性定时器的示例详解
2019/02/19 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
django query模块
2019/04/20 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
基于Python解密仿射密码
2019/10/21 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
《生命的药方》教学反思
2014/04/08 职场文书
交通事故调解协议书
2014/04/16 职场文书
美食节策划方案
2014/05/26 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
平遥古城导游词
2015/02/03 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
小学教师读书笔记
2015/07/01 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python