`
- 浏览:
58190 次
- 性别:
- 来自:
北京
-
<HTML>
<HEAD>
<TITLE>日历</TITLE>
<STYLETYPE="text/css">
.normal...{BACKGROUND:#ffffff}
.today...{font-weight:bold;BACKGROUND:#6699cc}
.satday...{color:green}
.sunday...{color:red}
.days...{font-weight:bold}
</STYLE>
<SCRIPTLANGUAGE="JavaScript">
//中文月份,如果想显示英文月份，修改下面的注释
/**//*varmonths=newArray("January?,"February?,"March",
"April","May","June","July","August","September",
"October","November","December");*/
varmonths=newArray("一月","二月","三月",
"四月","五月","六月","七月","八月","九月",
"十月","十一月","十二月");
vardaysInMonth=newArray(31,28,31,30,31,30,31,31,
30,31,30,31);
//中文周如果想显示英文的，修改下面的注释
/**//*vardays=newArray("Sunday","Monday","Tuesday",
"Wednesday","Thursday","Friday","Saturday");*/
vardays=newArray("日","一","二","三",
"四","五","六");
functiongetDays(month,year)...{
//下面的这段代码是判断当前是否是闰年的
if(1==month)
return((0==year%4)&&(0!=(year%100)))||
(0==year%400)?29:28;
else
returndaysInMonth[month];
}
functiongetToday()...{
//得到今天的年,月,日
this.now=newDate();
this.year=this.now.getFullYear();
this.month=this.now.getMonth();
this.day=this.now.getDate();
}
today=newgetToday();
functionnewCalendar()...{
today=newgetToday();
varparseYear=parseInt(document.all.year
[document.all.year.selectedIndex].text);
varnewCal=newDate(parseYear,
document.all.month.selectedIndex,1);
varday=-1;
varstartDay=newCal.getDay();
vardaily=0;
if((today.year==newCal.getFullYear())&&(today.month==newCal.getMonth()))
day=today.day;
vartableCal=document.all.calendar.tBodies.dayList;
varintDaysInMonth=getDays(newCal.getMonth(),newCal.getFullYear());
for(varintWeek=0;intWeek<tableCal.rows.length;intWeek++)
for(varintDay=0;intDay<tableCal.rows[intWeek].cells.length;intDay++)
...{
varcell=tableCal.rows[intWeek].cells[intDay];
if((intDay==startDay)&&(0==daily))
daily=1;
if(day==daily)
//今天，调用今天的Class
cell.className="today";
elseif(intDay==6)
//周六
cell.className="sunday";
elseif(intDay==0)
//周日
cell.className="satday";
else
//平常
cell.className="normal";
if((daily>0)&&(daily<=intDaysInMonth))
...{
cell.innerText=daily;
daily++;
}
else
cell.innerText="";
}
}
functiongetDate()...{
varsDate;
//这段代码处理鼠标点击的情况
if("TD"==event.srcElement.tagName)
if(""!=event.srcElement.innerText)
...{
sDate=document.all.year.value+"年"+document.all.month.value+"月"+event.srcElement.innerText+"日";
alert(sDate);
}
}
</SCRIPT>
</HEAD>
<BODYONLOAD="newCalendar()"OnUnload="window.returnValue=document.all.ret.value;">
<inputtype="hidden"name="ret">
<TABLEID="calendar"cellspacing="0"cellpadding="0">
<THEAD>
<TR>
<TDCOLSPAN=7ALIGN=CENTER>
<SELECTID="month"ONCHANGE="newCalendar()">
<SCRIPTLANGUAGE="JavaScript">
for(varintLoop=0;intLoop<months.length;
intLoop++)
document.write("<OPTIONVALUE="+(intLoop+1)+""+
(today.month==intLoop?
"Selected":"")+">"+
months[intLoop]);
</SCRIPT>
</SELECT>
<SELECTID="year"ONCHANGE="newCalendar()">
<SCRIPTLANGUAGE="JavaScript">
for(varintLoop=today.year-50;intLoop<(today.year+4);
intLoop++)
document.write("<OPTIONVALUE="+intLoop+""+
(today.year==intLoop?
"Selected":"")+">"+
intLoop);
</SCRIPT>
</SELECT>
</TD>
</TR>
<TRCLASS="days">
<SCRIPTLANGUAGE="JavaScript">
document.write("<TDclass=satday>"+days[0]+"</TD>");
for(varintLoop=1;intLoop<days.length-1;
intLoop++)
document.write("<TD>"+days[intLoop]+"</TD>");
document.write("<TDclass=sunday>"+days[intLoop]+"</TD>");
</SCRIPT>
</TR>
</THEAD>
<TBODYborder=1cellspacing="0"cellpadding="0"ID="dayList"ALIGN=CENTERONCLICK="getDate()">
<SCRIPTLANGUAGE="JavaScript">
for(varintWeeks=0;intWeeks<6;intWeeks++)...{
document.write("<TRstyle='cursor:hand'>");
for(varintDays=0;intDays<days.length;
intDays++)
document.write("<TD></TD>");
document.write("</TR>");
}
</SCRIPT>
</TBODY>
</TABLE>
分享到：
相关推荐
在JavaScript（JS）中，创建一个日历功能是常见的需求，尤其在开发Web应用程序时，用于日期选择或事件管理。本篇文章将详细讲解如何利用JavaScript实现一个基础的日历功能，并探讨相关的编程概念和技术。 首先，...
极品日历，完美的节日收录，功能庞大，网页开发加入优美
9. **API调用**：My97 DatePicker 提供了一系列的JavaScript API，如`getSelectedDates()` 获取选中的日期，`setDate(date)` 设置当前日期等，便于在代码中动态控制日历控件。 10. **兼容性**：考虑到跨浏览器的...
其次，`PopupCalendar.js`是这个日历组件的核心，它是用JavaScript编写的源代码。在这个文件中，开发者可能定义了函数来处理日期计算、用户交互、以及日历的显示与隐藏等逻辑。JavaScript的事件监听器（如`...
`index.htm`是HTML文件，它是网页的基础结构，通常会包含一个`<script>`标签来引入`RiLi.js`，使得JavaScript代码能够与HTML页面结合。HTML文件中可能有一个空的日历容器，例如一个`<div>`元素，JavaScript会将日历...
接下来，我们需要编写JS代码来动态生成日历，并处理鼠标悬停事件。这里我们使用`calendar.js` 文件来实现这个功能。 1. 获取当前月份和年份，并创建日历表格。 ```javascript // 获取当前日期 var today = new ...
2. **编写JavaScript代码**：为容器元素添加事件监听器，例如点击按钮显示日历。然后，编写函数来生成日历的HTML结构，包括头部（月份和年份）、星期标题行以及日期单元格。 3. **计算日期**：根据当前日期生成日历...
"百度日历JS版本"是一个基于JavaScript实现的日历控件，它旨在为用户提供与百度官方日历相似的视觉体验和功能。在这个项目中，我们可以看到四个主要组成部分：`css`、`image`、`index.html`和`js`，这些文件共同构建...
JavaScript代码负责在用户界面中创建交互式的日历，让用户能够方便地选择日期。 JavaScript日历控件通常包含以下几个关键部分： 1. **DOM操作**：创建HTML元素，如`<div>`、`<table>`等，构建日历的结构。使用DOM ...
接着，JavaScript代码将用于处理日历逻辑和签到状态的管理。你可以使用JavaScript的Date对象来获取当前日期，并据此动态生成日历。同时，需要一个数据结构（如数组或对象）来存储用户的签到记录，确保每天只能签到一...
在这个文件中，你可以找到如何引入和调用JavaScript日历代码的示例，以及如何将日历与HTML元素（如输入框）关联起来的方法。 2. **gb2312版**：这是一个使用GBK编码的日历实现版本，可能适合一些老的或特定的中国...
本文将深入探讨几款优秀的js日历代码，它们不仅功能强大，而且界面美观，能为你的网页增添专业且友好的用户体验。 1. **jQuery UI Datepicker** jQuery UI库中的Datepicker是一款经典且高度可定制的日历插件。它...
HTML日历源代码是网页开发中的一个重要组成部分，它主要用于在网站上展示日期和时间信息，或者作为用户输入日期的交互式界面。HTML日历通常结合CSS（层叠样式表）和JavaScript来实现其视觉效果和动态功能。在这个...
此程序是javascript和php开发，提供酒店、门票订购... 此程序中js是驴妈妈上的,我做了些修改，做学习用，精简了代码和功能，只提供酒店和门票，部分提交url请自己修改。php生成日历的类是自己原创的。不足之处请反馈。
总结来说，这个“实用可拖动的日历js+css代码”是一个结合了JavaScript动态功能和CSS美化效果的日期选择工具，它提升了用户在网页上的日期操作体验，同时也展示了前端开发中JavaScript和CSS的巧妙运用。如果你正在...
在提供的文件名中，"calendar.html"可能是包含日历控件的HTML页面，而"iptext.js"很可能是用来实现日历功能的JavaScript脚本。通过分析这两个文件，我们可以深入了解这个日历控件的具体实现细节，包括具体的DOM操作...
本资源“百度JS日历农历代码.zip”包含了一个实现特定功能的JS代码，即在网页上创建一个交互式日历，能够展示公历和农历日期信息。当鼠标悬停在日期上时，会弹出详细的农历详情，为用户提供了便捷的日历查询服务。 ...
在提供的文件`rili2.htm`中，应该包含了实现这个日历功能的HTML和JavaScript代码。而`rili2_files`可能包含额外的CSS文件或其他资源，用于样式定义和增强用户体验。通过查看这些文件，我们可以更详细地了解代码实现...
index.htm可能是包含控件实例的HTML页面，而calendar.js则是实现日历功能的JavaScript代码。通过分析这些代码，我们可以学习到如何使用DOM操作创建和更新日历视图，如何处理用户交互事件，以及如何组织和封装...
在压缩包中的“www.pudn.com.txt”可能是提供下载信息或相关说明的文本文件，而“JS 日曆”很可能是实际的日历JavaScript代码文件。通过查看这个文件，我们可以深入了解日历组件的具体实现细节，例如函数定义、事件...