日历控件经常在平常的工作中使用到,他的实现方法以前并没有深入研究,今天写了一个简单的,知识打印出日历的基本结构,以后会添加更强大的功能。请关注后面的文章.
<!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日历控件】是一种在网页中实现日期选择功能的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. **优化与性能...
在本文中,我们将深入探讨如何使用JavaScript来实现中国农历的功能,以及创建一个美观、清爽的日历界面。 首先,理解中国农历的计算原理至关重要。中国农历,也称为阴历,与阳历(如公历)不同,它基于月亮的运行...