jQuery google日历练习-20130806 -

xjwolaile

浏览: 342007 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery google日历练习-20130806

博客分类：

jQuery
学习
前端技术

getFullYear append getMonth getDate each

一、效果及功能说明

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

二、我的想法

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

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

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

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

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

6、找到了另一个星期的计算方法前面的办法要人工每天去修改星期的值才能显示出正确的星期

7、通过点击按钮让全部的日期和星期先进或者后退一天

8、现在能做到跟换一次全天的日期和星期但是在点添加就失去了效果点减少只能减少一天的时间
（应该是在循环上还有一些问题所在）

三、效果图

四、代码

<!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;
	height: 21px;
}

.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>';
			//定义年份
			$('#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">'+ '星期' + [time.getDay() + i] + '</p>';
				//通过直接调用方法好获得准确的星期几
				$("#add-time").click(function()
				{
					$("#sky").each(function()
					{
						$("#sky").html(time.getDate() + 1 + '号');
						//点击添加天数添加数量为一周
					});	
					$("#week").each(function()
					{
						$("#week").html('星期' +[time.getDay() + 1]);
						//点击添加星期添加数量为一周
					});
					//alert(time.getDate() + 1);
				});
				
				$("#reduce-time").click(function()
				{
					$("#sky").each(function()
					{
						$("#sky").html(time.getDate() - 1 + '号');
						//点击减少天数添加数量为一周
					});	
					$("#week").each(function()
					{
						$("#week").html('星期' +[time.getDay() - 1]);
						//点击减少星期添加数量为一周
					});
				});
				if(time.getDay() + i == 0 && 7)
				{
					week = '<p id="week">'+ '星期天' + '</p>';
				}
				//在这里星期天是0来代表的时候需要跟换一下把0换成或者是7星期天
				$('#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>

查看图片附件

分享到：

jQuery google日历练习-20130819 | jQuery google日历练习-20130805

2013-08-07 00:50
浏览 826
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery google日历练习-20130806

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery google日历练习-20130806

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>