html编写的日历
1、html
(1)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>日历</title>
</head> <body> <style>
<!--
.tablinks a, .tablinks a:visited{
color:blue
} .tablinks a:hover{
color:brown
}
-->
</style>
<script language="JavaScript">
var ns6=document.getElementById&&!document.all
var ie4=document.all var Selected_Month;
var Selected_Year;
var Current_Date = new Date();
var Current_Month = Current_Date.getMonth(); var Days_in_Month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var Month_Label = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'); var Current_Year = Current_Date.getYear();
if (Current_Year < 1000)
Current_Year+=1900 var Today = Current_Date.getDate(); function Header(Year, Month) { if (Month == 1) {
Days_in_Month[1] = ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 !=0))) ? 29 : 28;
}
var Header_String = Month_Label[Month] + ' ' + Year;
return Header_String;
} function Make_Calendar(Year, Month) {
var First_Date = new Date(Year, Month, 1);
var Heading = Header(Year, Month);
var First_Day = First_Date.getDay() + 1;
if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) ||
((Days_in_Month[Month] == 30) && (First_Day == 7))) {
var Rows = 6;
}
else if ((Days_in_Month[Month] == 28) && (First_Day == 1)) {
var Rows = 4;
}
else {
var Rows = 5;
} var HTML_String = '<table><tr><td valign="top"><table BORDER=4 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="C0C0C0" BORDERCOLORLIGHT="808080">'; HTML_String += '<tr><th colspan=7 BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Heading + '</font></th></tr>'; HTML_String += '<tr><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sun</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Mon</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Tue</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Wed</th>'; HTML_String += '<th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Thu</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Fri</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sat</th></tr>'; var Day_Counter = 1;
var Loop_Counter = 1;
for (var j = 1; j <= Rows; j++) {
HTML_String += '<tr ALIGN="left" VALIGN="top">';
for (var i = 1; i < 8; i++) {
if ((Loop_Counter >= First_Day) && (Day_Counter <= Days_in_Month[Month])) {
if ((Day_Counter == Today) && (Year == Current_Year) && (Month == Current_Month)) {
HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000"><strong><font color="red">' + Day_Counter + '</font></strong></td>';
}
else {
HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Day_Counter + '</td>';
}
Day_Counter++;
}
else {
HTML_String += '<td BORDERCOLOR="C0C0C0"> </td>';
}
Loop_Counter++;
}
HTML_String += '</tr>';
}
HTML_String += '</table></td></tr></table>';
cross_el=ns6? document.getElementById("Calendar") : document.all.Calendar
cross_el.innerHTML = HTML_String;
} function Check_Nums() {
if ((event.keyCode < 48) || (event.keyCode > 57)) {
return false;
}
} function On_Year() {
var Year = document.when.year.value;
if (Year.length == 4) {
Selected_Month = document.when.month.selectedIndex;
Selected_Year = Year;
Make_Calendar(Selected_Year, Selected_Month);
}
} function On_Month() {
var Year = document.when.year.value;
if (Year.length == 4) {
Selected_Month = document.when.month.selectedIndex;
Selected_Year = Year;
Make_Calendar(Selected_Year, Selected_Month);
}
else {
alert('Please enter a valid year.');
document.when.year.focus();
}
} function Defaults() {
if (!ie4&&!ns6)
return
var Mid_Screen = Math.round(document.body.clientWidth / 2);
document.when.month.selectedIndex = Current_Month;
document.when.year.value = Current_Year;
Selected_Month = Current_Month;
Selected_Year = Current_Year;
Make_Calendar(Current_Year, Current_Month);
} function Skip(Direction) {
if (Direction == '+') {
if (Selected_Month == 11) {
Selected_Month = 0;
Selected_Year++;
}
else {
Selected_Month++;
}
}
else {
if (Selected_Month == 0) {
Selected_Month = 11;
Selected_Year--;
}
else {
Selected_Month--;
}
}
Make_Calendar(Selected_Year, Selected_Month);
document.when.month.selectedIndex = Selected_Month;
document.when.year.value = Selected_Year;
} </script>
<body onLoad="Defaults()"> <p><div id=NavBar style="position:relative;width:286px;top:5px;" align="left">
<form name="when"><table>
<tr>
<td><input type="button" value="<-- Last" onClick="Skip('-')"></td>
<td> </td>
<td><select name="month" onChange="On_Month()">
<script language="JavaScript1.2">
if (ie4||ns6){
for (j=0;j<Month_Label.length;j++) {
document.writeln('<option value=' + j + '>' + Month_Label[j]);
}
}
</script>
</select>
</td>
<td><input type="text" name="year" size=4 maxlength=4 onKeyPress="return Check_Nums()" onKeyUp="On_Year()"></td>
<td> </td>
<td><input type="button" value="Next -->" onClick="Skip('+')"></td>
</tr></table></form></div>
<div id=Calendar style="position:relative;width:238px;top:-2px;" align="left"></div>
</body> </html>
(2)
<html>
<body>
<OBJECT id=Calendar1 style="LEFT: 0px; TOP: 0px" classid="clsid:8E27C92B-1264-101C-8A2F-040224009C02" VIEWASTEXT>
<PARAM NAME="_Version" VALUE="524288">
<PARAM NAME="_ExtentX" VALUE="7620">
<PARAM NAME="_ExtentY" VALUE="5080">
<PARAM NAME="_StockProps" VALUE="1">
<PARAM NAME="BackColor" VALUE="-2147483639">
<PARAM NAME="Year" VALUE="<%=year(now())%>">
<PARAM NAME="Month" VALUE="<%=month(now())%>">
<PARAM NAME="Day" VALUE="<%=day(now())%>">
<PARAM NAME="DayLength" VALUE="0">
<PARAM NAME="MonthLength" VALUE="0">
<PARAM NAME="DayFontColor" VALUE="8421504">
<PARAM NAME="FirstDay" VALUE="1">
<PARAM NAME="GridCellEffect" VALUE="1">
<PARAM NAME="GridFontColor" VALUE="0">
<PARAM NAME="GridLinesColor" VALUE="-2147483638">
<PARAM NAME="ShowDateSelectors" VALUE="-1">
<PARAM NAME="ShowDays" VALUE="-1">
<PARAM NAME="ShowHorizontalGrid" VALUE="-1">
<PARAM NAME="ShowTitle" VALUE="-1">
<PARAM NAME="ShowVerticalGrid" VALUE="-1">
<PARAM NAME="TitleFontColor" VALUE="255">
<PARAM NAME="ValueIsNull" VALUE="0"></OBJECT>
</body>
</html>
(3)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>日历</title>
</head> <body> <body onLoad="setCurrentMonth()"> <script language="JavaScript">
var ie=document.all
var ns6=document.getElementById&&!document.all
var n=document.layers if (ie||ns6) {fShow="visible";fHide="hidden";}
if (n) {fShow="show"; fHide="hide";} var MonthNames = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月");
var nCurrentYear = 0;
var nCurrentMonth = 0; var nWidth = 30;
var nHeight = 20; var leftX;
var rightX
var topY;
var bottomY; function Calendar()
{ var HTMLstr = ""; HTMLstr += "<table width='250px' cellspacing='0' cellpadding='0' border='1'>\n";
HTMLstr += "<tr><td bgcolor='darkblue'>\n";
HTMLstr += "\n";
HTMLstr += "<table border='0' cols='3' width='100%'>\n";
HTMLstr += "<tr>\n";
HTMLstr += "<td><b><font color='white'>年份:</font></b></td>\n";
HTMLstr += "\n";
if (n)
{
HTMLstr += "<td align='right' width='40'>\n";
HTMLstr += "<a href=\"javascript:prevYear();\"><font color='white' size=-2>Prev</font></a>\n";
HTMLstr += "<a href=\"javascript:nextYear();\"><font color='white' size=-2>Next</font></a>\n";
}
if (ie||ns6)
{
HTMLstr += "<td align='right' width='80'>\n";
HTMLstr += "<a href=\"javascript:prevYear();\" style='text-decoration: none;'><font color='white' size=-2>Prev</font></a>\n";
HTMLstr += "<a href=\"javascript:nextYear();\" style='text-decoration: none;'><font color='white' size=-2>Next</font></a>\n";
}
HTMLstr += "</td>\n";
HTMLstr += "\n";
HTMLstr += "<td align='left'>"; if (n) HTMLstr += "<ilayer id='main'><layer id='idYear' top='0' left='0'>\n";
if (ie||ns6)HTMLstr += "<div id='main' style='position: relative'>\n";
HTMLstr += "<font color='#99ffff'><b>1999</b></font>\n";
if (n) HTMLstr += "</layer></ilayer>\n";
if (ie||ns6)HTMLstr += "</div>\n";
HTMLstr += "</td>\n";
HTMLstr += "</tr>\n";
HTMLstr += "<tr>\n";
HTMLstr += "<td><b><font color='white'>月份:</font></b></td>\n";
HTMLstr += "\n";
HTMLstr += "<td align='right'>\n";
if (n)
{
HTMLstr += "<a href=\"javascript:prevMonth();\"><font color='white' size=-2>Prev</font></a>\n";
HTMLstr += "<a href=\"javascript:nextMonth();\"><font color='white' size=-2>Next</font></a>\n";
}
if (ie||ns6)
{
HTMLstr += "<a href=\"javascript:prevMonth();\" style='text-decoration: none;'><font color='white' size=-2>Prev</font></a>\n";
HTMLstr += "<a href=\"javascript:nextMonth();\" style='text-decoration: none;'><font color='white' size=-2>Next</font></a>\n";
}
HTMLstr += "</td>\n";
HTMLstr += "\n";
HTMLstr += "<td align='left'>\n";
if (ie||ns6)HTMLstr += "<div id='main2' style='position=relative;'>";
if (n) HTMLstr += "<ilayer id='main2'><layer id='idMonth' top='0' left='0'>\n";
HTMLstr += "<font color='#99ffff'><b>December</b></font>\n";
if (ie||ns6)HTMLstr += "<div>\n";
if (n) HTMLstr += "</layer></ilayer>\n";
HTMLstr += "</td>\n";
HTMLstr += "\n";
HTMLstr += "</tr>\n";
HTMLstr += "</table>\n";
HTMLstr += "\n";
HTMLstr += "</td></tr>\n";
HTMLstr += "\n";
HTMLstr += "<tr height='160px'><td valign=\"top\">\n";
HTMLstr += "\n";
HTMLstr += "<table border=0 cols=7>\n";
HTMLstr += "<tr>\n";
HTMLstr += "<td width='30'><b>Mon</b></td>\n";
HTMLstr += "<td width='30'><b>Tue</b></td>\n";
HTMLstr += "<td width='30'><b>Wed</b></td>\n";
HTMLstr += "<td width='30'><b>Thur</b></td>\n";
HTMLstr += "<td width='30'><b>Fri</b></td>\n";
HTMLstr += "<td width='30'><b>Sat</b></td>\n";
HTMLstr += "<td width='30'><b>Sun</b></td>\n";
HTMLstr += "</tr>\n";
HTMLstr += "<tr>\n";
HTMLstr += "<td colspan=7>\n";
if (ie||ns6)HTMLstr += "<div style='position: relative;'>";
if (n) HTMLstr += "<ilayer id='idMenuContainer' height='120px' width='250px'>\n"; for (var date=1; date <= 31; date++)
{
if (n)
{
HTMLstr += " <layer id=\"idDate"+date+"\" val="+date+" visibility=\"hide\">\n";
HTMLstr += " <layer><b>"+date+"</b></layer>\n";
HTMLstr += " </layer>\n";
}
if (ie||ns6)
{
HTMLstr += " <div id=\"idDate"+date+"\" val="+date+" style=\"position: absolute; visibility: hidden\">\n";
// HTMLstr += " <b>"+date+"</b>\n";
HTMLstr += " <b>"+date+"</b>\n";
HTMLstr += " </div>\n";
}
} if (ie||ns6)HTMLstr += "</div>";
if (n) HTMLstr += "</ilayer>\n";
HTMLstr += "</td></tr>\n";
HTMLstr += "</table>\n";
HTMLstr += "\n";
HTMLstr += "</td></tr>\n";
HTMLstr += "</table>\n"; document.writeln(HTMLstr);
buildMonthMenu(HTMLstr);
} function setCurrentMonth()
{
date = new Date();
currentyear=date.getYear()
if (currentyear < 1000)
currentyear+=1900
setYearMonth(currentyear, date.getMonth()+1);
} function setMonth(nMonth)
{
setYearMonth(nCurrentYear, nMonth);
} function setYearMonth(nYear, nMonth)
{
if (ie||ns6)
{
nCurrentYear = nYear;
nCurrentMonth = nMonth;
var cross_obj=ns6? document.getElementById("main"): document.all["main"]
var cross_obj2=ns6? document.getElementById("main2"): document.all["main2"]
cross_obj.innerHTML = "<font color=\"#99ffff\"><b>"+nCurrentYear+"</b></font>";
cross_obj2.innerHTML = "<a href=\"javascript:showMonthMenu()\" style=\"text-decoration:none\"><font color=\"#99ffff\"><b>"+MonthNames[nCurrentMonth-1]+"</b></font></a>\n"; var date = new Date(nCurrentYear, nCurrentMonth-1, 1);
var nWeek = 1;
var nDate; while (date.getMonth() == nCurrentMonth-1)
{
nDate = date.getDate();
nLastDate = nDate; var posDay = date.getDay()-1;
if (posDay == -1) posDay=6;
var posLeft = posDay*(nWidth+5)+5;
var posTop = (nWeek-1)*nHeight;
var cross_obj3=ns6? document.getElementById("idDate"+nDate).style : document.all["idDate"+nDate].style
cross_obj3.left = posLeft;
cross_obj3.top = posTop;
if (date.getDay() == 0 || date.getDay() == 6)
cross_obj3.color = "red";
else
cross_obj3.color = "black";
cross_obj3.visibility = "visible";
// original:
// date = new Date(currentyear, date.getMonth(), date.getDate()+1);
// johan:
date = new Date(nCurrentYear, date.getMonth(), date.getDate()+1); if (posDay == 6) nWeek++;
}
for (++nDate; nDate <= 31; nDate++){
cross_obj3=ns6? document.getElementById("idDate"+nDate).style : document.all["idDate"+nDate].style
cross_obj3.visibility = "hidden";
}
}
if (n)
{
// Verify parameters
if (nMonth < 1 || nMonth > 12) {alert("Function: setYearMonth()\nERROR: Incorrect month "+nMomth);} nCurrentYear = nYear;
nCurrentMonth = nMonth; document.main.document.idYear.document.open();
document.main.document.idYear.document.write("<font color=\"#99ffff\"><b>"+nCurrentYear+"</b></font>");
document.main.document.idYear.document.close(); document.main2.document.idMonth.document.open();
document.main2.document.idMonth.document.write("<a href=\"javascript:showMonthMenu()\" style=\"text-decoration:none\"><font color=\"#99ffff\"><b>"+MonthNames[nCurrentMonth-1]+"</b></font></a>");
document.main2.document.idMonth.document.close(); var date = new Date(nYear, nMonth-1, 1);
var nWeek = 1;
var nDate; while (date.getMonth() == nMonth-1)
{
nDate = date.getDate();
nLastDate = nDate; var posDay = date.getDay()-1;
if (posDay == -1) posDay=6;
var posLeft = posDay*(nWidth+5)+5;
var posTop = (nWeek-1)*nHeight; document.layers["idMenuContainer"].document.layers["idDate"+nDate].left = posLeft;
document.layers["idMenuContainer"].document.layers["idDate"+nDate].top = posTop;
if (date.getDay() == 0 || date.getDay() == 6)
document.layers["idMenuContainer"].document.layers["idDate"+nDate].color = "red";
else
document.layers["idMenuContainer"].document.layers["idDate"+nDate].color = "black";
document.layers["idMenuContainer"].document.layers["idDate"+nDate].visibility = "visible";
date = new Date(nCurrentYear, date.getMonth(), date.getDate()+1);
if (posDay == 6) nWeek++;
}
for (++nDate; nDate <= 31; nDate++)
document.layers["idMenuContainer"].document.layers["idDate"+nDate].visibility = "hidden";
}
} function nextMonth()
{
nCurrentMonth++;
if (nCurrentMonth > 12)
{
nCurrentMonth -= 12;
nextYear();
} setYearMonth(nCurrentYear, nCurrentMonth);
} function prevMonth()
{
nCurrentMonth--;
if (nCurrentMonth < 1)
{
nCurrentMonth += 12;
prevYear();
}
setYearMonth(nCurrentYear, nCurrentMonth); } function prevYear()
{
nCurrentYear--;
setYearMonth(nCurrentYear, nCurrentMonth);
} function nextYear()
{
nCurrentYear++;
setYearMonth(nCurrentYear, nCurrentMonth);
} //////////////////////////////////////////////////// function updateIt(e)
{
// var x = e.pageX;
// var y = e.pageY; // if (x > rightX || x < leftX) hideMonthMenu();
// else if (y > bottomY || y < topY) hideMonthMenu();
} function hideMonthMenu()
{
document.layers["idMonthMenu"].visibility="hide";
} function showMonthMenu()
{
if (!n) return;
topY = document.layers["main2"].pageY-50;
bottomY = document.layers["main2"].pageY + document.layers["idMonthMenu"].clip.height+50;
leftX = document.layers["main2"].pageX-50;
rightX = document.layers["main2"].pageX + document.layers["idMonthMenu"].clip.width+50; document.layers["idMonthMenu"].top = document.layers["main2"].pageY+document.layers["main2"].clip.height;
document.layers["idMonthMenu"].left = document.layers["main2"].pageX;
document.layers["idMonthMenu"].visibility="show";
} function buildMonthMenu()
{
if (!n) return;
var HTML = "";
HTML += "<layer id=\"idMonthMenu\" visibility=\"hide\" width=\"120\" bgcolor=\"darkblue\">\n";
HTML += "<table border=\"1\" cellspacing=\"0\" cellpading=\"0\">\n";
for (var month=0; month<12;)
{
HTML += "<tr>\n";
for (var i = 0; i < 3; i++)
{
var nMonth = month+1;
HTML += "<td><a href=\"javascript:hideMonthMenu();setMonth("+nMonth+");\"><font color=\"white\" size=-1><b>"+MonthNames[month]+"</b></font></a></td>\n";
month++;
}
HTML += "</tr>\n";
}
HTML += "</table>";
HTML += "</layer>";
document.writeln(HTML);
}
var cal = new Calendar();
</script>
</body> </html>
html编写的日历的更多相关文章
- c语言编写的日历
输入年份如2013,显示2013年的日历. 思路: 1.查找每个月1号是星期几(这里利用了1990年1月1号是星期一) 计算年份如2013年1月1号到1990年1月1号有Days天,Day%7得到星期 ...
- Java编写的日历,输入年月,输出这个月的日期与星期
import java.util.Scanner; public class rili { public static void main(String[] args) { for (int g = ...
- java编写本月日历
代码如下: import java.time.*; public class Main { public static void main(String arg[]){ LocalDate date ...
- C++编写谷歌日历
#include<iostream> #include<fstream> using namespace std; void main() //程序从这里开始运行 { int ...
- 用JS编写日历的简单思路
提要:本文以写当前时间环境下当月的日历表为例,用最简单的方法实现JavaScript日历,旨在展示JS世界中实用为本.简单为上的解决问题的思路. Web页中的日历一般离不开表格,通常都使用表格装载指定 ...
- 日历组件 原生js
自己基于原生js编写的日历组件 git地址: https://github.com/lihefen/calendar.git demo : https://lihefen.github.io/cale ...
- 自定义javascript日历控件
Web页中的日历一般离不开表格,通常都使用表格装载指定月的日期等信息.所以,要编写JS日历,首先必须解决的问题是表格的行与列问题.列是固定的,七列,因为一周有七天.行需要动态计算,因为,每一个月的第一 ...
- atitit.农历的公式与原理以及农历日期运算
atitit.农历的公式与原理以及农历日期运算 1. 农历的概述1 2. 如何在电脑程序里面计算农历??1 3. 农历的公式2 4. 获取当日农历日历3 5. 历史日期公式加查表才能得到精确日期3 6 ...
- [置顶] iframe使用总结(实战)
说在前面的话,iframe是可以做很多事情的. 例如: a>通过iframe实现跨域; b>使用iframe解决IE6下select遮挡不住的问题 c>通过iframe解决Ajax的 ...
随机推荐
- Flink 编程模型
抽象层次 levels_of_abstraction 最低级的抽象接口是状态化的数据流接口(stateful streaming).这个接口是通过 ProcessFunction 集成到 Data ...
- 专题:OpenSSH tunneling
SSH tunneling 相关 参考資料:http://www.ibm.com/developerworks/cn/linux/l-cn-sshforward/ 本地端口转发: 适用场景:发起端可以 ...
- selenium3与Python3实战 web自动化测试框架✍✍✍
selenium3与Python3实战 web自动化测试框架 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课 ...
- 39-Ubuntu-用户管理-04-usermod设置主组和附加组
主组:通常在新建用户时指定,在/etc/passwd的第4列GID显示主组名. 附加组:在/etc/group中最后一列显示该组的用户列表,用于指定用户的附加权限. 1.修改用户的主组 sudo us ...
- 使用PHP如何去除字符串结尾的字符
前言 在工作中遇到一个需求:一串字符串,如"迅雷官方下载"."快播5.0下载",需要去掉他们结尾的"官方下载"和"下载" ...
- 结对编程UI
GitHub:https://github.com/zsl1996/UI/commits/master 一. 实验内容 这是交付给最终用户的软件,有一定的界面和必要的辅助功能.完 ...
- scip 练习2.18
(define (append a b ) (if (null? a )b (cons (car a) (append (cdr a) b)))) (define (reverse l) (appen ...
- 3.Struts2中Action类的三种写法
一.普通的POJO类(没有继承没有实现)-基本不使用 public class DemoAction1 { public String execute(){ System.out.println(&q ...
- Redis探索之路(七):Redis高级使用特性
一:安全性 设置客户端连接后进行任何其他指定前需要使用的密码. 因为Redis的速度非常之快,一台比较好的服务器下,一个外部的用户可以在1s内进行15万次的密码尝试连接,这就意味着你需要指定非常强大的 ...
- thinkphp url重写
可以通过URL重写隐藏应用的入口文件index.php,下面是相关服务器的配置参考:大理石平台精度等级 [ Apache ] httpd.conf配置文件中加载了mod_rewrite.so模块 Al ...