如何用javascript制作年历

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

本文操作环境：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('输入年份：','2019'));
    //制作弹窗			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 = 'div class="box">
    ';
    		//拼接每个月份的表格	for(m=1;
    m=12;
m++){
    		html += 'table>
    ';
    		html += 'tr class="title">
    th colspan="7">
    ' + y + '年' +m+' 月/th>
    /tr>
    ';
    		html += 'tr>
    td>
    日/td>
    td>
    一/td>
    td>
    二/td>
    td>
    三/td>
    td>
    四/td>
    td>
    五/td>
    td>
    六/td>
    /tr>
    '				//获取每个月份共有多少天		var max = new Date(y,m,0).getDate();
    				html += 'tr>
    ';
    //开始tr>
    标签		for (d=1;
    d=max;
d++){
    			if(w &
    &
 d== 1){
    //如果该月的第1天不是星期日，则填充空白				html += 'td colspan ="' + w + '">
     /td>
    ';
			}
    			html += 'td>
    ' +d+ '/td>
    ';
    			if(w == 6 &
    &
 d != max){
    //如果星期六不是该月的最后一天，则换行				html += '/tr>
    tr>
    ';
			}
else if(d==max){
    //该月的最后一天，闭合/tr>
    标签				html += '/tr>
    ';
			}
    			w = (w+1>
    6) ? 0 : w+1;
		}
    		html += '/table>
    ';
	}
    	html += '/div>
    ';
    	return html;
}
    

最终实现效果：

推荐学习：javascript视频教程

以上就是如何用javascript制作年历的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！