jQuery google日历练习-20130731 -

xjwolaile

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

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery google日历练习-20130731

博客分类：

前端技术
jQuery
学习

getDate getMonth getFullYear getDay

一、效果及功能说明

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

二、我的想法

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

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

三、效果图

四、代码

<!DOCTYPE html>

<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/backmanage_login.css" />
	<script language="javascript" type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
	<script language="javascript" type="text/javascript">
	$(document).ready(function(){
	//定义方法
		setInterval(showTime, 100);
		//定义出现时间
		function timer(obj,txt){
		//定义直接可以写入的方法
         	obj.text(txt);
         	//进入html里
    	}
    	function showTime(){  
    	//定义获得年月日和星期的方法      
		var today = new Date();
		//定义参数 新建一个获得年月份的方法
        var weekday=new Array(7)
        //定义参数 新建一个数组
        weekday[0]="星期一"
        weekday[1]="星期二"
        weekday[2]="星期三"
        weekday[3]="星期四"
        weekday[4]="星期五"
        weekday[5]="星期六"
        weekday[6]="星期日"
        //里面放有星期1到星期日
        var month=new Array(12)
        //定义参数 新建一个数组
		month[0]="1"
		month[1]="2"
		month[2]="3"
		month[3]="4"
		month[4]="5"
		month[5]="6"
		month[6]="7"
		month[7]="8"
		month[8]="9"
		month[9]="10"
		month[10]="11"
		month[11]="12"    
		//里面有代表12个月份                                  
        var y=today.getFullYear()+"年";
        //定义参数 获得当前的年份
        var month=month[today.getMonth()] +"月";
        //定义参数 获得当前的月份
        var td=today.getDate()+"日";
        //定义参数 获得当前的多少号
        var d=weekday[today.getDay() -1];
        //定义参数 获得当前星期几
	    timer($("#aa"),y);
	    timer($("#ss"),month);
	    timer($("#dd"),td);
	    timer($("#ff"),d);
	    //让他们写入不同的p标签里面
    	}
	});
	</script>
</head>

<body>
<div class="date">
	<p id="aa"></p>
	<p id="ss"></p>
	<p id="dd"></p>
	<p id="ff"></p>
</div>
</body>
</html>

(每天跟进更新把今天的写的东西和想法更新到上面)

查看图片附件

分享到：

jQuery google日历练习-20130801 | jQuery animate分页标签按钮鼠标悬停滑动展 ...

2013-07-31 23:35
浏览 808
评论(1)
分类:Web前端
查看更多

1 楼萧远山 2013-08-02

是google

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery google日历练习-20130731

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery google日历练习-20130731

评论

发表评论

相关推荐

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

最近访客更多访客>>