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)
上一篇 2022年4月18日 上午9:00
下一篇 2022年4月18日 上午9:00


相关推荐

  • 什么是lamp架构_什么是LAMP

    什么是lamp架构_什么是LAMPLAMP架构介绍LAMP动态网站架构LAMP是指一组通常一起使用来运行动态网站或者服务器的自由软件名称首字母缩写。1、LAMP分别代表什么?L代表服务器操作系统使用LinuxA代表网站服务使用的是Apache软件基金会中的httpd软件M代表网站后台使用的数据库是MySQL数据库P代表网站是使用PHP/Perl/Python等语言开发2、Apache/MySQL/PHP各自有什么作用?2.1Apache(httpd)—–像极了饭店前台作用:提供web服务,

    2022年10月16日
    4
  • lambda表达式pythonlist_python lambda表达式简单用法【转】「建议收藏」

    lambda表达式pythonlist_python lambda表达式简单用法【转】「建议收藏」1、lambda是什么?看个例子:g=lambdax:x+1看一下执行的结果:g(1)>>>2g(2)>>>3当然,你也可以这样使用:lambdax:x+1(1)>>>2可以这样认为,lambda作为一个表达式,定义了一个匿名函数,上例的代码x为入口参数,x+1为函数体,用函数来表示为:1defg(x):2returnx+1非常容易理解,在这里lambda简化了函数定义的书…

    2022年10月17日
    5
  • 白化

    白化白化的目的是去除输入数据的冗余信息 例如 训练数据是图像 由于图像中相邻像素之间具有很强的相关性 因此输入是冗余的 白化的目的就是降低输入的冗余性 输入数据集 经过白化处理后 生成的新数据集满足两个条件 一是特征相关性较低 二是特征具有相同的方差 白化算法的实现过程 第一步操作是 PCA 求出新特征空间中的新坐标 第二步是对新的坐标进行方差归一化操作

    2026年3月19日
    2
  • H2数据库相关介绍「建议收藏」

    H2数据库相关介绍「建议收藏」什么是H2数据库H2是一个开源的嵌入式数据库引擎,采用java语言编写,不受平台的限制,同时H2提供了一个十分方便的web控制台用于操作和管理数据库内容。H2还提供兼容模式,可以兼容一些主流的数据库,因此采用H2作为开发期的数据库非常方便。H2是纯java编写的,源码大小只有1M左右。优点:速度非常快,开源,JDBCAPI嵌入式和服务器模式;内存数据库基于浏览器的Console应用…

    2022年10月12日
    6
  • 常用搜索算法—盲目搜索和启发式搜索

    常用搜索算法—盲目搜索和启发式搜索搜索算法本文主要以一些概念对较为常见的搜索作简单介绍 一 盲目搜索对一个图进行搜索意味着按照某种特定的顺序依次访问其顶点 在所有搜索方式中 广度优先算法和深度优先搜索算法都十分重要 因为它们提供了一套系统地访问图数据结构的方法 我们着重讲解广度优先搜索算法 1 深度优先搜索深度优先搜索算法 简称 DFS 是一种用于遍历或搜索树或图的算法 沿着树的深度遍历树的节点 尽可能深的搜索树的分支 当

    2026年3月19日
    2
  • cordova declare styleable 错误「建议收藏」

    cordova declare styleable 错误「建议收藏」出现ERROR:InFontFamilyFont,unabletofindattribute可以使用cordovapluginaddcordova-plugin-file-opener2cordova-android-support-gradle-release命令安装支持现在版本的插件解决问题

    2022年7月13日
    21

发表回复

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

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