算法习题整理JavaScript实现（二）——日历

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_34378922

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量117

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/wangch5453/blog/680152

本文介绍了一个使用JavaScript实现的日历插件，该插件可以根据用户选择的不同年份和月份动态展示对应的日历视图，并考虑了不同月份的天数变化及闰年情况。

2019独角兽企业重金招聘Python工程师标准>>>

/*返回选择的年或月*/
function seldate(id){
	var arr=id.querySelectorAll("option");
	for(var i=0;i<arr.length;i++){
		if(arr[i].selected){
			return arr[i].innerHTML;		
		}
	}
}
/*返回每个月的天数*/
function monthDays(year,mon){
	var arr=[];
	var flag=year%4==0&&year%100!=0||year%400==0?1:0;//闰年返回1
	//console.log(flag);
	for(var i=1;i<31;i++){
		arr.push(i);
	}
	if(flag&&mon==2){
		arr.pop();
		//console.log(arr);
	}else if(!flag&&mon==2){
		arr=arr.slice(0,-2);
		//console.log(arr);
	}else if(mon<8&&mon%2!=0||month>=8&&mon%2==0){
		arr.push(31);
	}
	return arr;
}
/*判断选中的月份第一天的星期*/
function judgeFirDay(year,mon){
	mon=mon<10?"0"+mon:mon;
	console.log(""+year+"-"+mon+"-01");
	var datStr=""+year+"-"+mon+"-01";
	var date=new Date(datStr);
	var day=date.getDay();
	console.log(day);
	return day;
}
function showDate(){
	var selYear=seldate(year);
	var selMon=seldate(month);
	var totalDays=monthDays(selYear,selMon);//数组
	var day=judgeFirDay(selYear,selMon);//星期
	for(var i=0;i<day;i++){//根据1号所在星期在数组前面补满空字符串
		totalDays.unshift("");
	}
	var ROW=6,COL=7;
	//console.log(day);
	if(day==0){//1号星期是周日的情况下在数组前面补满空字符串后在数组后面也要补
		for(var j=0;j<COL;j++){
				totalDays.unshift("");
		}
		for(var j=0,len=ROW*COL-totalDays.length;j<len;j++){
				totalDays.push("");
		}
	}else{//1号如果不是周日则只在数组后面补满空字符串
		for(var j=0,len=ROW*COL-totalDays.length;j<len;j++){
				totalDays.push("");
		}
	}
	var arrRow=[];
	var tbody=document.body.querySelector("#date>tbody");
	tbody.innerHTML="";
	var str="";
	for(var j=0;j<=(ROW-1)*COL;j+=COL){//截取数组分别拼接html
		arrRow=totalDays.slice(j,j+COL);
		console.log(arrRow);
		str+="<tr><td>"+String(arrRow.join("</td><td>"))+"</td></tr>";
	}
	//console.log(str);
	tbody.innerHTML=str;
}

<!DOCTYPE html>
<html>
    <head>
        <title>日历</title>
        <meta charset="utf-8" />
        <link rel="Stylesheet" href="exercise02_02.css" />        
        <script type="text/javascript" src="2.js"></script>
		<!-- <style>
			#year option[selected]{
				background-color:red;
			}
		</style> -->
    </head>
    <body>
        年份：
        <select id="year" onchange="showDate();">
            <option>2010</option>
            <option>2011</option>
            <option>2012</option>
            <option>2013</option>
            <option>2014</option>
            <option>2015</option>
            <option>2016</option> 
            <option>2017</option>     
        </select>
        <br />
        月份：
        <select id="month" onchange="showDate();">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>    
        </select>
        <table id="date">
            <thead>
                <tr>
                    <td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>
                </tr>
            </thead>
            <tbody>
                <tr>
				<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
                <tr>
				<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
                <tr>
				<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
                <tr>
				<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
                <tr>
				<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
                <tr>
				<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
				</tr>
            </tbody>
        </table>
    </body>
</html>

#date {
    border-collapse:collapse;
    margin-top:20px;
}
#date thead td {
    border:1px solid #000;
    background-color:#ccc;
    width:80px;
    height:30px;
    text-align:center;
}
#date tbody td {
    border:1px solid #666;
    height:25px;
    text-align:center;
}

转载于:https://my.oschina.net/wangch5453/blog/680152