js日历学习

<!DOCTYPE html>
<html>
<head>
<title>自己写的JS日历，适合学习</title>
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
<div id="calendar">
<p id="title_time"></p>
<table width="100%" height="90%" align="center" style="text-align:center;"><tbody>
<tr><th><span class="pre_d" title="前一月"><<</span> 日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六 <span class="next_d" title="后一月">>></span></th></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>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody></table>
<script type="text/javascript">
jQuery(document).ready(function($){
var myDate = new Date();
function timer(){
$("td").each(function(){
$(this).html("");
});
var year = myDate.getFullYear();//获取完整的年份(4位,1970-????)
var month = myDate.getMonth();//获取当前月份(0-11,0代表1月)
var date = myDate.getDate();//获取当前日(1-31)
var day = myDate.getDay();//获取当前星期X(0-6,0代表星期天)
var num = day-(date%7-1);//1号星期X
$("#title_time").html(year+"年"+(month+1)+"月");
var i=1;
var end;
switch(month){
case 0: end = 31;break;
case 1: if((year%4==0 && year%100!=0)||(year%400==0))end = 29;else end = 28;break;
case 2: end = 31;break;
case 3: end = 30;break;
case 4: end = 31;break;
case 5: end = 30;break;
case 6: end = 31;break;
case 7: end = 31;break;
case 8: end = 30;break;
case 9: end = 31;break;
case 10: end = 30;break;
case 11: end = 31;break;
}
$("tr").eq(i).find("td").eq(num).html(i);
var riqi = null;
$("td").each(function(){
if($(this).parent().index()==1){
if($(this).prev("td").html())
$(this).html(++i);
/*if(i==date)
$(this).css("background-color","red");*/
}
if($(this).parent().index()>1&&i<end){
$(this).html(++i);
}
});
}
timer();
$(".pre_d").click(function(){
var nian = myDate.getFullYear();
var yue = myDate.getMonth();
if(yue==0){
nian--;
yue=12;
}
var ri = "01";
var str = nian+" "+yue+" "+ri;
myDate = new Date(str);
timer();
});
$(".next_d").click(function(){
var nian = myDate.getFullYear();
var yue = myDate.getMonth();
yue+=2;
if(yue==13){
nian++;
yue=1;
}
var ri = "01";
var str = nian+" "+yue+" "+ri;
myDate = new Date(str);
timer();
});
});
</script>
/div>
</body>
</html>

时间： 2024-11-19 10:51:43

js日历学习

js日历学习的相关文章

JS入门学习，写一个时钟~

JS日历控件灵活设置: 精确的时分秒.

根据一篇js日历插件改写的

Vue.js 基础学习

Node.js知识点学习

js数组学习整理

如何使用js日历控件

js入门学习~ 运动应用小例

简洁JS 日历控件支持日期和月份选择