<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript 日历</title>
<script language="JavaScript">
<!--
function Calendar(name){
document.write('<div id="calendar"></div>');
this.name = name;
this.now = new Date();
this.year = this.now.getFullYear();
this.month = this.now.getMonth();
this.day = this.now.getDate();
this.monthName = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
this.weekName = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
this.daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);
this.element = document.getElementById('calendar');
this.init();
}
Calendar.prototype.init = function() {
var strHtml = '';
strHtml += this.createHead();
strHtml += this.createWeek();
strHtml += this.createDays();
strHtml += this.createFoot();
this.element.innerHTML = strHtml;
}
Calendar.prototype.getDays = function() {
if (1 == this.month) return ((0 == this.year % 4) && (0 != (this.year % 100))) ||(0 == this.year % 400) ? 29 : 28;
else return this.daysInMonth[this.month];
}
Calendar.prototype.createHead = function() {
return '<span class="head">' + this.monthName[this.month] + ' ' + this.year + '</span>';
}
Calendar.prototype.createWeek = function() {
var strResult = '';
for (var i = 0; i < 7; i++) {
if (i == 0 || i == 6) strResult += '<span class="we">';
else strResult += '<span class="ww">';
strResult += this.weekName[i].substr(0,2) + '</span>';
}
return strResult;
}
Calendar.prototype.createDays = function() {
var strResult = '';
var i = 0;
var d = this.getDays();
var n = Math.ceil(d / 7) * 7;
var w = new Date(this.year, this.month, 1).getDay();
for (var j = 0; j < w; j++) { //输出前空格
i += 1;
strResult += '<span> </span>';
}
for (var j = 1; j <= d; j++) { //输出日期格
i += 1;
if (j == this.day) {
strResult += '<span class="today">' + j + '</span>';
} else {
var k = new Date(this.year, this.month, j).getDay();
if (k == 0 || k == 6) {
strResult += '<span class="weekend">' + j + '</span>';
} else {
strResult += '<span>' + j + '</span>';
}
}
}
for (var j = 0; j < (Math.ceil(i / 7) * 7 - i); j++) { //输出后空格
strResult += '<span> </span>';
}
return strResult;
}
Calendar.prototype.createFoot = function() {
return '<span class="foot"><a href="javascript:' + this.name + '.changeMonth(\'p\');" class="arrow">3</a> MONTH <a href="javascript:' + this.name + '.changeMonth(\'n\');" class="arrow">4</a> <a href="javascript:' + this.name + '.changeYear(\'p\');" class="arrow">3</a> YEAR <a href="javascript:' + this.name + '.changeYear(\'n\');" class="arrow">4</a></span>';
}
Calendar.prototype.changeYear = function(arg) {
if (arg == 'p') this.year -= 1;
if (arg == 'n') this.year += 1;
this.init();
}
Calendar.prototype.changeMonth = function(arg) {
var m;
if (arg == 'p') m = this.month - 1;
if (arg == 'n') m = this.month + 1;
if (arg == 'p' || arg == 'n') {
if ( m > -1 && m < 12) {
this.month = m;
} else if (m < 0) {
this.year -= 1;
this.month = 11;
} else if (m > 11) {
this.year += 1;
this.month = 0;
}
}
this.init();
}
//-->
</script>
<style type="text/css">
#calendar {
width: 175px;
border: 1px solid #cccccc;
border-bottom: none;
border-left: none;
}
#calendar span {
width: 24px;
color: #999999;
font-size: 9px;
font-family: Verdana, sans-serif;
font-weight: normal;
text-align: center;
background-color: #FFFFFF;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
padding: 2px 0px 1px 0px;
margin: 0px;
float: left;
}
#calendar span.today {
color: #0066ff;
font-weight: bold;
background-color: #f6f6f6;
}
#calendar span.head {
width: 164px;
color: #FFFFFF;
text-align: left;
font-weight: bold;
font-family: Tahoma, sans-serif;
background-color: #0033CC;
border-bottom: none;
padding: 2px 5px 1px 5px;
}
#calendar span.foot {
width: 174px;
color: #999999;
text-align: center;
font-weight: bold;
font-family: Tahoma, sans-serif;
background-color: #F0F0F0;
padding: 0px;
}
#calendar a.arrow {
color: #666666;
font-family: webdings;
font-weight: normal;
text-decoration: none;
}
#calendar a:hover.arrow {
color: #0000FF;
}
#calendar .ww, #calendar .we {
color: #666666;
font-weight: bold;
font-family: Tahoma, sans-serif;
background-color: #F0F0F0;
}
#calendar span.weekend, #calendar .we {
color: #FF0000;
}
</style>
<body>
<script language="JavaScript">
<!--
cal = new Calendar('cal');
//-->
</script>
</body>
</html>
分享到：
相关推荐
本项目中，我们看到一个使用纯JavaScript编写的日历控件，它不仅能够展示日期，还实现了两个不同页面之间的值传递。这通常涉及到跨窗口通信，其中“window.opener”属性扮演了关键角色。 首先，让我们深入了解一下...
本项目是使用HTML、CSS和JavaScript这三种核心技术编写的，它们各自扮演着不同的角色来实现这个功能。 HTML（HyperText Markup Language）是网页内容的基础结构，负责定义页面的布局和内容。在日历控件的实现中，...
- **日历逻辑**：编写代码来生成当前月份的日历，并处理用户的选择，将选定的日期更新到输入框。 4. **日期处理**：JavaScript的`Date`对象是处理日期的关键。我们可以使用它来获取当前日期、计算月份天数、以及...
JavaScript日历是一个常见的网页交互元素，它为用户提供了一个方便的方式来选择日期，常见于表单填写、事件安排等场景。在Web开发中，JavaScript日历组件的实现主要依赖于JavaScript语言和CSS来完成页面布局和样式...
总的来说，使用JavaScript编写日历控件是一项既有趣又有挑战性的任务，它结合了日期处理、事件处理、DOM操作等多个前端开发的关键技能。通过不断优化和扩展，这样的日历组件可以极大地提升网站或应用的用户体验。
用JS做的日历表，好看又实用哦，大家用用看吧，资源共享吧。用JS做的日历表，好看又实用哦，大家用用看吧，资源共享吧。用JS做的日历表，好看又实用哦，大家用用看吧，资源共享吧。用JS做的日历表，好看又实用哦，...
JavaScript日历是一种基于Web的交互式日历组件，通常用于网页应用中，用户可以通过它查看日期、安排事件或进行时间管理。在JavaScript中创建日历涉及到DOM操作、事件处理、日期对象处理等多个方面。下面我们将深入...
日历控件的实现方式多样，可以通过原生JavaScript编写，也可以借助第三方库如jQuery UI、FullCalendar、Pickadate.js等实现。 1. 原生JavaScript实现日历控件： 使用原生JS编写日历控件需要考虑DOM操作、事件处理...
在IT行业中，JavaScript是一种广泛使用的前端编程语言，...通过研究`SelDate2.js`源码，开发者不仅可以学习到JavaScript编写日历组件的方法，还能借鉴其良好的代码组织和问题解决策略，为自己的项目带来灵感和实践。
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> //创建一个数组,用于存放每个月的天数 function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11) { this[0] = m0; this[1] = m1; this...
7. **兼容性**：考虑到浏览器的多样性，编写JavaScript日历控件时需要关注跨浏览器的兼容性问题，确保在不同的浏览器（如Chrome、Firefox、Safari、Edge和IE）上都能正常工作。 在提供的文件名中，"calendar.html"...
在这个资源中，我们关注的是JavaScript编写的一些美观的日历实现，这对于网页开发者来说是一个非常实用的功能，可以用于展示日期、计划事件或者提供日期选择器。 一、JavaScript基础知识 1. 变量与数据类型：...
基于javascript编写的漂亮的日历程序
无论是采用纯JavaScript编写日历控件，还是利用成熟的库如FullCalendar，都需要考虑以下几个方面： - **兼容性**：确保控件在各种浏览器和设备上都能正常工作。 - **可访问性**：遵循Web无障碍标准，使有特殊需求的...
JavaScript编写的选择性输入日历控件。首先引入该JS文件，某个文本框需要输入日期时，为该文本框添加onfocus事件，事件处理函数为new Calendar(0).show(this)。即添加“onfocus='new Calendar(0).show(this)”。
JavaScript日历组件可以通过纯JavaScript编写，也可以利用框架如jQuery或React等来构建。 2. **带文本框的日历** 描述中提到的“带文本框”的日历，意味着用户可以直接在输入框中输入日期，同时点击输入框会弹出一...
用JavaScript编写的一款比较经典的日历代码
javascript编写的网页版日历，里边包含阳历及阴历，以及节气节庆，还有国内外的其他节日。
总的来说，"js编写带时分秒的日历"项目涉及了JavaScript的日期处理、DOM操作、事件监听、用户交互设计等多个核心知识点。通过这个项目，开发者可以深入理解JavaScript在创建动态Web界面中的作用，并锻炼到实际编程...
JavaScript编写的界面友好的日历，使用方便简单，下载即可运行，界面友好，功能齐全