`

jQuery google日历练习-20130822

 
阅读更多
一、效果及功能说明

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

二、我的想法

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

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

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

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


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

今天好好的重新的看了官方的google日历里面看到不是全部都是用jquery写的大部分都是js这个让有了很大的启发还有在以前我总是想着日期的问题是从当天开始循环的但是在认真的研究以后发现其实不是的 google日历是以一周为一个时间单位周一到周七的星期是不会变的只有天数和月份在一直改变着这个给了我很大的启发天数应该从周期着手这样就避免了日期每天都会更新的问题

<今天的想法>今天主要上在通过jquery来让浮层获得当前表格的id 已经可以获得当前的id但是在jquery里还没找到可以将通过循环而得出的id传输出去的方法可以获得id也可以在直接在当前的表格里面直接通过jquery来实现往表格内部插入内容，但是要通过按钮来实现将input里面的内容传输到表格里面方法还没做到，现在可以在点击当前表格的时候直接插入内容，个获得当前表格的id，但是当出现一个中间的时候就是按钮创建任务的按钮还不能获得精准的表格内容下面有一个方法可以获得表格的id但是只限于是第一个表格的id


三、效果图




四、代码 

<!DOCTYPE html>

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

body{
	font-family:Microsoft YaHei;
}

.ensemble{
	float:left;
	margin-top: 100px;
	margin-left: 100px;
}

.table-left{
	float:left;
	width:146px;
}

.table-left table tr th{
	float:left;
	width:140px;
	height:40px;
	border:1px solid #C4E1FF;
	overflow:hidden;
	padding-top: 10px;
	font-weight:normal;
}

.table-right{
	float:left;
	margin-left: -5px;
}

.top{
	float:left;
	margin-top: 0px;
	width:140px;
	height:26px;
	border:1px solid #C4E1FF;
	border-bottom: 1px dashed #C4E1FF;
}

.below{
	float:left;
	margin-top: -2px;
	width:140px;
	height:25px;
	border-left: 1px solid #C4E1FF;
	border-right: 1px solid #C4E1FF;
	border-bottom:1px solid #C4E1FF;
}

.input-field{
	position:relative;
	top: 0px;
	left: 0px;
	width:400px;
	height:150px;
	border:1px solid #C4E1FF;
	display:none;
}

.input-one{
	float:right;
	width:200px;
	height:20px;
	margin-top: 70px;
	margin-right: 100px;
}

.input-two{
	float:left;
	margin-top: 120px;
	margin-left: 10px;
}

</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 year = time.getFullYear();
	var moon = time.getMonth() + 1;
	var sky = time.getDate() - 2;
	var addsky = time.getDate() + 7 - 2;
	$("#title").append(year + '年');
	$("#title").append(moon + '月');
	$("#title").append(sky + '日');
	$("#title").append('-' + addsky + '日');
	
	//定义按钮按下后让浮层隐藏起来和通过jquery来取得表格的id
	$("#input-two").click(function()
	{
		//这里是想获得表格的id并将value直接传输进去的方法但是没成功
		//$("#0tr"+hour+"td"+i).html() == $("#input-one").val();
		//$("#0tr"+hour+"td"+i).append($("#input-one").val());
		//alert($("#input-one").val());
		$("#input-field").css("display","none");
		//addid.html() = $("#input-two").val();
		//可以获得第一个表格的id
		//alert($("#table-right td").attr("id"));
	});
	
	//定义表单的任意表格让浮层出现
	$("#table-right td").click(function()
	{
		$("#input-field").css("display","block");
		//这个方法就是可以直接获得当前表格里面的任何信息
		var vv = $(this);
		//获得当前表格的高度
		vv.css("top","left") == $("#input-field").css("top","left");
		//获得当前表格的id
		//var addid = $(this).attr("id");
		//是当获得在点击事件触发的时候直接将ss写入表格的内部
		$(this).html("ss");
		//$(this).css("background-color","#000000");
		//alert(11);
	});
});
function titles(titleNum)
{
	//这里是通过js来循环24小时的表格
	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点");
	document.write('<th>'+titleText[titleNum]+'</th>');
}
function toptable(hour)
{
	//是循环上放的带虚线的表格 并且给与ID
	for(i=1; i<8; i++)
	{
		document.write('<td id="0tr'+hour+'td'+i+'" class="top"></td>');
	}
}
function belowtable(hour)
{
	//是循环下面不带虚线的表格 并且给与ID
	for(i=1; i<8; i++)
	{
		document.write('<td id="1tr'+hour+'td'+i+'" class="below" ></td>');
	}
} 
</script>
</head>

<body>
<div class="ensemble">
	<div id="title" class="title">
	
	</div>
	<div id="input-field" class="input-field">
		<input id="input-two" class="input-two" type="button" value="创建任务"/>
		<input id="input-one" class="input-one" type="text" />
	</div>
	<div class="overall-table">
		<div class="table-left">
			<table cellspacing="0">
			<script language="javascript" type="text/javascript">
				for (j=0;j<24;j++)
				{
					document.write("<tr>");
					titles(j);
					document.write("</tr>");
				}
			</script>
			</table>
		</div>
		<div id="table-right" class="table-right">
			<table cellspacing="0">
			<script language="javascript" type="text/javascript">
			for (z=0;z<24;z++)
			{
				document.write("<tr>");
				toptable(z);
				document.write("</tr><tr>");
				belowtable(z);
				document.write("</tr>");
			}
			</script>
			</table>
		</div>
	</div>
</div>
</body>
</html>
  • 大小: 73.7 KB
分享到：
| jQuery google日历练习-20130821
评论
发表评论

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

相关推荐

    calendar-js:日历类。 使用CSS Grid Layout布局生成一年或一个月的日历HTML代码

    内容执照 要求jQuery的支持CSS网格布局规范（级别1）的Web浏览器： 谷歌浏览器&gt; = 57 Mozilla Firefox&gt; = 52 苹果Safari&gt; = 10.1 Microsoft Edge&gt; = 16 歌剧&gt; = 68 日历班 类方法construct(fullYear)该类的构造函数...

    仿igoogle拖动，access数据库

    标题中的“仿igoogle拖动”指的是模仿Google的个性化首页iGoogle实现的一种用户界面交互效果。iGoogle在2005年推出，允许用户自定义首页，通过添加各种小工具来展示天气、新闻、日历等信息，并且支持这些小工具在...

    网页特效手册（500多个特效实例）

    5. 时间日期：如日历插件、倒计时、实时时钟等，增加实用功能。 6. 模态框和提示：用于显示信息、警告或确认操作，不打断用户主线程。 7. 弹出窗口：如图片查看器、广告弹窗、对话框等，丰富用户交互。 8. 加载效果...

    hw-05-third-party-apis-work-day-scheduler:作业05第三方API

    在这个项目中，你可能需要使用某个提供时间管理或日历功能的API，比如Google Calendar API或者Microsoft To Do API。通过API，你可以获取和更新用户的日程安排，显示在网页上。 3. **API调用**：与第三方API交互...

    HomeWork-05：05第三方API：工作日计划程序

    比如，Google Calendar API可以用来同步用户的日程，而Twilio API可以发送短信提醒用户即将开始的事件。 使用API通常需要注册并获取API密钥，然后在代码中正确地调用API接口，处理返回的数据。这涉及到HTTP请求方法...

    扩展面板：5.第三方API挑战：工作日计划程序

    这可能是指一个练习项目，旨在锻炼开发者使用外部API（如Google日历API或Microsoft Outlook API）来创建一个能够管理用户工作日任务的应用程序。API（应用程序编程接口）是软件之间交互的桥梁，允许开发者获取或发送...

Magicbox
Global site tag (gtag.js) - Google Analytics