<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="../css/rest.css"/>
<script src="../js/jquery1.7.2.js"></script>
<title>date html</title>
<style>
*{margin:0;padding:0;}
#dateTab{
border-collapse: collapse;
border: none;
width: 100%;
}
#dateTab td,#dateTab th{
padding: 5px;
text-align: center;
border: 4px solid #cccccc;
cusor: default;
}
#dateTab tbody td:hover{
background:blue;
color: #ffffff;
}
#dateBox{
width: 300px;
margin: 20px auto;
}
</style>
<script>
$(function(){
console.log($("#dateTab").html());
createOption($("#month"), 12);
var dateCombox = new dateBox();
$("#search").click(function(e){
var y = $("#year").val();
var m = $("#month").val();
dateCombox.reDraw({
year: y,
month: m
})
})
})
function createOption(box,num){
for(var i=0; i<num; i++){
var option = $("<option>",{"value":i+1,"text":i+1});
box.append(option);
}
}
var dateBox = function(o){
var nowDate = new Date();
this.year = nowDate.getFullYear();
this.month = nowDate.getMonth() +1;
this.date = nowDate.getDate();
this.day = nowDate.getDay();
this.hours = nowDate.getHours();
this.minutes = nowDate.getMinutes();
this.seconds = nowDate.getSeconds();
this.id = "dateBox";
var o = o || {};
for(var key in o){
this[key] = o[key];
}
this.init();
}
dateBox.prototype.reDraw=function(o){
var nowDate = new Date();
this.year = nowDate.getFullYear();
this.month = nowDate.getMonth() +1;
this.date = nowDate.getDate();
this.day = nowDate.getDay();
this.hours = nowDate.getHours();
this.minutes = nowDate.getMinutes();
this.seconds = nowDate.getSeconds();
this.id = "dateTab";
var o = o || {};
for(var key in o){
this[key] = o[key];
}
this.draw();
}
dateBox.prototype.cHead=function(){
var self = this;
var box = $("<div>",{"style":"text-align:center;"});
var prev = $("<a>", {"text":"<", "href":"javascript:;", "style":"float:left;"});
var next = $("<a>", {"text":">", "href":"javascript:;", "style":"float:right;"});
var showMonth = $("<span>",{"text":self.month/1+"月"})
var yearSelect=$("<select>");
prev.bind("click", function(e){
var year = self.year/1;
var month = self.month/1;
if(month == 1){
year = year -1;
month = 12;
yearSelect.val(year);
}else{
month = month -1;
}
self.reDraw({
year: year,
month: month
});
showMonth.html(month+"月");
});
next.bind("click", function(e){
var year = self.year/1;
var month = self.month/1;
if(month == 12){
year = year + 1;
month = 1;
yearSelect.val(year);
}else{
month = month + 1;
}
self.reDraw({
year: year,
month: month
});
showMonth.html(month+"月");
});
yearSelect.bind("change", function(){
var year = $(this).val();
var month = self.month/1;
self.reDraw({
year: year,
month: month
})
})
for(var i=(self.year/1)-10; i<(self.year/1)+10; i++){
var option = $("<option>", {"value":i,"text":i});
yearSelect.append(option);
}
box.append(next, prev, yearSelect,showMonth);
$("#"+self.id).prepend(box);
yearSelect.val(self.year);
}
dateBox.prototype.init=function(){
var self = this;
self.cHead();
self.draw();
}
dateBox.prototype.draw=function(){
var self = this;
var tbody = $("#"+self.id).find("tbody");
var Y = self.year,
M = self.month,
D = self.date,
d = self.day,
m = self.minutes,
h = self.hours,
s = self.seconds;
var day = self.getMonthDay(Y, M);
var html = "<tr>";
var index = 0;
for(var i=0; i<d; i++){
html += "<td> </td>";
index++;
}
for(var i=0; i<day; i++){
if(index%7 == 0){
html += "</tr></tr>";
}
html += "<td>"+(i+1)+"</td>";
index++;
}
for(var i=0; i<7; i++){
if(index%7 == 0){
break;
}
html +="<td>"
index++;
}
html +="</tr>";
tbody.html(html);
}
dateBox.prototype.getMonthDay = function(y, m){
var isLeap = false;
if((y%400 == 0 || y%4 == 0) && y%100 != 0){
isLeap = true;
}
var m = m+"";
switch (m){
case "1":
case "3":
case "5":
case "7":
case "8":
case "10":
case "12":
return 31;
case "4":
case "6":
case "9":
case "11":
return 30;
case "2":
return (isLeap?28:30);
}
}
</script>
</head>
<body>
<div id="dateBox">
<table id="dateTab">
<thead>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
时间： 2024-10-13 09:57:09