`
zfh521
  • 浏览: 31916 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JS实现日历-1

    博客分类:
  • JS
阅读更多

日历控件经常在平常的工作中使用到,他的实现方法以前并没有深入研究,今天写了一个简单的,知识打印出日历的基本结构,以后会添加更强大的功能。请关注后面的文章.

 

<!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>
 

 

 

 

 

 

0
0
分享到:
评论

相关推荐

    js简洁日历-日期选择-万年历

    "js简洁日历-日期选择-万年历"项目就是一个利用JavaScript实现的轻量级日历组件,它提供了用户友好的日期选择功能,适用于各种需要日期输入的场景。 这个日历组件的亮点在于其简洁性,意味着它可能具有高效的代码...

    JavaScript实现日历组件-源代码

    JavaScript实现的日历组件是一种常见的网页交互元素,常用于让用户方便地选择日期,尤其在填写表单时。这个组件是纯HTML脚本编写的,这意味着它不依赖任何外部库或框架,如jQuery或AngularJS,因此它具有轻量级、...

    方块日历--------

    JavaScript允许我们动态地修改网页内容,从而实现日历的交互功能。在这个应用中,我们可以编写函数来: 1. 初始化日历:根据当前日期生成日历网格。 2. 更新日历:当用户切换月份时,重新计算并显示新的日期。 3. ...

    JS日历控件集合----附效果图、源代码

    2. **实现日历控件的常见方法** - **原生JS实现**:利用HTML、CSS和JavaScript编写所有代码,完全自定义样式和行为。 - **使用库或框架**:例如jQuery UI、Bootstrap Datepicker、Pickadate.js等,它们提供预设...

    js 日历 js日历 例子 javascript日历

    3. **逻辑**:JavaScript部分,实现日历的动态行为,如显示/隐藏日历,切换月份,选择日期等。 在描述中提到,示例代码可能支持两种编码格式:UTF-8和GBK。UTF-8是一种国际通用的字符编码标准,能表示世界上几乎...

    js日历控件-calendar.js

    "js日历控件-calendar.js" 是一个JavaScript实现的日历组件,主要应用于网页中,用于显示日期选择功能。这个控件通常包含一个可交互的日历界面,用户可以通过它来选择日期,常见于在线表单、事件预订或者日期相关的...

    JavaScript实现日历效果

    标签“JS日历源码”提示这是一个提供JavaScript实现日历效果的源代码。在提供的压缩包文件中,"日历.js"很可能包含了实现上述逻辑的代码。直接复制并引入到你的HTML文件中,应该就可以看到日历效果。但要注意,实际...

    js实现日历组件,一行代码实现日历,并且实现可添加自定义记录

    总之,使用原生JavaScript实现日历组件是一种很好的实践,它可以帮助开发者提升对DOM操作、事件处理和日期对象的理解。而通过一行代码实现的这种高效方法,更是体现了JavaScript的灵活性和强大性。对于初学者来说,...

    javascript实现日历显示

    javascript实现日历显示,可以根据用户输入时间显示日历。

    js代码实现日历功能,超给力demo

    这个"js代码实现日历功能,超给力demo"提供了一个实用的示例,可以帮助开发者快速构建自定义的日历组件。下面我们将深入探讨这个话题,了解如何使用JavaScript来创建一个功能丰富的日历。 首先,日历功能的基础是...

    js实现日历效果,html日历效果展示

    "js实现日历效果,html日历效果展示"这个项目就是一个基于纯JavaScript原生代码实现的日历功能,无需依赖任何外部库,如jQuery或其他框架。下面将详细阐述实现这样的日历效果所涉及的关键知识点。 首先,HTML是页面...

    js日历控件-实用日历

    【js日历控件】是一种在网页中实现日期选择功能的JavaScript组件,它允许用户以图形化的方式选择日期,常用于表单填写、事件预订、时间管理等场景。本控件具有良好的用户体验,且在同一个页面上可同时使用多个,互不...

    JS 实现活动日历代码

    三、JavaScript实现 接下来,我们需要编写JS代码来动态生成日历,并处理鼠标悬停事件。这里我们使用`calendar.js` 文件来实现这个功能。 1. 获取当前月份和年份,并创建日历表格。 ```javascript // 获取当前日期...

    js实现日历

    ### 一、JavaScript 实现日历控件的基础结构 1. **变量初始化**: - `months`: 存储每个月份名称的数组。 - `daysInMonth`: 存储每个月天数的数组。 - `days`: 存储每周每一天名称的数组。 - `classTemp`: 未在...

    实用的js日历控件--简单好用

    日历控件则是利用JavaScript实现的一个交互组件,它通常由HTML结构、CSS样式和JavaScript逻辑三部分组成。 日历控件的核心功能包括:显示当前日期、允许用户选择日期、验证输入的有效性以及与页面其他元素交互。...

    js日历组件-精确到时分秒

    "js日历组件-精确到时分秒"是一个专为JavaScript设计的日历插件,它允许用户在网页上选择日期和时间,精确到小时、分钟甚至秒。这种组件在网页表单、事件预订系统、在线日程管理等场景中非常实用。 首先,我们要...

    js日历选择代码,js实现日历选择

    以上就是使用JavaScript实现日历选择的基本步骤。当然,实际应用中可能还需要考虑更多的细节,如样式美化、错误处理、多语言支持等。此外,还有许多现成的库,如jQuery UI的Datepicker、Bootstrap的DateTimePicker等...

    html js脚本日历控件

    在提供的文件名中,"calendar.html"可能是包含日历控件的HTML页面,而"iptext.js"很可能是用来实现日历功能的JavaScript脚本。通过分析这两个文件,我们可以深入了解这个日历控件的具体实现细节,包括具体的DOM操作...

    移动端日历calendar-原生js

    5. **设计与交互**:原生JavaScript实现的日历通常需要考虑不同设备和浏览器的兼容性,确保在各种环境下都能正常工作。此外,良好的UI设计和响应式布局也是必不可少的,以适应不同屏幕尺寸的设备。 6. **优化与性能...

    js的中国农历-农历-日历

    在本文中,我们将深入探讨如何使用JavaScript来实现中国农历的功能,以及创建一个美观、清爽的日历界面。 首先,理解中国农历的计算原理至关重要。中国农历,也称为阴历,与阳历(如公历)不同,它基于月亮的运行...

Global site tag (gtag.js) - Google Analytics