jQuery google日历练习-20130802

最新推荐文章于 2013-09-24 00:14:50 发布

xjwolaile

最新推荐文章于 2013-09-24 00:14:50 发布

阅读量117

点赞数

分类专栏：前端技术 jQuery 学习文章标签： Array Date append

本文链接：https://blog.csdn.net/xjwolaile/article/details/84465429

版权

学习同时被 3 个专栏收录

219 篇文章 0 订阅

订阅专栏

前端技术

188 篇文章 0 订阅

订阅专栏

jQuery

63 篇文章 0 订阅

订阅专栏

一、效果及功能说明

模仿google日历自己来完成一个日历的所有效果

二、我的想法

1、首先是要获得年月日和星期几然后在到需要显示的地方显示出来

2、通过每个方法来获得年月日和星期几但是星期几是需要-1才能获得正常星期几

3、将p标签加入到方法里面页面就值有4个标签两个div两个input

4、通过循环来获得每天和每个星期都不一样

5、通过循环让星期天以后在再次进行循环获得新的一周的星期数

三、效果图

[img]http://dl2.iteye.com/upload/attachment/0087/7998/7cd6c156-d09f-3dcf-a9ab-6eae29e08f7e.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="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>