javascript写日历代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<LINK REL=stylesheet HREF="../../images/ntstyles.css" TYPE="text/css">
<title>Canlender--JavaScript</title>
<style>
td {
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}

</style>

<script language="JavaScript">
function loadend()
{
parent.funpool.showPage();
}

function Out_Branch(ButtonID)
{
if( ButtonID==0 )
{
if(parent.varpool.RegDate =="")
return 0;
}

parent.funpool.button_Branch(ButtonID);
}

function scrkey()
{
if ( window.event.keyCode == 8 || window.event.keyCode == 9 )
{
window.event.keyCode = 16;
}
}
</script>

</head>
<body background="../../images/background/showtxt.jpg" onkeydown="scrkey()">
<div style=‘position: absolute; width: 790; height: 50; z-index: 1; left: 0px; top: 107px‘ align="center">
<P class=‘title1‘>请选择预约时间</p>
</div>

<div style=‘position: absolute; width: 435px; height: 38px; z-index: 1; left: 45px; top: 520px‘ align="left">
<P class=‘title1‘ style="font-size:20px; color:fc0000">温馨提示:预约日期必须大于当前日期</p>
</div>

<div id=‘layer‘ style=‘visibility:;position: absolute; width: 135; height:61px; z-index: 1; left: 481px; top: 515px‘>
<a onMouseDown="Out_Branch(2)" class="bt">
<img src="../../images/Button/SubBack.gif" onMouseDown="this.src=‘../../images/Button/SubBack_down.gif‘" onMouseup="this.src=‘../../images/Button/SubBack.gif‘" onMouseout ="this.src=‘../../images/Button/SubBack.gif‘";this.style.cursor=‘hand‘></a></div>

<div id=‘layer‘ style=‘visibility:;position: absolute; width: 135; height:60; z-index: 1; left: 651px; top: 515px‘>
<a onMouseDown="Out_Branch(1)" class="bt">
<img src="../../images/Button/EndService.gif" onMouseDown="this.src=‘../../images/Button/EndService_down.gif‘" onMouseup="this.src=‘../../images/Button/EndService.gif‘" onMouseout ="this.src=‘../../images/Button/EndService.gif‘";this.style.cursor=‘hand‘></a></div>

<table border="0" cellpadding="0" cellspacing="0" width="700" hight="300" style=" position:absolute;top:150; left:25;">
<tr><td id=cc>
</td></tr></table>
</body>
<script language="JavaScript">

function RunNian(The_Year)
{
if(The_Year%100==0)
{
if(The_Year%400==0)
return true;
else
return false;
}
else
{
if(The_Year%4==0)
return true;
else
return false;
}
}

function GetWeekday(The_Year,The_Month)
{
var Allday = 0;
//alert("The_Year="+The_Year);
if (The_Year>2000)
{
for (i=2000 ;i<The_Year; i++)
if (RunNian(i))
Allday += 366;
else
Allday += 365;

for (i=1; i<The_Month; i++)
{
switch (i)
{
case 1 : Allday += 31; break;
case 2 :
if (RunNian(The_Year))
Allday += 29;
else
Allday += 28;
break;
case 3 : Allday += 31; break;
case 4 : Allday += 30; break;
case 5 : Allday += 31; break;
case 6 : Allday += 30; break;
case 7 : Allday += 31; break;
case 8 : Allday += 31; break;
case 9 : Allday += 30; break;
case 10 : Allday += 31; break;
case 11 : Allday += 30; break;
case 12 : Allday += 31; break;
}
}
}
//alert("Allday="+Allday);
return (Allday+6)%7;
}

function chooseday(The_Year,The_Month,The_Day)
{
var Firstday;
var completely_date;
var The_MonthR,The_DayR;
//completely_date = The_Year + "-" + The_Month + "-" + The_Day;
//else
//completely_date = "No Choose";
//showdate 只是一个为了显示而采用的东西，
//如果外部想引用这里的时间，可以通过使用 completely_date引用完整日期
//也可以通过The_Year,The_Month,The_Day分别引用年，月，日
//当进行月份和年份的选择时，认为没有选择完整的日期
Firstday = GetWeekday(The_Year,The_Month);
//alert("Firstday="+Firstday);
ShowCalender(The_Year,The_Month,The_Day,Firstday);
}

function GetThisDate(The_Year,The_Month,The_Day)
{

var The_MonthR,The_DayR;

if(Number(The_Month)<10)
The_MonthR = "0" + The_Month;
else
The_MonthR = The_Month;

if(Number(The_Day) < 10)
The_DayR = "0" + The_Day;
else
The_DayR = The_Day;

parent.varpool.RegDate = The_Year+""+The_MonthR+The_DayR;
Out_Branch(0);
//parent.funpool.button_Branch(0);
// alert(The_Year+""+The_MonthR+The_DayR);
}

function nextmonth(The_Year,The_Month)
{
if (The_Month==12)
chooseday(The_Year+1,1,1);
else
chooseday(The_Year,The_Month+1,1);
}

function prevmonth(The_Year,The_Month)
{
if (The_Month==1)
chooseday(The_Year-1,12,1);
else
chooseday(The_Year,The_Month-1,1);
}

function prevyear(The_Year,The_Month)
{
chooseday(The_Year-1,The_Month,1);
}

function nextyear(The_Year,The_Month)
{
chooseday(The_Year+1,The_Month,1);
}

function ShowCalender(The_Year,The_Month,The_Day,Firstday)
{
var showstr;
var Month_Day;
var ShowMonth;
var today;
var Tcolor;
today = new Date();

switch (The_Month)
{
case 1 : ShowMonth = "1月"; Month_Day = 31; break;
case 2 :
ShowMonth = "2月";
if (RunNian(The_Year))
Month_Day = 29;
else
Month_Day = 28;
break;
case 3 : ShowMonth = "3月"; Month_Day = 31; break;
case 4 : ShowMonth = "4月"; Month_Day = 30; break;
case 5 : ShowMonth = "5月"; Month_Day = 31; break;
case 6 : ShowMonth = "6月"; Month_Day = 30; break;
case 7 : ShowMonth = "7月"; Month_Day = 31; break;
case 8 : ShowMonth = "8月"; Month_Day = 31; break;
case 9 : ShowMonth = "9月"; Month_Day = 30; break;
case 10 : ShowMonth = "10月"; Month_Day = 31; break;
case 11 : ShowMonth = "11月"; Month_Day = 30; break;
case 12 : ShowMonth = "12月"; Month_Day = 31; break;

}

showstr = "";
showstr = "<Table cellpadding=0 cellspacing=0 border=1 bordercolor=#acbad5 width=95% align=center valign=top>";
showstr += "<tr><td width=0 style=′cursor:hand′ onclick=prevyear("+The_Year+"," + The_Month + ")><<</td><td width=0> " + The_Year + " </td><td width=0 onclick=nextyear("+The_Year+","+The_Month+") style=′cursor:hand′>>></td><td width=0 style=′cursor:hand′ onclick=prevmonth("+The_Year+","+The_Month+")><<</td><td width=100 align=center>" + ShowMonth + "</td><td width=0 onclick=nextmonth("+The_Year+","+The_Month+") style=′cursor:hand′>>></td></tr>";
showstr += "<tr><td align=center width=100% colspan=6>";
showstr += "<table cellpadding=2 cellspacing=2 border=2 bordercolor=#fffcff width=100%>";
showstr += "<Tr align=center bgcolor=#95b8f8> ";
showstr += "<td><strong><font color=#daedff>日</font></strong></td>";
showstr += "<td><strong><font color=#daedff>一</font></strong></td>";
showstr += "<td><strong><font color=#daedff>二</font></strong></td>";
showstr += "<td><strong><font color=#daedff>三</font></strong></td>";
showstr += "<td><strong><font color=#daedff>四</font></strong></td>";
showstr += "<td><strong><font color=#daedff>五</font></strong></td>";
showstr += "<td><strong><font color=#daedff>六</font></strong></td>";
showstr += "</Tr><tr>";

//alert("Firstday="+Firstday);
for (var i=1; i<=Firstday; i++)
showstr += "<Td align=center bgcolor=#CCCCCC> </Td>";

for (var i=1; i<=Month_Day; i++)
{
//日期控制------------------------------------------
if(Number(The_Month) < 10)
var The_Month1 = "0" + The_Month;
else
var The_Month1 = The_Month;

if(i<10)
var Month_Day1 = "0" + i;
else
Month_Day1 = i;

var test1 = The_Year +"-"+The_Month1+"-"+Month_Day1;
var thisDate = today.getFullYear() + "-" + (today.getMonth()+1) +"-"+ today.getDate();

var sDate=thisDate;
var eDate=test1;
var sArr = sDate.split("-");
var eArr = eDate.split("-");
var sRDate = new Date(sArr[0], sArr[1], sArr[2]);
var eRDate = new Date(eArr[0], eArr[1], eArr[2]);
var result = (eRDate-sRDate)/(24*60*60*1000);

if(result>=1&&result<37)
{
bgColor = "#fc0000";
Tcolor = "#000000";
showstr += "<td align=center style=‘color:"+Tcolor+"‘ bgcolor=" + bgColor + " style=′cursor:hand′ onclick=GetThisDate(" + The_Year + "," + The_Month + "," + i + ")>" + i + "</td>";
}
//日期控制-------------------------------------------
else
{
bgColor = "#fbfaf8";
Tcolor = "#d8dde3";
//xx mv
//showstr += "<td align=center style=‘color:"+Tcolor+"‘ bgcolor=" + bgColor + " style=′cursor:hand′ onclick=GetThisDate(" + The_Year + "," + The_Month + "," + i + ")>" + i + "</td>";
showstr += "<td align=center style=‘color:"+Tcolor+"‘ bgcolor=" + bgColor + " style=′cursor:hand′ onclick=chooseday(" + The_Year + "," + The_Month + "," + i + ")>" + i + "</td>";
}

Firstday = (Firstday+1)%7;

if ((Firstday==0) && (i!=Month_Day))
showstr += "</tr><tr>";
}

if (Firstday!=0)
{
for (i=Firstday; i<7; i++)
showstr += "<td align=center bgcolor=#CCCCCC> </td>";
showstr += "</tr>";
}

showstr += "</tr></table></td></tr></table>";
cc.innerHTML = showstr;

}

</script>

<script language="JavaScript">

var The_Year,The_Day,The_Month;
var today;
var Firstday;
today = new Date();
The_Year = today.getFullYear();
//alert("The_Year="+The_Year);
The_Month = today.getMonth() + 1;
The_Day = today.getDate();
Firstday = GetWeekday(The_Year,The_Month);
ShowCalender(The_Year,The_Month,The_Day,Firstday);
</script>
</html>

时间： 2024-10-11 22:36:41

javascript写日历代码的相关文章

javascript动手写日历组件(2)——优化UI和添加交互(by vczero)

一.优化UI 继上一篇,http://www.cnblogs.com/vczero/p/js_ui_1.html.开始优化UI,主要优化的部分有: (1)增加星期行.(2)字体设置.(3)日期垂直居中.(4)将单元格->底部线条.(5)修改文本的颜色对比.(6)将内部调用的函数加前缀_,如_addHeader()._addWeekday(). 修改的后基本效果如下图: 整个代码做了小修小改: 1 var Calendar = function(div){ 2 this.div = documen

javascript动手写日历组件(1)——构建日历逻辑 (by vczero)

一.分析日历的组成部分和交互要素 (1)组成部分:选择年月部分.星期显示.包含本月(或者有前月和下一个月部分日子) (2)根据选择的年和月份,动态绘制日历面板. (3)一个日历 7(天) * 5(周) = 35格表格. (4)一个月份是统一的一个面板:一个月的头一天一定在日历面板的第一行,根据该天的“星期几”确定位置. (5)第一格子是星期一,最后一个格子是星期日,为5周的日历面板. 二.确定逻辑设计 日历上面的日历,8月1号建军节为什么会出现在这一格?因为一个月的天数是小于5周(35天)的,因

javascript动手写日历组件(3)——内存和性能优化（by vczero）

一.列表 javascript动手写日历组件的文章列表,主要是通过原生的JavaScript写的一个简约的日历组件: (1)javascript动手写日历组件(1)——构建日历逻辑:http://www.cnblogs.com/vczero/p/js_ui_1.html (2)javascript动手写日历组件(2)——优化UI和添加交互:http://www.cnblogs.com/vczero/p/js_ui_2.html (3)javascript动手写日历组件(2)——内存和性能优化:h

60行代码：Javascript 写的俄罗斯方块游戏

先看效果图: 游戏结束图: javascript实现源码: <!doctype html> <html><head><title>俄罗斯方块</title> <meta name="Description" content="俄罗斯方块Javascript实现"> <meta name="Keywords" content="俄罗斯方块,Javascript,

280行代码：Javascript 写的2048游戏

2048 原作者就是用Js写的,一直想尝试,但久久未动手. 昨天教学生学习JS代码.不妨就做个有趣的游戏好了.2048这么火,是一个不错的选择. 思路: 1. 数组 ,2维数组4x4 2. 移动算法,移动后有数字的对齐,无数字(我用的0,但不显示)补齐. 移动前 移动后(注意程序合并了第一行2个2,并产生了新的2) 移动算法分2步: 第一步骤:移动 第二步骤:合并 移动代码参考: [html] view plaincopy function left(t,i) { var j; var len 

javascript写的新闻滚动代码

在企业站中,我们会看到很多新闻列表很平滑的滚动,但是这种功能自己写太浪费时间,下面是我整理好的一组很常用的新闻列表滚动,有上下分页哦! 1.body里面 1 <div class="tz_tagcgnewcontent"> 2 <div id="feature-slide-block"> 3 <div class="tz_newlist"> 4 <div class="tz_newimg&quo

【分享】60行代码：Javascript 写的俄罗斯方块游戏

效果如下,可测试: javascript实现源码: <!doctype html> <html><head><title>俄罗斯方块</title> <meta name="Description" content="俄罗斯方块Javascript实现"> <meta name="Keywords" content="俄罗斯方块,Javascript,实现,短

JavaScript写一个连连看的游戏

天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果图: 写连连看之前要先考虑哪些呢? 1:如何判断两个元素可以连接呢, 刚刚开始的时候我也纳闷, 可以参考这里:打开: 2:模板引擎怎么选择呢, 我用了底线库的template,因为语法简单. 本来想用Handlebars,但是这个有点大啊, 而且底线库也提供很多常用工具方法( •? ω •? )y:

用javascript写计算器

本人新手,如果有什么不足的地方,希望可以得到指点 今天尝试用javascript写一个计算器 首先把计算器的按钮做出来,用button做好了,这样可以不用设置太多的样式 <button value="7" >7</button> 按照上面把0-9数字的按钮都搞出来 当然还有+-*/=%这些按钮 顺便给每个按钮添加样式 如下: <style> .short{height:63px;width:55px;float:left;} </style&g