Rumah > Artikel > hujung hadapan web > 如何用javascript制作年历

如何用javascript制作年历

王林asal: 2021-11-02 16:35:304496semak imbas

用javascript制作年历的方法：【function calendar(y){ var w = new Date(y,0).getDay(); var html = '

';for(m=1;m<...】。

如何用javascript制作年历

本文操作环境：windows10系统、javascript 1.8.5、thinkpad t480电脑。

如果我们需要在网页中显示某个月的具体事项，常常需要使用到日历组件。日历组件通常有着很多现成的类库，那么我们该如何自己动手开发一个日历呢？下面为大家展示了一款非常经典的日历组件，一起来看看吧！

HTML：

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

最终实现效果：

CS4I1RE0SD66T5WGFL2NT)D.png

推荐学习：javascript视频教程

Atas ialah kandungan terperinci 如何用javascript制作年历. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html for date Calendar var JS function

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：认识Node.js，聊聊node的模块化Artikel seterusnya：javascript中有几种数据类型

Artikel berkaitan

Lihat lagi