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

自己写了个JS日历

 
阅读更多

var dayArray = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");  //创建星期数组
	var today = new Date();

	

	window.onload = function(){
		var tabletag = document.createElement("table");
		tabletag.id = "dateform";
		var oTable = document.body.appendChild(tabletag);
		var i = j = 0;
		
		var oRows = oTable.insertRow(i);
		for(j=0;j<7;j++){
			var oCols = oRows.insertCell(j)//FF
			oCols.innerHTML = dayArray[j];
			oCols.style.background="yellow"
		}
		i++;
		for(;i<6;i++){
			oRows=oTable.insertRow(i)//FF
			//var oRows = oTable.appendChild();
			for(j=0;j<7;j++){
				var oCols = oRows.insertCell(j)//FF
				//oCols.innerHTML = i + "行" + j +"列";
				oCols.style.background="#eee"
			}
	  }

		var plas = getDayOfWeek(today.getYear(),today.getMonth() + 1,1);
		var mondays = DayNumOfMonth(today.getYear(),today.getMonth() + 1);

		for(i=1;i<=mondays;i++)
		{
			
			var rnum = (plas + i)/7;
			if(rnum>parseInt(rnum)) 
				rnum = parseInt(rnum) + 1;
			else
				rnum = rnum;
			//alert(rnum);
			//oRows = oTable.getRow(rnum);
			var cnum = getDayOfWeek(today.getYear(),today.getMonth() + 1,i);
			//var oCols = oRows.getCell(cnum);
			oTable.rows[rnum].cells[cnum].innerHTML = i;
			
			
			
			oTable.rows[rnum].cells[cnum].onmouseover = function(){this.style.background="green"};

			oTable.rows[rnum].cells[cnum].onmouseout = function(){this.style.background="#eee";};
			if(i==today.getDate())
			{
				oTable.rows[rnum].cells[cnum].style.background="red"
				oTable.rows[rnum].cells[cnum].onmouseout = function(){this.style.background="red";};
			}

			//oTable.rows[rnum].cells[cnum].setAttribute("onclick", dblclick(rnum,cnum));;
		}

	}

	
    this.dblclick = function(i,j){
		alert(i + "," + j);
	}

    //alert(getDayOfWeek(day.getYear(),2,1));  //调用判断星期几的方法

    
	//alert(DayNumOfMonth(2012,02));
	function DayNumOfMonth(Year,Month) 
	{ 
	    var d = new Date(Year,Month,0); 
	    return d.getDate(); 
	}

	function getDayOfWeek(Year,Month,Day){ 
	    var dayValue = Year + "-" + Month + "-" + Day;
	    var day = new Date(Date.parse(dayValue.replace(/-/g, '/')));   //将日期值格式化 
	    return day.getDay();  //返一个星期中的某一天,其中0为星期日 
	}
  • 大小: 7.9 KB
分享到:
评论

相关推荐

    js 日历 js日历 例子 javascript日历

    JavaScript日历是一个常见的网页交互元素,它为用户提供了一个方便的方式来选择日期,常见于表单填写、事件安排等场景。在Web开发中,JavaScript日历组件的实现主要依赖于JavaScript语言和CSS来完成页面布局和样式...

    js酒店价格日历_js门票价格日历_javascript价格日历

    data.php 包含一个价格日历生成类和 一些实例 product.php ajax产品的json格式 style 样式和js文件 说明: 此程序中js是驴妈妈上的,我做了些修改,做学习用,精简了代码和功能,只提供酒店和门票,部分提交url请...

    js日历 12种js日历

    在这个主题中,我们主要关注的是“js日历 12种js日历”,这显然是一份包含了多种不同实现方式的JavaScript日历组件集合。 1. **日历组件的基本概念** 日历组件是网页中常见的交互元素,它允许用户选择日期,通常...

    6个JS日历控件个JS日历控件

    上述文件名中的`Calendar2.rar`至`Calendar6.rar`可能包含不同版本或实现方式的JS日历控件源代码,开发者可以通过解压并研究这些文件来学习和定制自己的日历控件。每个压缩包可能包含HTML、CSS、JavaScript文件以及...

    html js脚本日历控件

    7. **兼容性**:考虑到浏览器的多样性,编写JavaScript日历控件时需要关注跨浏览器的兼容性问题,确保在不同的浏览器(如Chrome、Firefox、Safari、Edge和IE)上都能正常工作。 在提供的文件名中,"calendar.html"...

    javascript自己写的日历控件及实例

    这个“javascript自己写的日历控件及实例”项目,虽然描述中提到并不完整,但仍然可以作为学习和理解JavaScript日历控件制作的一个起点。 首先,我们需要了解JavaScript的基础知识,它是网页开发中的主要脚本语言,...

    用JS写的日历 很好用的日历

    首先,JavaScript日历控件是前端开发中的一个重要组成部分,它能够帮助用户方便地选择日期,常用于表单输入、事件预订或时间管理等场景。这种控件的核心在于,它需要能够正确地显示当前月份和年份,并允许用户切换到...

    三款js日历(javascript 日历)

    本文将详细介绍三款JavaScript日历插件,它们各具特色,能够为你的网页增添别致的用户体验。 第一款日历插件可能是“32008731155337.rar”中的内容。虽然具体名称未知,但我们可以假设它是一款简洁且功能丰富的日历...

    纯JS日历表格

    本项目“纯JS日历表格”旨在提供一个完全使用JavaScript实现的日历视图,允许开发者轻松集成到自己的应用中,进行定制化开发。 日历功能在许多网站和应用程序中都是必不可少的,例如事件管理、预约系统或时间跟踪...

    练手时写的JS日历,附使用方法

    在本项目中,我们有一个由JS(JavaScript)编写的日历功能,这通常用于网页上的日期选择或事件安排。这个日历是作者在练习编程技能时创建的,因此它可能包含基础的日历功能,适合初学者研究和学习。以下是关于这个JS...

    一个用javascript写的日历

    总的来说,这个JavaScript日历应用涉及到了前端开发的多个方面,从基础的DOM操作到复杂的用户交互和视觉设计,都是JavaScript开发者需要掌握的技能。通过这样的实践项目,开发者可以提升自己的技术能力,并在实际...

    一个js写的日历控件

    在这个场景中,我们讨论的是一个用JS编写的日历控件,其目的是为了帮助用户在预订酒店时方便地选择入住日期和离店日期。这种控件在电子商务、旅游预订和各种在线服务网站中非常常见。 日历控件的基本功能包括展示一...

    javascript写的日历

    总结一下,这个纯JavaScript日历组件利用了JavaScript的DOM操作、Date对象以及事件处理等核心特性,提供了一个完整的日期和时间选择功能。对于前端开发者来说,理解和掌握这样的组件有助于提升网页交互设计的能力。

    用JS写了个日历,类似BLOG那种

    标题中的“用JS写了个日历,类似BLOG那种”指的是使用JavaScript编程语言实现的一个日历功能,这种日历通常用于博客或者网站中,提供日期选择或者日程管理的功能。JavaScript是前端开发的重要语言,它允许在用户...

    js日历记事器js动态记事日历漂亮

    总结来说,这个压缩包提供了一个完整的JavaScript日历记事器,包括了前端展示所需的HTML、CSS和JS文件,以及必要的图片资源和用户指南。通过解压并运行index.htm,用户可以在本地浏览器中查看和测试这个日历组件的...

    javascript万年日历js

    总的来说,JavaScript万年日历JS是前端开发中的一个实用案例,展示了如何结合JavaScript、HTML和CSS实现一个功能齐全、可自定义的本地化日历组件。通过学习和实践这类组件的实现,开发者可以深入理解前端技术栈,并...

    JavaScript日历控件 六种日历

    JavaScript日历控件是网页开发中常用的...以上就是对JavaScript日历控件及相关知识点的详细说明,从基础概念到实际应用,涵盖了多个方面。理解并掌握这些知识点,有助于开发者创建出功能丰富、用户体验良好的日历组件。

    日文版javascript日历

    【标题】"日文版javascript日历"是一个专门针对日语环境设计的JavaScript日历控件,它提供了方便的日历显示和交互功能,尤其适用于需要日文日期展示的Web应用程序。这个控件不仅包含了完整的日历功能,还带有详细的...

    一个用JS写的简日历

    一个用JS写的简日历,可任意改变颜色,简单实用。

Global site tag (gtag.js) - Google Analytics