jQuery google日历练习-20130819 -

xjwolaile

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

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery google日历练习-20130819

博客分类：

学习
前端技术
jQuery

append

一、效果及功能说明

模仿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>

查看图片附件

分享到：

jQuery google日历练习-20130820 | jQuery google日历练习-20130806

2013-08-20 08:07
浏览 841
评论(1)
分类:Web前端
查看更多

1 楼萧远山 2013-08-20

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

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

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery google日历练习-20130819

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery google日历练习-20130819

评论

发表评论

相关推荐

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

最近访客更多访客>>