<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			.main {

				width: 800px;

				margin: 0 auto;

			}

			.top {

				width: 800px;

				margin: 0 auto;

			}

			#nian {

				width: 100px;

				height: 30px;

				display: block;

			}

			#yue {

				width: 100px;

				height: 30px;

				display: block;

			}

			.float {

				display: block;

				width: 50px;

			}

			.center {

				margin: 0 auto;

				width: 800px;

			}

			#tab tr {

				height: 150px;

			}

			#tab tr td,

			th {

				width: 150px;

			}

		</style>

	</head>

	<body>

		<div class="main">

			<div class="top">

				<select id="nian" class="float" onchange="huan()">

				</select>

				<span class="float">年</span>

				<select id="yue" class="float" onchange="huan()">

				</select>

				<span class="float">月</span>

			</div>

		</div>

		<div class="center">

			<table id="tab" border="" cellspacing="" cellpadding="">

				<tr>

					<th>周日</th>

					<th>周一</th>

					<th>周二</th>

					<th>周三</th>

					<th>周四</th>

					<th>周五</th>

					<th>周六</th>

				</tr>

			</table>

		</div>

		<script type="text/javascript">

			var tab = document.getElementById("tab");

			window.onload = function() {

				var nian = document.getElementById("nian");

				var yue = document.getElementById("yue");

				for (var i = 2019; i >= 1970; i--) {

					var sel = document.createElement("option");

					sel.value = i;

					sel.innerText = i;

					nian.appendChild(sel);

				}

				for (var i = 1; i <= 12; i++) {

					var sel = document.createElement("option");

					sel.value = i;

					sel.innerText = i;

					yue.appendChild(sel);

				}

				huan();

			}

			 function huan() {

				var week = 0;//周几

				var day = 1;//从第一天开始

				var days = 30;//这个月一共有几天

				// try{

				// 	var ziji=document.getElementsByTagName("td")[0];

				// 	ziji.parentElement.parentElement.removeChild(ziji.parentElement);

				// }catch(e){

				// 	//TODO handle the exception

				// }

					try{

						//添加一个add1的类，方便删除

						var dataa=document.getElementsByClassName("add1");

						for(var i=0;i<dataa.length;){

							dataa[0].remove();

						}

					}catch(e){

						//TODO handle the exception

					}

				var nian = document.getElementById("nian").value;

				var yue = document.getElementById("yue").value;

				var date = new Date(nian + "-" + yue + "-1");

				//计算这个月有多少天

				var data = new Date(nian,yue,0);

				 days=data.getDate();

				 // alert(days)

				var newtr = document.createElement("tr");

				newtr.classList.add("add1");

				for (var i = 0; i < date.getDay(); i++) {

					if (week == 7) {

						week = 0;

					}

					var newtd = document.createElement("td");

					newtr.appendChild(newtd);

					week++;

				}

				if (week <= 6) {

					for (; week <= 6; week++, day++) {

						var newtd = document.createElement("td");

						newtd.innerText = day;

						newtd.value = day;

						newtr.appendChild(newtd);

					}

				}

				tab.appendChild(newtr);

				week = 0;

				newtr = document.createElement("tr");

					newtr.classList.add("add1");

				for (; day <= days; day++, week++) {

					if (week == 7) {

						week = 0;

						tab.appendChild(newtr);

						newtr = document.createElement("tr");

							newtr.classList.add("add1");

					}

					var newtd = document.createElement("td");

					newtd.innerText = day;

					newtd.value = day;

					newtr.appendChild(newtd);

				}

				tab.appendChild(newtr);

			}

		</script>

	</body>

</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. [csu1392]YY一下

    题意:给定x,求有多少个10^8以内的数满足这个数乘以x以后,最高位到了最低位.设最高位的数字和剩余长度,列等式推理即可. #pragma comment(linker, "/STACK:1 ...

  2. CSS之未知高度img垂直居中

    测试代码如下:(能够水平居中,通过text-align:center实现) <style>.box{ width:800px;height:600px;border:2px solid # ...

  3. 基于Nettty打造自己的MVC服务器

    最近开始折腾Netty,体验下NIO编程.既然学习了,就要做点东西出来,要不然不容易掌握学到的东西.在Netty的官方demo上都有各种case的sample,打造Http服务器的核心代码就是从Sam ...

  4. Redis学习笔记（十一） 服务器

    Redis服务器负责与多个客户端建立网络通信,处理客户端发送的命令请求,在数据库中保存客户端执行命令所产生的数据,并通过资源管理来维持服务器自身的运转. 命令请求过程 以set命令为例 1.客户端向服 ...

  5. 都0202年了，你还不知道javascript有几种继承方式？

    前言     当面试官问你:你了解js哪些继承方式?es6的class继承是如何实现的?你心中有很清晰的答案吗?如果没有的话,可以通过阅读本文,帮助你更深刻地理解js的所有继承方式.       js ...

  6. 使用基于MVC2模式创建新闻网站

    1.什么是MVC MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示 ...

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

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

  8. 关于mysql的metadata lock

    昨天晚上上线,却发现一个ddl语句长时间没有生效 查processlist, 发现包括ddl语句在内的众多查询提示 “Waiting for table metadata lock” 唯一没有该提示的 ...

  9. charme浏览器 jquery1.9.1min.js 报脚本错误 无jquery.min.map 文件

    http://www.vipaq.com/Article/View/blog/357.html /*! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation ...

  10. Netty 中的消息解析和编解码器

    本篇内容主要梳理一下 Netty 中编解码器的逻辑和编解码器在 Netty 整个链路中的位置. 前面我们在分析 ChannelPipeline 的时候说到入站和出站事件的处理都在 pipeline 中 ...