JS实现简单日历

最新推荐文章于 2024-10-11 20:24:23 发布

莫问前程F6

最新推荐文章于 2024-10-11 20:24:23 发布

阅读量684

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_25506089/article/details/103823550

版权

JavaScript 专栏收录该内容

50 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--CSS样式-->
        <style type="text/css">
            *{margin: 0px;padding: 0px;}
            #div{width: 400px;height: 300px;border: 1px solid red;margin: auto;}
            #div div:nth-child(1){display: flex;align-items: center;justify-content: center;}
            #tbcal{border-collapse: collapse;width: 100%;text-align: center;}
            #tbcal tr td{border: 1px solid red;}
        </style>
        <script type="text/javascript">
//            显示日历
        </script>
    </head>
    <body>
        <div id="div">
            <!--定义年月菜单-->
            <div>
                <select id="selyear">
                    <option selected>2020</option>
                </select>&nbsp;年&nbsp;
                <select id="selmonth">
                    <option selected>1</option>
                    <option selected>2</option>
                    <option selected>3</option>
                    <option selected>4</option>
                    <option selected>5</option>
                    <option selected>6</option>
                    <option selected>7</option>
                    <option selected>8</option>
                </select>&nbsp;月&nbsp;
            </div>
            <div>
                <!--定义列表-->
                <table id="tbcal">
                    <tr>
                        <td>周日</td>
                        <td>周一</td>
                        <td>周二</td>
                        <td>周三</td>
                        <td>周四</td>
                        <td>周五</td>
                        <td>周六</td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>

<script type="text/javascript">
show();
document.getElementById("selmonth").onchange = show;
function show(){
//	获取鼠标点击所选择的年月值
	var year=parseInt(document.getElementById("selyear").value);
	var month=parseInt(document.getElementById("selmonth").value);
//	判断是否为闰年,以便确定2月的天数
	var flag=year%4==0&&year%100!=0||year%400==0;
	var dayofmonth=[31,flag?29:28,31,30,31,30,31,31,30,31,30,31];
//	给date赋值,值为所选择的某年某月一号
	var dt=new Date();
	dt.setFullYear(year);
	dt.setMonth(month-1);
	dt.setDate(1);
//	获取date对应周几
	var week=dt.getDay();
//	当月应该打印多少行
	var rows=Math.ceil((dayofmonth[dt.getMonth()]+week)/7);
	console.log(rows);
	var k=0;
//	如果表格中有除表头外的数据,进行数据删除,避免上次月份的数据对下次有影响
	var table=document.getElementById("tbcal");
	while(table.rows.length>1){
		table.deleteRow(1);
	}
//	循环向表格中添加数据，生成日历
	for(var i=0;i<rows;i++){
		var row=table.insertRow(i+1);
		for(var j=0;j<7;j++){
			var cell=row.insertCell(j);
			k++;
			if(k<=week || k>dayofmonth[dt.getMonth()]+week){
				cell.innerHTML="";
			}
			else{
				cell.innerHTML=k-week;
			}
		}
	}
}

</script>