jQuery google日历练习-20130820

最新推荐文章于 2016-04-26 15:55:00 发布

xjwolaile

最新推荐文章于 2016-04-26 15:55:00 发布

阅读量91

点赞数

分类专栏：前端技术 jQuery 学习文章标签： javascript ViewUI

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

版权

学习同时被 3 个专栏收录

219 篇文章 0 订阅

订阅专栏

前端技术

188 篇文章 0 订阅

订阅专栏

jQuery

63 篇文章 0 订阅

订阅专栏

一、效果及功能说明

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

二、我的想法

通过jquery来直接写入页面表格不需要在body里面写用循环直接在循环出来

现在已经循环出来24个小时和所有内容表格

但是内容表格还无法全部的分清楚，原本是上下两个不同的时间点但是现在会上半部分的全部显示完以后下半部分才显示出来

还有的就是浮动框还没做出来，和点击的事件获得每个半小时的时间和日期，还有上面的具体时间还没做

因为有问题所有昨天好好的查了jquery的创建方法在上网一般有三个方法只有前面一个方法有用后再来早上的时候总算才在jquery官方网站上面找到一个可以创建方法的例子解决了循环重复定义的问题但是在这里还是有循环的表格可以出现但是时间还拿不到

三、效果图

[img]http://dl2.iteye.com/upload/attachment/0088/4433/1e1c54a5-59a0-31a0-b3de-cead9a387135.jpg[/img]

四、代码


<!DOCTYPE html>

<head>
<meta charset="UTF-8">
<style type="text/css">
* { 
	margin:0;
	padding:0px;
} 

body{
	font-family:Microsoft YaHei;
}

th{
	font-weight:normal;
	overflow:hidden;
	padding-top: 10px;
}

.p-zi p{
	float:left;
	margin-right: 20px;
	margin-top: 3px;
}


.head-tl td{
	float:left;	
	width:140px;
	height:20px;
	border:1px solid #C4E1FF; 
}

.body-tl{
	float:left;
	width: 140px;
	margin-top: 20px;
}

.tl-time th{
	float:left;
	width:140px;
	height:35px;
	border:1px solid #C4E1FF; 
}

.tl-time td{
	float:left;
	width:140px;
	height:20px;
	border:1px solid #C4E1FF;
}

.body-content{
	float:left;
	margin-top: 20px;
	width: 991px;
}

.body-time td{
	float:left;
	width:140px;
	height:23px;
}

.below{
	border-top: 1px solid #C4E1FF;
	border-right: 1px solid #C4E1FF;
	border-bottom: 1px dashed #C4E1FF;
}

.top{
	margin-top: -2px;
	border-right: 1px solid #C4E1FF;
	border-bottom: 1px solid #C4E1FF;
}

	</style>
	<script language="javascript" type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<script language="javascript" type="text/javascript">
	var time ={
		timeleft: function(){
			//通过定义函数把循环放到body的里面就不会出现重复循环定义的问题
			var titleText = new Array("上午12点","上午1点","上午2点","上午3点","上午4点","上午5点","上午6点","上午7点","上午8点","上午9点","上午10点","上午11点","下午12点","下午1点","下午2点","下午3点","下午4点","下午5点","下午6点","下午7点","下午8点","下午9点","下午10点","下午11点");
			//把24小时写到页面上将循环让进入显示出不同的时间
			var ee = '<th>' + titleText + '</th>';
			$("#tl-time tr").append(ee);
			//循环24小时右边的内容框分上和下管理不同的半小时x	
		}
	};
	//通过jquery来创建方法 在把方法放到下面body里面进行循环来获得
	var obj = {
  		ss: function() {
    		for(z=0; z<7; z++)
			{
				var xx = '<td class="below">' + '</td>';
				$("#body-time tr").append(xx);
			}

  		}
	};

	var tp ={
		gg: function(){
			for(k=0; k<7; k++)
			{
				var hh ='<td class="top">'+'</td>';
				$("#body-time tr").append(hh);
			}
		}
	}
	</script>
</head>

<body>
<div class="p-zi">
	<p>GMT+08</p>
</div>
<div class="all-day-long">
	<table class="head-tl">
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</div>
<div class="body-tl">
	<table class="tl-time">
		<script language="javascript" type="text/javascript">
			for(i=0; i<24; i++)
			{
				document.write("<tr >");
				$("#tl-time tr").append(jQery.proxy(time,"timeleft"));
				document.write("</tr>");
			}
		</script>
	</table>
</div>
<div class="body-content">
	<table id="body-time" class="body-time">
	<script language="javascript" type="text/javascript">
	for(j=0; j<12; j++)
	{
		document.write('<tr>');
		$("#body-time tr").append(jQuery.proxy( obj, "ss" ));
		document.write('</tr><tr>');
		$("#body-time tr").append(jQuery.proxy( tp, "gg" ));
		document.write('</tr>');
	}
	</script>
	</table>
</div>
</body>
</html>