`

jQuery google日历练习-20130803

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

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


二、我的想法

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

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

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

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

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

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

三、效果图




四、代码 

<!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;
}

.button{
	float:left;	
	margin-top: 20px;
	margin-left:40px;
	width:100%;
}

#age{
	float:left;	
	width:100%;
}
	</style>
	<script language="javascript" type="http://code.jquery.com/jquery-1.9.1.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>';
				//通过直接调用方法好获得准确的星期几
				if(time.getDay() + i == 0 && 7)
				{
					week = '<p id="week">'+ '星期天' + '</p>';
				}
				//在这里星期天是0来代表的时候需要跟换一下把0换成或者是7星期天
				$("#add-time").click(function()
				{
					var sky = '<p id="sky">' + [time.getDate() + i + 1] + '号' + '</p>';
				});
				$('#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>
  • 大小: 17.7 KB
分享到：
| jQuery google日历练习-20130802
评论
发表评论

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

相关推荐

    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