一、效果及功能说明
模仿google日历自己来完成一个日历的所有效果
二、我的想法
1、首先是要获得年月日和星期几然后在到需要显示的地方显示出来
2、通过每个方法来获得年 月 日 和星期几但是星期几是需要-1才能获得正常星期几
3、将p标签加入到方法里面页面就值有4个标签两个div两个input
4、通过循环来获得每天和每个星期都不一样(有点问题循环到最后没做出怎么返回)
三、效果图
[img]http://dl2.iteye.com/upload/attachment/0087/7521/d7a11f9c-fc10-34d5-9e66-838a7cab6690.jpg[/img]
四、代码
模仿google日历自己来完成一个日历的所有效果
二、我的想法
1、首先是要获得年月日和星期几然后在到需要显示的地方显示出来
2、通过每个方法来获得年 月 日 和星期几但是星期几是需要-1才能获得正常星期几
3、将p标签加入到方法里面页面就值有4个标签两个div两个input
4、通过循环来获得每天和每个星期都不一样(有点问题循环到最后没做出怎么返回)
三、效果图
[img]http://dl2.iteye.com/upload/attachment/0087/7521/d7a11f9c-fc10-34d5-9e66-838a7cab6690.jpg[/img]
四、代码
<!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="js/jquery-1.8.3.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(i=0; i<7; i++)
//循环7次
{
var d = ar[time.getDay()-1 + i];
//获得星期 让星期循环起来
var month ='<p id="month">' + [ time.getMonth() + 1] + '月' + '</p>' ;
//获得月份占时不会出现月份的变动
var sky = '<p id="sky">' + [time.getDate() + i] + '号' + '</p>';
//获得天数 这个就在一直用i来循环
var week = '<p id="week">' + [d] + '</p>';
//获得星期
$('#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>