一、效果及功能说明
模仿good日历自己来完成一个日历的所有效果
二、我的想法
1、首先是要获得年月日和星期几然后在到需要显示的地方显示出来
2、通过每个方法来获得年 月 日 和星期几但是星期几是需要-1才能获得正常星期几
3、将p标签加入到方法里面页面就值有4个标签两个div两个input
4、通过循环来获得每天和每个星期都不一样
5、通过循环让星期天以后在再次进行循环获得新的一周的星期数
三、效果图
四、代码
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
margin:0;
padding:0px;
}
body{
font-family:Microsoft YaHei;
}
.date p{
float:left;
margin-top: 20px;
margin-left:5px;
}
.button{
float:left;
margin-top: 20px;
margin-left:40px;
width:100%;
}
#age{
float:left;
width:100%;
}
</style>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
var time = new Date();
//定义总的时间
var age = '<p id="age">' + time.getFullYear() + '年' + '</p>';
//定义年份
var ar = new Array();
//定义星期数组
ar[0] = "星期一";
ar[1] = "星期二";
ar[2] = "星期三";
ar[3] = "星期四";
ar[4] = "星期五";
ar[5] = "星期六";
ar[6] = "星期天";
//里面放7个星期
$('#date').append(age);
//直接写入年份
for( var i=0; i<7; i++)
//循环7次
{
var month ='<p id="month">' + [ time.getMonth() + 1] + '月' + '</p>' ;
//获得月份占时不会出现月份的变动
var sky = '<p id="sky">' + [time.getDate() + i] + '号' + '</p>';
//获得天数 这个就在一直用i来循环
var week = '<p id="week">' + ar[time.getDate() + 2 + i] + '</p>';
//获得星期 让星期循环起来
if(ar[time.getDay()-1 + i] == ar[7])
//一个判断当星期循环到成到ar[7]的时候
{
week ='<p id="week">' + ar[i-2]+ '</p>';
//当week从新开始一个循环
}
$('#date').append(month);
$('#date').append(sky);
$('#date').append(week);
//写入div里
}
});
</script>
</head>
<body>
<div id="date" class="date">
</div>
<div class="button">
<input id="add-time" type="button" value="后星期"/>
<input id="reduce-time" type="button" value="前星期"/>
</div>
</body>
</html>