jQuery google台历练习-20130819 _Web前端

jQuery google日历练习-20130819
一、效果及功能说明

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

二、我的想法

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

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

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

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

三、效果图

四、代码

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

.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="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script language="javascript" type="text/javascript">
	$(document).ready(function()
	{
		//循环24小时让页面获得不同的时间点
		for(i=0; i<24; i++)
		{
			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小时写到页面上将循环让进入显示出不同的时间
			$("#tl-time").append('<th>' + titleText[i] + '</th>' + '<br />');
		}
		
		//循环24小时右边的内容框分上和下管理不同的半小时
		for(z=0; z<7; z++)
		{
			for(j=0; j<24; j++)
			{
				var ss = '<td class="below">' + '</td>';
				var dd = '<td class="top">' + '</td>';
				$("#below-tr").append(ss);
				$("#top-tr").append(dd);
			}
		}
	});
	
	
	</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">
		<tr id="tl-time">
		</tr>
	</table>
</div>
<div class="body-content">
	<table class="body-time">
		<tr id="below-tr">
		
		</tr>
		<tr id="top-tr">
		
		</tr>
	</table>
</div>
</body>
</html>

1 楼萧远山 1 小时前

1、有个问题，你的变量定义不能放在FOR里
var titleText
这样就循环重复定义了

2、只是画了个壳，今天晚上要看到能向里面添加内容和修改内容