日历控件经常在平常的工作中使用到，他的实现方法以前并没有深入研究，今天写了一个简单的，知识打印出日历的基本结构，以后会添加更强大的功能。请关注后面的文章.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 日历 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
</style>
</head>
<body>
<div id="calendar">
</div>
</body>
</html>
<script type="text/javascript">
<!--
function Calendar(year,month,day){
if(typeof year!="number"||typeof month !="number"){
throw new Error("参数必须为整形");
}
this.year=year;
this.month=month;
this.day=day;
this.daysOfMonth=[31,0,31,30,31,30,31,30,30,31,30,31]
Calendar.prototype.getDaysOfMonth=function(){
var value=this.daysOfMonth[this.month-1];
if(value==0){
if((this.year%4==0&&this.yea%100!=0)||(this.yea%400==0))
{
value=29
}
else
{
value=28
}
}
return value;
};
//获取本月的第一天是星期几
Calendar.prototype.getDayBeginOfMonth=function(){
var today=new Date();
today.setYear(this.year);
today.setMonth(this.month-1);
today.setDate(1);
return today.getDay();
};
//获取本月的最后一天是星期几
Calendar.prototype.getDayEndOfMonth=function(){
var today=new Date();
today.setYear(this.year);
today.setMonth(this.month-1);
today.setDate(this.getDaysOfMonth());
return today.getDay();
};
//获取日历数组
Calendar.prototype.getCalData=function(){
var days=this.getDaysOfMonth();
var firstDay=this.getDayBeginOfMonth();
var lastDay=this.getDayEndOfMonth();
var data=new Array(firstDay+days+6-lastDay);
for(var i=0,j=0;i<data.length;i++){
if(i<firstDay||i>=(days+firstDay)){
data[i]="";
}else{
j++;
data[i]=j;
}
}
return data;
};
}
var cal=new Calendar(2012,3);
var data=cal.getCalData();
var calendarDom=document.getElementById("calendar");
var table=document.createElement("table");
for(var i=0;i<data.length;i++){
if(i%7==0){
table.insertRow(-1);
}
var curRow=table.rows[parseInt(i/7)];
var curCell=document.createElement("td");
curCell.innerHTML=data[i];
curRow.appendChild(curCell);
}
calendarDom.appendChild(table);
//-->
</script>
分享到：
相关推荐
"js简洁日历-日期选择-万年历"项目就是一个利用JavaScript实现的轻量级日历组件，它提供了用户友好的日期选择功能，适用于各种需要日期输入的场景。 这个日历组件的亮点在于其简洁性，意味着它可能具有高效的代码...
JavaScript实现的日历组件是一种常见的网页交互元素，常用于让用户方便地选择日期，尤其在填写表单时。这个组件是纯HTML脚本编写的，这意味着它不依赖任何外部库或框架，如jQuery或AngularJS，因此它具有轻量级、...
JavaScript允许我们动态地修改网页内容，从而实现日历的交互功能。在这个应用中，我们可以编写函数来： 1. 初始化日历：根据当前日期生成日历网格。 2. 更新日历：当用户切换月份时，重新计算并显示新的日期。 3. ...
2. **实现日历控件的常见方法** - **原生JS实现**：利用HTML、CSS和JavaScript编写所有代码，完全自定义样式和行为。 - **使用库或框架**：例如jQuery UI、Bootstrap Datepicker、Pickadate.js等，它们提供预设...
3. **逻辑**：JavaScript部分，实现日历的动态行为，如显示/隐藏日历，切换月份，选择日期等。 在描述中提到，示例代码可能支持两种编码格式：UTF-8和GBK。UTF-8是一种国际通用的字符编码标准，能表示世界上几乎...
"js日历控件-calendar.js" 是一个JavaScript实现的日历组件，主要应用于网页中，用于显示日期选择功能。这个控件通常包含一个可交互的日历界面，用户可以通过它来选择日期，常见于在线表单、事件预订或者日期相关的...
标签“JS日历源码”提示这是一个提供JavaScript实现日历效果的源代码。在提供的压缩包文件中，"日历.js"很可能包含了实现上述逻辑的代码。直接复制并引入到你的HTML文件中，应该就可以看到日历效果。但要注意，实际...
总之，使用原生JavaScript实现日历组件是一种很好的实践，它可以帮助开发者提升对DOM操作、事件处理和日期对象的理解。而通过一行代码实现的这种高效方法，更是体现了JavaScript的灵活性和强大性。对于初学者来说，...
javascript实现日历显示，可以根据用户输入时间显示日历。
这个"js代码实现日历功能，超给力demo"提供了一个实用的示例，可以帮助开发者快速构建自定义的日历组件。下面我们将深入探讨这个话题，了解如何使用JavaScript来创建一个功能丰富的日历。 首先，日历功能的基础是...
"js实现日历效果，html日历效果展示"这个项目就是一个基于纯JavaScript原生代码实现的日历功能，无需依赖任何外部库，如jQuery或其他框架。下面将详细阐述实现这样的日历效果所涉及的关键知识点。 首先，HTML是页面...
在实现日历撕掉翻转特效时，原生JS的灵活性和高效性尤为重要。 1. **DOM操作**：在构建日历组件时，需要动态创建和操作HTML元素。这包括创建日历的结构（如月份、日期等），以及在用户交互时更新这些元素的状态。...
【js日历控件】是一种在网页中实现日期选择功能的JavaScript组件，它允许用户以图形化的方式选择日期，常用于表单填写、事件预订、时间管理等场景。本控件具有良好的用户体验，且在同一个页面上可同时使用多个，互不...
三、JavaScript实现 接下来，我们需要编写JS代码来动态生成日历，并处理鼠标悬停事件。这里我们使用`calendar.js` 文件来实现这个功能。 1. 获取当前月份和年份，并创建日历表格。 ```javascript // 获取当前日期...
### 一、JavaScript 实现日历控件的基础结构 1. **变量初始化**： - `months`: 存储每个月份名称的数组。 - `daysInMonth`: 存储每个月天数的数组。 - `days`: 存储每周每一天名称的数组。 - `classTemp`: 未在...
日历控件则是利用JavaScript实现的一个交互组件，它通常由HTML结构、CSS样式和JavaScript逻辑三部分组成。 日历控件的核心功能包括：显示当前日期、允许用户选择日期、验证输入的有效性以及与页面其他元素交互。...
"js日历组件-精确到时分秒"是一个专为JavaScript设计的日历插件，它允许用户在网页上选择日期和时间，精确到小时、分钟甚至秒。这种组件在网页表单、事件预订系统、在线日程管理等场景中非常实用。 首先，我们要...
以上就是使用JavaScript实现日历选择的基本步骤。当然，实际应用中可能还需要考虑更多的细节，如样式美化、错误处理、多语言支持等。此外，还有许多现成的库，如jQuery UI的Datepicker、Bootstrap的DateTimePicker等...
在提供的文件名中，"calendar.html"可能是包含日历控件的HTML页面，而"iptext.js"很可能是用来实现日历功能的JavaScript脚本。通过分析这两个文件，我们可以深入了解这个日历控件的具体实现细节，包括具体的DOM操作...
5. **设计与交互**：原生JavaScript实现的日历通常需要考虑不同设备和浏览器的兼容性，确保在各种环境下都能正常工作。此外，良好的UI设计和响应式布局也是必不可少的，以适应不同屏幕尺寸的设备。 6. **优化与性能...