由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获得地址栏参数的两种方法
Nov 08 Javascript
Prototype使用指南之string.js
Jan 10 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 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时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
php cli换行示例
2014/04/22 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
django加载本地html的方法
2018/05/27 Python
Python实现微信小程序支付功能
2019/07/25 Python
python支持多线程的爬虫实例
2019/12/21 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
前端实现打印图像功能
2019/08/27 HTML / CSS
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
高中生班主任评语
2014/04/25 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
小学生安全责任书
2014/07/25 职场文书
人与自然的观后感
2015/06/18 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
python playwrigh框架入门安装使用
2022/07/23 Python