<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="all" name="robots" />
<meta name="author" content="RainoXu" />
<meta name="Keywords" content="">
<meta name="description" content="" />
<meta content="Xhtml+CSS,ASP,网页设计" name="keywords" />
<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='http://www.rainoina.com' title='访问RainoXu的小站'>www.rainoina.com</a></td></tr></table>"
document.getElementById("calenderdiv").innerHTML = "<div id='calenderdiv'>" + str + "</div>";
}
//调用函数
calender("","")
//-->
</script>
</head>
<body>
</body>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站,js.alixixi.com</a>

javascript js写特效日历的更多相关文章

  1. js写个日历

    其实我是一个对时间和日期不怎么感兴趣的人,小学的时候感觉时间或者日期那块就让我很晕,因为有时候是100进制有时候是60进制,搞的我对日历一直很不感兴趣,最近不知道为什么想写一个日历了,可想而知,这个玩 ...

  2. 自己用js写的日历(在考勤中使用,显示员工的日期的考勤情况)

    1.HTML部分 <div id="AttendanceDataDetailDiv"> <div class="A_close"> &l ...

  3. 纯JS写出日历

    封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" va ...

  4. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  5. JavaScript实战-菜单特效

    以下是我自己用原生JS写的各种菜单特效,虽然网上一搜一大堆,但我还是喜欢自己来写一写! 这是上一篇:JavaScript实战(带收放动画效果的导航菜单) 下面是经过优化后的完整代码,优化了CSS样式. ...

  6. javascript学习-原生javascript的小特效(改变透明度效果)

    前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 ( 以下效果兼容IE5+ IE5-以下没有测试哦) 今天为大家演示的效果是一个div,鼠标经过的时候透明度为100%,鼠标移出的时 ...

  7. javascript学习-原生javascript的小特效(简单的运动效果)

    前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 一:运动特效(主要是通过改变元素的left,right,height,width,opacity来达到运动的效果) 我们今天做一个 ...

  8. js超简单日历

    用原生js写了一个超级简单的日历.当做是练习js中的Date类型. 思路: 获取某个日期,根据年份计算出每个月的天数. 利用Date中的getDay()知道该月份的第一天为星期几. 循环创建表格,显示 ...

  9. 未封装的js放大镜特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

随机推荐

  1. mysql 函数(二)

    1.space(N) 输出空格 SELECT SPACE(5); -> '     ' 2.replace(str,from_str,to_str) 讲str中的from_str 替换成to_s ...

  2. 教你如何完美保存Html编辑器编辑过的文本到Word中

    有时候在网页上面编辑了一段文字,有图片,想保存一份到word文档里面,但是复制粘贴以后发现格式并没有保存下来,今天就来教大家如何完整的保存Html编辑器编辑过的文字(可以包含图片,但是图片必须是绝对路 ...

  3. 浩瀚技术助力批发零售商户实现PDA移动POS打印扫描进销存信息化管理

    批发零售商户其各门店销售品种多,销售量大,在市场上占据巨大的份额,随着各门店的不断扩展,基层的销售管理并不尽如意,传统的进销存管理软件安装在PC端,无法满足有现有的业务支撑,面对当前现状,移动进销存管 ...

  4. SharePoint 2013 设置自定义布局页

    在SharePoint中,我们经常需要自定义登陆页面.错误页面.拒绝访问等:不知道大家如何操作,以前自己经常在原来页面改或者跳转,其实SharePoint为我们提供了PowerShell命令,来修改这 ...

  5. 实现3D摄像机缓冲系统的一些思考

    最近需要模拟红侠乔伊的镜头运用.这东西初看简单,实际还是很需要功夫的.关键不是程序技术如何(就一个摄像机),而是分析其轨迹和追踪点规律.其实就是一个3D空间中的缓冲系统.你如何确定都有什么参数,这么多 ...

  6. Java读取本地文件进行unicode解码

    工具使用: package test.opservice; import eh.util.MapValueUtil; import java.io.BufferedReader; import jav ...

  7. oracle安装界面中文乱码解决

    在安装oracle时如果我们用的是英文安装没有任何问题,但是我要安装中文的,结果中文界面就出现了乱码了,后来网上找了原因是要安装中文包才可以,下面我来介绍一下. 在Linux的X window里安装o ...

  8. 如何把由js生成的内容水平居中?

    一.问题来源 如右侧的微博关注组件,直接用div的align居中没效果,我就开始百度了.即在<div> <script>.....</script>  </d ...

  9. ids &amp; hdmi 原理

    http://www.taiwanwebinar.com/zh_TW/STATIC/SITE/dwc_hdmi_tx.pdf http://blog.csdn.net/g_salamander/art ...

  10. 初学Javascript对象

    <script> var p=new Object(); //属性 p.width=; p.height=; p.num=; p.autotime=; //方法 p.autoplay=fu ...