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>

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • .net 调用java WebService简单教程

    .net 调用java WebService简单教程java滴WebService配置比较复杂tomcat+jdk+cxf+spring+(strtus)看你心情吧==首先·创建一个··WebProject把cxf里面的lib再再里面的库复制到你的工程下···我java菜吖··不知道哪些必须滴···懒人全都放进去额接着开始写代码啦··packagecom.ws;importjavax.jws.WebService;@WebServicepublicinterfaceIHello{ publicStringHelloWord(

    2022年7月14日
    18
  • 华为pimsm组播配置_华为m6卡槽

    华为pimsm组播配置_华为m6卡槽当你想要放弃了,一定要想想那些睡得比你晚、起的比你早、跑得比你卖力、天赋比你还高的牛人,他们早已在晨光中,跑向那个你永远只能眺望的远方。—马云文章目录一、组播地址划分二、拓扑三、基本配置四、PIM-SM的RPT共享树构建五、PIM六、PIM-SM的SPT七、PIM-SM基本概述PIM-SM(ProtocolIndependentMulticast-SparseMode)称为协议无关组播-稀疏模式。属于稀疏模式的组播

    2022年9月23日
    3
  • vue页面缓存问题_vue项目自动打开浏览器设置

    vue页面缓存问题_vue项目自动打开浏览器设置目录1.什么是浏览器缓存2.浏览器缓存类型:3.浏览器缓存的优势与劣势:4.浏览器缓存机制5.如何清除浏览器缓存在代码更新发布后,都会要求运营人员在访问网址时清除下本地缓存,防止万一掉坑那问题就来了:每次清缓存很麻烦,怎样就不需要他们每次去手动清缓存呢?1.什么是浏览器缓存浏览器缓存(BrowserCaching)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页

    2022年10月20日
    2
  • 数据仓库常见建模方法与建模实例演示[通俗易懂]

    数据仓库常见建模方法与建模实例演示[通俗易懂]1.数据仓库建模的目的?为什么要进行数据仓库建模?大数据的数仓建模是通过建模的方法更好的组织、存储数据,以便在性能、成本、效率和数据质量之间找到最佳平衡点。一般主要从下面四点考虑访问性能:能够快速查询所需的数据,减少数据I/O 数据成本:减少不必要的数据冗余,实现计算结果数据复用,降低大数据系统中的存储成本和计算成本 使用效率:改善用户应用体验,提高使用数据的效率 数据质量…

    2022年9月23日
    3
  • 反射之invoke方法

    反射之invoke方法当获得类对应的Class对象后,可以通过getMethods()方法得到全部方法——返回Method数组,或者getMethod()方法来获取指定方法——Method对象。可以通过Method对象的invoke()方法来调用它对应的方法。Objectinvoke(Objectobj,Object…args):obj是执行该方法的Class对象,args是执行该方法时传入的实参。

    2022年5月20日
    39

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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