JavaScript简单方法总结--写一个日历控件

最新推荐文章于 2020-04-18 20:27:32 发布

十五i

最新推荐文章于 2020-04-18 20:27:32 发布

阅读量269

点赞数

分类专栏： js简单自定义方法、预定义方法积累文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_44412779/article/details/99201957

版权

js简单自定义方法、预定义方法积累专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.写好html的输入年月日的input标签，写好相对应的css;
2.编写js:
->获取input标签中的value值。
->获取一个月第一天是星期几（getDay() 方法可返回一周（0~6）的某一天的数字。注意：星期天为 0, 星期一为 1, 以此类推。）。
->获取下一个月的第一天是周几（setDate(0)）。
->获取一个月的最后一天是周几，算出这一个月有几天。（getDate()）
->打印日期：注意这个格式一些问题

		<style type="text/css">
			body{
				padding-left:50px;
				padding-top:50px;
			}
			*{
				margin:0px;
				padding:0px;
			}
			#div1{
				border:1px solid red;
				width:230px;
				/*height:200px;*/
				text-align: center;
			}
			h5{
				text-align: center;
				line-height: 30px;
				height: 30px;
				font-weight: 400;
				font-size:20px;
			}
			span:not(.c1){
				display: inline-block;
				width:30px;
				height: 25px;
				line-height: 25px;
				border:1px solid red;
				text-align: center;
			}
			h5{
				position: relative;
			}
			h5 i{
				position: absolute;
				top:0px;
			}
			h5 i:first-child{
				left:0px;
			}
			h5 i:last-child{
				right:0px;
			}
		</style>
		<script type="text/javascript">
			function fn(){
				var year = document.getElementById("year").value;
				var month = document.getElementById("month").value;
				getCurrentMonth(year,month);
			}
			function getCurrentMonth(year,month){
				var spaceNum=42;
				var count=0;
				var result="";
				//定义当月的第一天
				var currentMonth = new Date(year,month-1,1);
				var oneWeek = currentMonth.getDay();
				console.log(oneWeek);
				document.getElementById("spanyear").innerHTML=currentMonth.getFullYear();
				document.getElementById("spanmonth").innerHTML=currentMonth.getMonth()+1;
				//取得当月最后一天
				//取得下个月第一天，setDate(0)
				var nextMonth = new Date(year,month,1);
				nextMonth.setDate(0);
				//最后一天的week
				var lastWeek = nextMonth.getDay();
				//取得当月最后一天
				var lastDay = nextMonth.getDate();
				console.log(lastDay);
				//第一个循环打印1前面的空格
				if(oneWeek==0){
					oneWeek=7;
				}
				for(var i=1;i<=oneWeek;i++){
					count++;
					if(i==7){
						result+="<span>&nbsp;</span><br/>";
					}else{
						result+="<span>&nbsp;</span>";
					}
				}
				//第二个循环从1循环当前最后一天
				for(var i=1;i<=lastDay;i++){
					count++;
					var tempMonth = new Date(year,month-1,i);
					var week = tempMonth.getDay();
					if(week==6){
						result+="<span>"+i+"</span><br/>";	
					}else{
						result+="<span>"+i+"</span>";
					}
				}
				//一共42格子，减去1前面的空格减去1-最后一天
				for(var i=1;i<=spaceNum-count;i++){
					if(lastWeek+i==6){
						result+="<span>&nbsp;</span><br/>";
					}else{
						result+="<span>&nbsp;</span>";
					}
				}
				document.getElementById("div2").innerHTML=result;
				return currentMonth;
			}
			function init(){
				fn();
			}
			function getNextMonth(){
				var year = document.getElementById("year").value;
				var month = document.getElementById("month").value;
				var currentMonth = getCurrentMonth(year,parseInt(month)+1);
				document.getElementById("month").value=currentMonth.getMonth()+1;
				document.getElementById("year").value=currentMonth.getFullYear();
			}
			function getPrevMonth(){
				var year = document.getElementById("year").value;
				var month = document.getElementById("month").value;
				var currentMonth = getCurrentMonth(year,month-1);
				document.getElementById("month").value=currentMonth.getMonth()+1;
				document.getElementById("year").value=currentMonth.getFullYear();
			}
		</script>
	</head>
	<body onload="init()">
		年：<input type="text" id="year" value="2019"/><br />
		月：<input type="text" id="month" value="8"/><br />
		<input type="button" value="产生日历" onclick="fn1()"/>
		<div id="div1">
			<h5 ><i class="iconfont icon iconzuojiantoushixinxiao" onclick="getPrevMonth()"></i><span id="spanyear" class="c1"></span>年<span id="spanmonth" class="c1"></span>月<i class="iconfont icon iconsanjiaoleft" onclick="getNextMonth()"></i></h5>
			<span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
			<div id="div2">
			</div>
		</div>
	</body>
</html>

在这里插入图片描述