原生js日历

Javascript 496849654@qq.com 4年前 (2020-06-16) 989次浏览 0个评论

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生js日历</title>
<style>
td { height:60px; width:60px; text-align:center;background:#FF8040;}
.xingqi td { background:red;}
.bu{ background:#CCC;}
</style>
<script type="text/javascript">
window.onload=function(){
	var oSelect=document.getElementById("select");
	var oSelect2=document.getElementById("select2");
	oSelect.onchange=function(){
		toShow(this.value,oSelect2.value)	
	}
	oSelect2.onchange=function(){
		toShow(oSelect.value,this.value)	
	}
	function toShow(nian,yuan){
		var table=document.getElementById("div1");
		var odate=new Date();
		var Days = new Date(nian,yuan,0).getDate();
		var num=new Date(nian,yuan-1,1).getDay();//判断第一天是星期几
		var num2=new Date(nian,yuan-1,Days).getDay();//判断最后一天是星期几
		var theMonth=new Date().getMonth();
		var str="";
		var inum=0;
		var xqarry=["日","一","二","三","四","五","六"]
		str+="<table>"
		str+="<tr class='xingqi'>"
		for(var i=0;i<7;i++)
		{
			str+="<td>"+xqarry[i]+"</td>"	
		}
		str+="</tr>";
		for(var i=0;i<num;i++){
			str+="<td class='bu'></td>";
			inum++;	
		}
		for(var i=1;i<Days+1;i++)
		{
			inum++;
			str+="<td>"+i+"</td>";
			if(inum%7==0)
			{
				str+="</tr>";
			}
			
		}
		for(var i=0;i<6-num2;i++){
			str+="<td class='bu'></td>";
			inum++;	
		}
		
		str+="</table>"
		table.innerHTML=str; 
	}
	toShow(oSelect.value,oSelect2.value);
}
</script>
</head>

<body>
<select id="select">
	<option>2017</option>
	<option>2018</option>
	<option>2019</option>
	<option selected>2020</option>
    <option>2021</option>
    <option>2022</option>
    <option>2023</option>
</select>
<select id="select2">
	<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 selected>11</option>
    <option>12</option>
</select>
<div id="div1"></div>
</body>
</html>


css315 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:原生js日历
喜欢 (4)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到