js生成日历(php编写一个月的日历)

<!DOCTYPEhtml><html> <head> <metacharset=”utf-8″> <title></title> <styletype=”text/css”> .main{ width:800px; margin:0auto; } …

大家好,又见面了,我是你们的朋友全栈君。

在这里插入图片描述

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/125975.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 欧拉函数及其证明_欧拉函数证明题

    欧拉函数及其证明_欧拉函数证明题请思考以下问题:  任意给定正整数n,请问在小于等于n的正整数之中,有多少个与n构成互质关系?(比如,在1到8之中,有多少个数与8构成互质关系?)计算这个值的方法就叫做欧拉函数,以φ(n)表示。在1到8之中,与8形成互质关系的是1、3、5、7,所以φ(n)=4。φ(n)的计算方法并不复杂,但是为了得到最后那个公式,需要一步步讨论。第一种情况如果n=1,则φ(1

  • nginx转发其他网站_nginx搭建网站

    nginx转发其他网站_nginx搭建网站方式一location=/pospal-api2/openapi/v1/orderOpenApi/addOnLineOrder{proxy_passhttps://openapi5.pospal.cn/openinterface/orderOpenApi/addOnLineOrder;}方式二

    2022年10月18日
  • websocket token认证(websocket协议格式)

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/mazaiting/article/details/78129542 JavaOkHttp使用本文使用eclipse编辑器,gradle依赖j…

  • getopt函数[通俗易懂]

    getopt函数[通俗易懂]getopt函数函数说明getopt–解析命令的可选项getopt只是一个简单的解析命令可选项的函数,只能进行简单的格式命令解析,格式如下:对短选项的解析:cmd[-a][-b]对短选项及短选项的参数解析:cmd[-aa_argument][-bb_argument]选项a的参数也是可选的情况解析:cmd[-a[a_argument]]函数原型#include&…

  • rj45管脚定义_rj45接口定义,rj45插座引脚定义

    RJ45是布线系统中信息插座(即通信引出端)连接器的一种,连接器由插头(接头、水晶头)和插座(模块)组成,插头有8个凹槽和8个触点。RJ是RegisteredJack的缩写,意思是“注册的插座”。在FCC(美国联邦通信委员会标准和规章)中RJ是描述公用电信网络的接口,计算机网络的RJ45是标准8位模块化接口的俗称。rj45插座引脚定义:常见的RJ45接口有两类:用于以太网网卡、路由器以太网接口等…

  • 成为java架构师需要具备那些技能?

    成为java架构师需要具备那些技能?架构师定义百度百科,系统架构师是一个既需要掌控整体又需要洞悉局部瓶颈并依据具体的业务场景给出解决方案的团队领导型人物。架构师工作职能软件架构师在整个软件开发过程中都起着重要的作用,并随着开发进程的推进而其职责或关注点不断地变化,在需求阶段,软件架构师主要负责理解和管理非功能性系统需求,比如软件的可维护性、性能、复用性、可靠性、有效性和可测试性等等,此外,架构师还要经常审查客户及市场人员

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号