집 > 기사 > 웹 프론트엔드 > 자바스크립트를 사용하여 연간 달력을 만드는 방법

자바스크립트를 사용하여 연간 달력을 만드는 방법

王林원래의: 2021-11-02 16:35:304572검색

자바스크립트로 연간 달력을 만드는 방법: [function Calendar(y){ var w = new Date(y,0).getDay(); var html = '

';for(m=1;m<. ..>

이 기사의 운영 환경: Windows 10 시스템, javascript 1.8.5, thinkpad t480 컴퓨터

웹 페이지에 특정 달의 특정 이벤트를 표시해야 하는 경우 이미 만들어진 클래스 라이브러리가 많이 있는데 어떻게 달력을 직접 개발할 수 있을까요? 다음은 매우 고전적인 달력 구성 요소를 살펴보겠습니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>制作年历</title>
		<style>
			body{text-align:center;}
			.box{margin:0 auto;width:880px;}
			.title{background: #ccc;}
			table{height:200px;width:200px;font-size:12px;text-align:center;float:left;margin:10px;font-family:arial;}
		</style>
		<script src="calendar.js"></script>
		<script>
			var year = parseInt(prompt(&#39;输入年份：&#39;,&#39;2019&#39;));//制作弹窗
			document.write(calendar(year));//调用函数生成指定年份的年历
		</script>
	</head>
	<body>
	</body>
</html>

calendar.js

function calendar(y){
	//获取指定年份1月1日的星期数值
	var w = new Date(y,0).getDay();
	var html = &#39;<div class="box">&#39;;
	
	//拼接每个月份的表格
	for(m=1;m<=12;m++){
		html += &#39;<table>&#39;;
		html += &#39;<tr class="title"><th colspan="7">&#39; + y + &#39;年&#39; +m+&#39; 月</th></tr>&#39;;
		html += &#39;<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>&#39;
		
		//获取每个月份共有多少天
		var max = new Date(y,m,0).getDate();
		
		html += &#39;<tr>&#39;;//开始<tr>标签
		for (d=1;d<=max;d++){
			if(w && d== 1){//如果该月的第1天不是星期日，则填充空白
				html += &#39;<td colspan ="&#39; + w + &#39;"> </td>&#39;;
			}
			html += &#39;<td>&#39; +d+ &#39;</td>&#39;;
			if(w == 6 && d != max){//如果星期六不是该月的最后一天，则换行
				html += &#39;</tr><tr>&#39;;
			}else if(d==max){//该月的最后一天，闭合</tr>标签
				html += &#39;</tr>&#39;;
			}
			w = (w+1>6) ? 0 : w+1;
		}
		html += &#39;</table>&#39;;
	}
	html += &#39;</div>&#39;;
	return html;
}

최종 효과:

자바스크립트를 사용하여 연간 달력을 만드는 방법 추천 학습:

javascript 비디오 튜토리얼

위 내용은 자바스크립트를 사용하여 연간 달력을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript html for date Calendar var JS function

성명：

이전 기사：Node.js에 대해 알아보고 노드의 모듈성에 대해 이야기해 보세요.다음 기사：Node.js에 대해 알아보고 노드의 모듈성에 대해 이야기해 보세요.