日历控件,完全用CSS+JS实现

最新推荐文章于 2022-04-11 13:37:20 发布
最新推荐文章于 2022-04-11 13:37:20 发布
阅读量83 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/waterseason/article/details/88332946
版权
转的.

[img]http://dl.iteye.com/upload/attachment/526631/b659f1cd-db37-3d1a-8a0b-83a7513f3108.png[/img] 


<html>
<head>
	<style>
		.body{
			background-color:white;
		}

		.calendar table{
			width:100%;
			height:100%;
			position:relative;
			border-collapse:collapse;
		}

		.calendar table th.first{ 
			height:25px;
			background-color:maroon;
			font-family: arial, helvetica;
			font-size:15px;
			color:white;
			border-right:1px solid white;
			border-left:1px solid maroon;
		}

		.calendar table th.mid{ 
			height:25px;
			background-color:maroon;
			font-family: arial, helvetica;
			font-size:15px;
			color:white;
			border-right:1px solid white;a
		}

		.calendar table th.last{ 
			height:25px;
			background-color:maroon;
			font-family: arial, helvetica;
			font-size:15px;
			color:white;
			border-right:1px solid maroon;
		}

		.calendar table td { 
			width:14%;
			border:1px solid maroon;
			padding:0px;
		}

		.calendar table.tdborder{
			width:100%;
			height:100%;
			position:relative;
		}

		.calendar table td.tdborderNormal{
			border:1px solid transparent;
			width:100%;
			height:100%;
			position:relative;
			padding:0px;
		}

		.calendar table td.tdborderOnfocus { 
			border:1px solid red;
			width:100%;
			height:100%;
			position:relative;
			padding:0px;
		}

		.calendar table td.caltitle_p {
			height:25px;
			font-family: arial, helvetica;
			font-size:20px;
			color:maroon;
			border:0px;
			text-align:center;
			cursor:pointer;
		}

		.calendar table td.caltitle_m {		
			height:25px;
			font-family: arial, helvetica;
			font-size:20px;
			color:maroon;
			border:0px;
			text-align:center;
		}

		.calendar table td.caltitle_m_lr {
			height:25px;
			font-family: arial, helvetica;
			font-size:11px;
			color:maroon;
			border:0px;
			text-align:left;
			cursor:pointer;
		}

		.calendar table td.caltitle_l {		
			height:25px;
			font-family: arial, helvetica;
			font-size:20px;
			color:maroon;		
			border:0px;
			text-align:center;
			cursor:pointer;
		}

		.calendar table td.quarter {		
			height:25px;
			font-family: arial, helvetica;
			font-size:14px;
			color:maroon;		
			border:0px;
			text-align:center;
		}

		.calendar table td.quartermonth {		
			height:25px;
			font-family: arial, helvetica;
			font-size:12px;
			color:maroon;		
			border:0px;
			text-align:center;
			cursor:pointer;
		}

		.calendar div.dateTitle{
			width:98%;
			height:15px;
			position:relative;
			font-family: arial, helvetica;
			font-size:13px;
			text-align:right;
		}

		.calendar div.dateContext{
			width:100%;
			height:90%;
			position:relative;
			font-family: arial, helvetica;
			font-size:12px;
			text-align:left;
			position:relative;
			border-top:1px dashed maroon;
		}

		.calendar tabel td.now{
			font-family: arial, helvetica;
			font-size:11px;
			cursor:hand;
			position:relative;
		}

	</style>

	<script>
		var currentDate = new Date();

		Date.prototype.getMonthDays = function(month,year){
			var nextMonthFiristDay = new Date();

			nextMonthFiristDay.setDate('1');

			var nowMonthFiristDay = new Date();
			nowMonthFiristDay.setDate('1');

			if(year){
				nowMonthFiristDay.setFullYear(year);
				nextMonthFiristDay.setFullYear(year);
			}

			if(month){
				nextMonthFiristDay.setMonth(month);
				nowMonthFiristDay.setMonth(month-1);
			}else{
				nextMonthFiristDay.setMonth(nextMonthFiristDay.getMonth()+1);
			}

			return Number((nextMonthFiristDay - nowMonthFiristDay)/1000/60/60/24).toFixed(0);
		}

		Date.prototype.getFirstDayOfMonthInWeek = function(month,year){
			var today = new Date();
			today.setDate('1');
			if(year){
				today.setFullYear(year);
			}

			if(month){
				today.setMonth(month-1);
			}
			return today.getDay();
		}

		function addRow(tbody,strings,ishead){
			var tds = new Array();
			var texts = new Array();

			var _tr = document.createElement("tr");
			tbody.appendChild(_tr);

			for(var i=0;i<7;i++){
				if(ishead){
					tds[i] = document.createElement("th");
					if(i==0){
						tds[i].className = 'first';
					}else if(i==6){
						tds[i].className = 'last';
					}else{
						tds[i].className = 'mid';
					}					
				}else{
					tds[i] = document.createElement("td");
				}

				_tr.appendChild(tds[i]);
				if(strings){
						texts[i] = document.createTextNode(strings[i]);
						tds[i].appendChild(texts[i]);
				}	
			}
		}

		function mapMonthNum(month){
			var monthStr = new Number();
			switch (month)
			{
				case 'Jan':
				monthStr = 0
				break
				case 'Feb':
				monthStr = 1
				break
				case 'Mar':
				monthStr = 2
				break
				case 'Apr':
				monthStr = 3
				break
				case 'May':
				monthStr = 4
				break
				case 'Jun':
				monthStr = 5
				break
				case 'Jul':
				monthStr = 6
				break
				case 'Aug':
				monthStr = 7
				break
				case 'Sep':
				monthStr = 8
				break
				case 'Oct':
				monthStr = 9
				break
				case 'Nov':
				monthStr = 10
				break
				case 'Dec':
				monthStr = 11
				break
			}
			return monthStr;
		}


		function mapMonth(month){
			var monthStr = new Object();
			switch (month)
			{
				case 0:
				monthStr = 'Jan'
				break
				case 1:
				monthStr = 'Feb'
				break
				case 2:
				monthStr = 'Mar'
				break
				case 3:
				monthStr = 'Apr'
				break
				case 4:
				monthStr = 'May'
				break
				case 5:
				monthStr = 'Jun'
				break
				case 6:
				monthStr = 'Jul'
				break
				case 7:
				monthStr = 'Aug'
				break
				case 8:
				monthStr = 'Sep'
				break
				case 9:
				monthStr = 'Oct'
				break
				case 10:
				monthStr = 'Nov'
				break
				case 11:
				monthStr = 'Dec'
				break
			}
			return monthStr;
		}

		function addTitleMonth(td,strings,calendar,calendar_context){

			var quarter1table = document.createElement("table");
			var quarter1tbody = document.createElement("tbody");
			var quarter1tr = document.createElement("tr");

			td.appendChild(quarter1table);
			quarter1table.appendChild(quarter1tbody);
			quarter1tbody.appendChild(quarter1tr);

			var quarter1tds = new Array();

			for(var i=0;i<strings.length;i++){
					quarter1tds[i] = document.createElement("td");
					quarter1tds[i].monthvalue = mapMonthNum(strings[i]);

					quarter1tds[i].appendChild(document.createTextNode(strings[i]));
					quarter1tr.appendChild(quarter1tds[i]);
					quarter1tds[i].className = 'quartermonth';

					quarter1tds[i].onclick = function(){					
						currentDate.setMonth(this.monthvalue);
						calendar.removeChild(calendar_context);
						initCal();
					}
			}
		}

		function initCal(){
			var calendar = document.getElementById("calendar");		
			var calendar_context = document.createElement("table");

			calendar.appendChild(calendar_context);

			var _tbody = document.createElement("tbody");
			calendar_context.appendChild(_tbody);

			var days = currentDate.getMonthDays(currentDate.getMonth()+1,currentDate.getFullYear());	

			var cells = new Array();
			var cellDivs = new Array();
			var cellDivTbodys = new Array();
			var cellDivTrs = new Array();
			var cellDivTds = new Array();

			var handleDates = new Array();
			var txtNodes = new Array();			

			//create table;
			var calendar_title_tr = document.createElement("tr");

			var calendar_title_td_p = document.createElement("td");
			calendar_title_td_p.className = 'caltitle_p';
			calendar_title_td_p.appendChild(document.createTextNode("<"));
			calendar_title_td_p.onclick=function(){
				currentDate.setMonth(currentDate.getMonth()-1);
				calendar.removeChild(calendar_context);
				initCal();
			}

			var calendar_title_td_m = document.createElement("td");
			calendar_title_td_m.className = 'caltitle_m';

			var calendar_title_td_m_table = document.createElement("table");
			var calendar_title_td_m_tbody = document.createElement("tbody");
			var calendar_title_td_m_tr = document.createElement("tr");
			var calendar_title_td_m_tdl = document.createElement("td");
			var calendar_title_td_m_tdm = document.createElement("td");
			var calendar_title_td_m_tdr = document.createElement("td");

			calendar_title_td_m.appendChild(calendar_title_td_m_table);
			calendar_title_td_m_table.appendChild(calendar_title_td_m_tbody);
			calendar_title_td_m_tbody.appendChild(calendar_title_td_m_tr);
			calendar_title_td_m_tr.appendChild(calendar_title_td_m_tdl);
			calendar_title_td_m_tr.appendChild(calendar_title_td_m_tdm);
			calendar_title_td_m_tr.appendChild(calendar_title_td_m_tdr);

			calendar_title_td_m_tdm.className = 'caltitle_m';
			calendar_title_td_m_tdl.className = 'caltitle_m';
			calendar_title_td_m_tdr.className = 'caltitle_m_lr';

			calendar_title_td_m_tdm.appendChild(document.createTextNode(mapMonth(currentDate.getMonth()) + ',' + currentDate.getFullYear()));

			var txtNow = document.createTextNode('[Now]');
			calendar_title_td_m_tdr.appendChild(txtNow);
			calendar_title_td_m_tdr.onclick=function(){
				currentDate = new Date();
				calendar.removeChild(calendar_context);
				initCal();
			}

			if(currentDate.getFullYear() == new Date().getFullYear() && currentDate.getMonth() == new Date().getMonth()){
				if(txtNow){
					calendar_title_td_m_tdr.removeChild(txtNow);
				}
			}

			var calendar_title_td_l = document.createElement("td");
			calendar_title_td_l.className = 'caltitle_l';
			calendar_title_td_l.appendChild(document.createTextNode(">"));
			calendar_title_td_l.onclick=function(){
				currentDate.setMonth(currentDate.getMonth()+1);
				calendar.removeChild(calendar_context);
				initCal();
			}

			calendar_title_tr.appendChild(calendar_title_td_p);
			var quarter1 = document.createElement("td");
			quarter1.className = 'quarter';
			var quarter2 = document.createElement("td");
			quarter2.className = 'quarter';

			calendar_title_tr.appendChild(quarter1);
			var monthTitles1 = ['Jan','Feb','Mar'];
			addTitleMonth(quarter1,monthTitles1,calendar,calendar_context);

			calendar_title_tr.appendChild(quarter2);
			var monthTitles2 = ['Apr','May','Jun'];
			addTitleMonth(quarter2,monthTitles2,calendar,calendar_context);

			calendar_title_tr.appendChild(calendar_title_td_m);

			var quarter3 = document.createElement("td");
			quarter3.className = 'quarter';
			var quarter4 = document.createElement("td");
			quarter4.className = 'quarter';

			calendar_title_tr.appendChild(quarter3);
			var monthTitles3 = ['Jul','Aug','Sep'];
			addTitleMonth(quarter3,monthTitles3,calendar,calendar_context);

			calendar_title_tr.appendChild(quarter4);
			var monthTitles4 = ['Oct','Nov','Dec'];
			addTitleMonth(quarter4,monthTitles4,calendar,calendar_context);

			calendar_title_tr.appendChild(calendar_title_td_l);

			_tbody.appendChild(calendar_title_tr);

			//create title;
			var calTitles = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
			addRow(_tbody,calTitles,true);

			//create first row;
			addRow(_tbody);

			var startPoint = [2,currentDate.getFirstDayOfMonthInWeek(currentDate.getMonth()+1,currentDate.getFullYear())];
			var contextDates = new Array();

			for(var i=0;i<days;i++){
				//alert("rows:" + startPoint[0] + ", cells:" + startPoint[1]);

				cells[i] = calendar_context.rows[startPoint[0]].cells[startPoint[1]];

				cellDivs[i] = document.createElement("table");
				cellDivs[i].className='tdborder';

				cellDivTbodys[i] = document.createElement("tbody");
				cellDivs[i].appendChild(cellDivTbodys[i]);

				cellDivTrs[i] =  document.createElement("tr");
				cellDivTbodys[i].appendChild(cellDivTrs[i]);

				cellDivTds[i] = document.createElement("td");
				cellDivTds[i].className='tdborderNormal';
				cellDivTrs[i].appendChild(cellDivTds[i]);


				cellDivTds[i].onmouseover = function(){
					this.className = 'tdborderOnfocus';
				}
				cellDivTds[i].onmouseout = function(){
					this.className = 'tdborderNormal';
				}
				cells[i].appendChild(cellDivs[i]);

				handleDates[i] = document.createElement("div");
				handleDates[i].className='dateTitle';

				contextDates[i] = document.createElement("div");
				contextDates[i].className='dateContext';

				cellDivTds[i].appendChild(handleDates[i]);
				cellDivTds[i].appendChild(contextDates[i]);

				txtNodes[i] = document.createTextNode(i+1);
				handleDates[i].appendChild(txtNodes[i]);

				var cellsPoint = startPoint[1]++;
				if(cellsPoint == 6){
					startPoint[0]++;
					startPoint[1]=0;
					if(i != days-1){
						addRow(_tbody);
					}	
				}			
			}	
		}

		window.onload = function(){	
			initCal();
		}	

	</script>

</head>
<body>
	<div id='calendar' class='calendar'/>
</body>
</html>
{丸の子}
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
日历控件(html\css\javascript编写)
10-19
这是一个由 html css javascript开发的日历控件，支持中英文切换，点击文本框弹出。
一个css+jq的日历控件
xxldc的博客
08-20 686
刚毕业的小萌新，闲着的时候做了一个日历控件，用css和jquery实现基本的日历功能，包括年份和月份的翻页，日期的选择，根据输入框的初始内容来初始化控件，日期改变之后，也会更新该输入框的内容。 首先是css代码： @charset "utf-8"; /* CSS Document */ .x-date{ text-align:center; } .date-body{ displa
JS+CSS日历控件
07-20
JS+CSS日历控件，多种风格，方便实用
js css+html实现简单的日历
10-21
在网页开发中，日历控件是一个常见的功能，用于日期选择和展示。本文将详细介绍如何使用HTML、CSS和JavaScript结合来实现一个简单的日历功能。首先，我们需要理解HTML、CSS和JavaScript各自的角色。 HTML...
html+js+css带阴历的日历控件
11-28
1. **调试**：使用开发者工具检查CSS样式应用情况，排查JavaScript错误，确保日历控件正常工作。 2. **性能优化**：减少不必要的DOM操作，使用事件委托提高性能，对CSS进行最小化压缩等。 综上，"html+js+css带阴历...
Html+Css+Javascript从入门到精通.pdf
09-27
- **综合应用**：利用JavaScript制作一个功能完善的日历控件。 #### 第四部分：综合应用——建立你自己的网站 **第二十三章：建立你自己的网站** - **项目规划**：确定网站的目标和内容。 - **设计布局**：使用...
CSS+JS日期控件
01-06
下面将详细介绍如何使用CSS和JavaScript来实现一个日期控件，以及涉及的关键知识点。 首先，创建日期控件的基础结构通常是一个HTML元素，如`<input>`或自定义的`<date-picker>`元素。`<input type="date">`是HTML5...
用div+css写个日历控件
01-08
以前写日历控件，都是用table，结果拼半天！现在用div+css写日历控件，可以用div的一个特性，就是当它排不下的时候，就自动换行，那还用得着拼么？因此效率大大增加，一个简单的日历控件，十分钟搞定！大家可以下载看看，测试一下，如果有问题及时提出。这个控件是简单的控件，点击日期没有事件，大家可以自己添加，代码简洁，页面在pages/calendar.html。
八款不同风格的js日历控件(JS+CSS)1
11-17
纯JS+CSS实现的日历控件,把它加载在你的网页中既美观,又使用,非常不错的!
html css3日历选择插件
11-10
html css3日历选择插件 html css3日历选择插件 html css3日历选择插件 html css3日历选择插件
三款漂亮的js日历控件
u012504864的专栏
10-25 2466
这三款js日历控件非常精美漂亮，推荐给大家下载代码，自己使用，下面还有一个仿Vista的日历控件，大家也可以看看! 　　这个js日历代码的优势是：代码简介明了，方便用户使用修改。 　　js日历代码使用 　　myCal1 = new Calendar({ date1: 'd/m/Y' }, { direction: 1, tweak: { x: 6, y: 0 }}); 　　myCal2 =
漂亮的CSS3日历插件代码
ICode联盟
04-11 249
下载地址 CSS3日历表背景颜色切换代码是一款基于HTML5+CSS3实现的日历窗口表格代码 dd:
calendar插件做日程添加提示小红点、事件日期提醒插件
code_wins_args的博客
09-06 4961
今天遇到个有趣的需求，要做一个类似TIM的日程功能，百度了一圈没有例子，只好自己改了，基于calendar修改的日程提醒插件   目录结构     直接上代码，修改部分主要有两处 CSS中修改如下 * { margin: 0; padding: 0; } body { font-family: "Microsoft Yahei"; font-size: 12px; color...
jquery datetimepicker 日期时间控件的使用及参数说明
weixin_30588675的博客
05-04 770
首先下载 jquery.datetimepicker.css jquery.datetimepicker.main.js 1. 引入css和js (注：该控件要依赖于jquery) <link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ > <script src="jquery...
js给css定义时间,时间选择器(js,css,html)
weixin_42599908的博客
08-04 365
python 列表去重&lpar;数组&rpar;的几种方法一.方法1 代码如下 复制代码 ids = [1,2,3,3,4,2,3,4,5,6,1] news_ids = [] for id in ids: if id not in news_id ...php判断是否为手机客户端function isWap() { $http_agent = isset...
HTML+css+JS实现日历组件
热门推荐
qq_22317389的博客
05-17 2万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
为什么要使用computed而不是data获取vuex中的state
{丸の子}
09-27 2635
最近在学习vuex时，照着官网最基本的 Vuex 记数应用示例敲的时候遇到了这样一个问题 想实现的效果： [img]http://dl2.iteye.com/upload/attachment/0130/7904/05459391-8e5f-3828-afcd-658d9c388024.png[/img] 点击加号、减号实现数字增减 vuex设置： [code="java"] Vu...
使用Css+JavaScript制作网页日历的实践解析
本文主要介绍了如何使用CSS和JavaScript技术来创建网页日历控件，强调了在实际操作中学习JavaScript的重要性。文章详细分析了JavaScript中的Date对象及其常用的方法和属性，以及如何结合CSS来实现动态效果。同时，还...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值