<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日历</title>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript">
function timehtml(yeargoal,monthgoal){
//月末
var time = new Date(yeargoal,monthgoal,0);
//获得这个月由多少天
console.log(time.getDate());
var date = time.getDate();
var time2 = new Date(yeargoal,monthgoal-1,1);
//获得这个月的一号是星期几
console.log(time2.getDay());
var day = time2.getDay();
//月
console.log(time.getMonth()+1);
var mon = time.getMonth()+1;
//年
console.log(time.getFullYear());
var year = time.getFullYear();
//行标签头
var hangT = "<tr style='heigth:50px;border: solid 1px black'>";
//空的td块
var lieK = "<td style='width:50px;border: solid 1px black'></td>";
var timestr = hangT;
//日历表头
timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"日"+"</td>";
timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"一"+"</td>";
timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"二"+"</td>";
timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"三"+"</td>";
timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"四"+"</td>";
timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"五"+"</td>";
timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"六"+"</td>";
timestr = timestr+"</tr><tr style='heigth:50px;border: solid 1px black'>";
for(var i = 0;i<day;i++){
timestr = timestr+lieK;
}
for(var j = 1;j<=date;j++){
timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+j+"</td>";
if(day==6){
timestr = timestr+"</tr><tr style='heigth:50px;border: solid 1px black'>";
day = -1;
}
day++;
}
if(day>0){
for(var i = day;i<=6;i++){
timestr = timestr+lieK;
}
}
timestr = timestr+"</tr>";
return timestr;
}
$(document).ready(function(){
$("#okay").click(function(){
var yeargoal = $("#ayear").attr("value");
var monthgoal = $("#bmonth").attr("value");
var str = timehtml(yeargoal,monthgoal);
$("table").html(str);
if(day==0){
$("tr:last").remove();
}
});
});
</script>
</head>
<body>
<table style="width:350px; height: 400px;border: solid 1px black;">
<!--
这里将插入字符串timestr的html形式
-->
</table>
<select style="width: 80px;" id="ayear">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>年
<select style="width: 80px;" id="bmonth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月
<button type="button" value="确认跳转" id="okay">确认跳转</button>
</body>
</html>
JQuery实现日历
最新推荐文章于 2024-07-03 03:52:59 发布