1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		<style type="text/css">
  7. 			.main {
  8. 				width: 800px;
  9. 				margin: 0 auto;
  11. 			}
  13. 			.top {
  14. 				width: 800px;
  15. 				margin: 0 auto;
  16. 			}
  18. 			#nian {
  19. 				width: 100px;
  20. 				height: 30px;
  21. 				display: block;
  22. 			}
  24. 			#yue {
  25. 				width: 100px;
  26. 				height: 30px;
  27. 				display: block;
  28. 			}
  30. 			.float {
  32. 				display: block;
  33. 				width: 50px;
  34. 			}
  36. 			.center {
  38. 				margin: 0 auto;
  39. 				width: 800px;
  40. 			}
  42. 			#tab tr {
  43. 				height: 150px;
  45. 			}
  47. 			#tab tr td,
  48. 			th {
  49. 				width: 150px;
  50. 			}
  51. 		</style>
  52. 	</head>
  53. 	<body>
  54. 		<div class="main">
  55. 			<div class="top">
  56. 				<select id="nian" class="float" onchange="huan()">
  58. 				</select>
  59. 				<span class="float">年</span>
  60. 				<select id="yue" class="float" onchange="huan()">
  62. 				</select>
  63. 				<span class="float">月</span>
  64. 			</div>
  66. 		</div>
  67. 		<div class="center">
  68. 			<table id="tab" border="" cellspacing="" cellpadding="">
  69. 				<tr>
  70. 					<th>周日</th>
  71. 					<th>周一</th>
  72. 					<th>周二</th>
  73. 					<th>周三</th>
  74. 					<th>周四</th>
  75. 					<th>周五</th>
  76. 					<th>周六</th>
  77. 				</tr>
  78. 			</table>
  79. 		</div>
  80. 		<script type="text/javascript">
  82. 			var tab = document.getElementById("tab");
  83. 			window.onload = function() {
  84. 				var nian = document.getElementById("nian");
  85. 				var yue = document.getElementById("yue");
  86. 				for (var i = 2019; i >= 1970; i--) {
  87. 					var sel = document.createElement("option");
  88. 					sel.value = i;
  89. 					sel.innerText = i;
  90. 					nian.appendChild(sel);
  91. 				}
  92. 				for (var i = 1; i <= 12; i++) {
  93. 					var sel = document.createElement("option");
  94. 					sel.value = i;
  95. 					sel.innerText = i;
  96. 					yue.appendChild(sel);
  97. 				}
  98. 				huan();
  99. 			}
  101. 			 function huan() {
  102. 				var week = 0;//周几
  103. 				var day = 1;//从第一天开始
  104. 				var days = 30;//这个月一共有几天
  105. 				// try{
  106. 				// 	var ziji=document.getElementsByTagName("td")[0];
  107. 				// 	ziji.parentElement.parentElement.removeChild(ziji.parentElement);
  109. 				// }catch(e){
  110. 				// 	//TODO handle the exception
  111. 				// }
  112. 					try{
  113. 						//添加一个add1的类，方便删除
  114. 						var dataa=document.getElementsByClassName("add1");
  115. 						for(var i=0;i<dataa.length;){
  116. 							dataa[0].remove();
  117. 						}
  118. 					}catch(e){
  119. 						//TODO handle the exception
  121. 					}
  123. 				var nian = document.getElementById("nian").value;
  124. 				var yue = document.getElementById("yue").value;
  125. 				var date = new Date(nian + "-" + yue + "-1");
  126. 				//计算这个月有多少天
  127. 				var data = new Date(nian,yue,0);
  128. 				 days=data.getDate();
  129. 				 // alert(days)
  131. 				var newtr = document.createElement("tr");
  132. 				newtr.classList.add("add1");
  133. 				for (var i = 0; i < date.getDay(); i++) {
  134. 					if (week == 7) {
  135. 						week = 0;
  136. 					}
  137. 					var newtd = document.createElement("td");
  139. 					newtr.appendChild(newtd);
  140. 					week++;
  142. 				}
  143. 				if (week <= 6) {
  144. 					for (; week <= 6; week++, day++) {
  145. 						var newtd = document.createElement("td");
  146. 						newtd.innerText = day;
  147. 						newtd.value = day;
  148. 						newtr.appendChild(newtd);
  150. 					}
  151. 				}
  152. 				tab.appendChild(newtr);
  153. 				week = 0;
  154. 				newtr = document.createElement("tr");
  155. 					newtr.classList.add("add1");
  156. 				for (; day <= days; day++, week++) {
  157. 					if (week == 7) {
  158. 						week = 0;
  159. 						tab.appendChild(newtr);
  160. 						newtr = document.createElement("tr");
  161. 							newtr.classList.add("add1");
  162. 					}
  163. 					var newtd = document.createElement("td");
  164. 					newtd.innerText = day;
  165. 					newtd.value = day;
  166. 					newtr.appendChild(newtd);
  167. 				}
  168. 				tab.appendChild(newtr);
  169. 			}
  170. 		</script>
  171. 	</body>
  172. </html>

Javascript实现万年历（日历表）的更多相关文章

  1. Java万年历，输入年月获取该年月日历表

    //输入年份和月份,打印出这个月的日历表 /* 1.1900年1月1日是星期一 2.计算输入的年份距离1900年有多少天再计算当年1月1日距这个月有多少天 1) 3.总天数%7得出从星期几开始 注:计 ...

  2. php万年历

    最近学习php循环.日期显示.GET方式请求,进而实现了一个小程序. 直接上代码: <?php header("Content-type:text/html; charset=UTF- ...

  3. Javascript学习笔记1 javascript的特点

    ..对于网页而言,Javascript无处不在,对于英语不好的人它简直是噩梦般的存在,但形式所逼,今天开始着手学习!希望自己能坚持下去.从什么地方着手,我的目标是从大处着眼,从应用着眼,不抠细节,反正 ...

  4. （转载）javascript经典例子

    (转载)http://www.blogjava.net/hadeslee/archive/2007/11/24/161778.html 一.验证类1.数字验证内1.1 整数1.2 大于0的整数 (用于 ...

  5. js万年历，麻雀虽小五脏俱全，由原生js编写

    对于前端来说,我们可能见到最多的就是各种各样的框架,各种各样的插件了,有各种各样的功能,比如轮播啊,日历啊,给我们提供了很大的方便,但是呢?我们在用别人这些写好的插件,框架的时候,有没有试着问一问自己 ...

  6. 万年历(hao123)代码

    网上有很多类似的代码,比如网站:hao123,IP138.日梭万年历网络版 等等,不过日梭万年历相对比较详细,也可以看看另外一篇文章的介绍: 日梭万年历网络版:http://www.cnblogs.c ...

  7. javascript时钟代码 DEMO-002

    转载自:http://www.cnblogs.com/Mygirl/archive/2012/03/30/2425832.html 正常时间显示 复制代码 <SCRIPT language=ja ...

  8. javascript实用例子

    js学习笔记,别错过!很有用的. /////////////////////////////////////////////////////////////////////////////////// ...

  9. js中的经典案例--简易万年历

    js中的经典案例--简易万年历 html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

随机推荐

  1. JDBC14 ORM03 JavaBean封装

    Javabean对象封装一条信息(推荐) 让JavaBean的属性名和类型尽量和数据库保持一致 一条记录对应一个对象,将这些查询到的对象放到容器中(List) 表信息如下 List封装多条信息 Con ...

  2. [whu1564]后缀数组

    http://acm.whu.edu.cn/land/problem/detail?problem_id=1564 思路:先把串复制一遍,在末尾补个标记,后缀数组跑一下,扫一遍就ok了(过滤后缀在后半 ...

  3. java 实现仿照微信抢红包算法，实测结果基本和微信吻合，附demo

    实现拼手气红包算法,有以下几个需要注意的地方: 抢红包的期望收益应与先后顺序无关 保证每个用户至少能抢到一个预设的最小金额,人民币红包设置的最小金额一般是0.01元,如果需要发其他货币类型的红包,比如 ...

  4. Docker & k8s 系列二：本机k8s环境搭建

    本篇将会讲解k8s是什么?本机k8s环境搭建,部署一个pod并演示几个kubectl命令,k8s dashboard安装. k8s是什么 k8s是kubernetes的简写,它是一个全新的基于容器技术 ...

  5. c# 贪吃蛇小游戏

    ------------恢复内容开始------------ 新手学习c# 在博客园上看到后自己模仿打出来的第一个程序  开心,纪念一下 bean :食物类 block :蛇块类 snake :蛇类 ...

  6. 【雕爷学编程】Arduino动手做（5）---热敏温度传感器模块

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器模块,依照实践(动手试试)出真知的理念,以学习和交流为目的,这里准备逐 ...

  7. nginx配置之站点服务请求功能配置

    站点服务请求功能配置:html/ nginx.conf中的http{}中的server{}: server { listen 85; server_name localhost; #charset k ...

  8. 利用Python科学计算处理物理问题（和物理告个别）

    背景: 2019年初由于尚未学习量子力学相关知识,所以处于自学阶段.浅显的学习了曾谨言的量子力学一卷和格里菲斯编写的量子力学教材.注重将量子力学的一些基本概念了解并理解.同时老师向我们推荐了Quant ...

  9. 王艳 201771010127《面向对象程序设计（java）》第二周学习总结

     王艳 201771010127<面向对象程序设计(java)>第二周学习总结 第一部分:理论知识学习部分 3.1:基本概念. 1)标识符:标识符由字母.数字.美元符号以及下划线组成.且第 ...

  10. SpringBoot_自动装配

    SpringBoot SrpingBoot 给人的第一印象就是 简洁,易上手.它是自 Spring 而来为了简化我们开发的,而经历过了 Spring 中繁琐的配置文件,我确实很好奇它到底是怎么帮我们把 ...