Hiro.date:简易的日期、星期、数字时钟封装插件

发表时间:2009年12月31日 最近更新时间: 2009-12-31 22:44 字体大小:12号14号

写了一个简单的数字时钟插件,没有美化效果,非常地简易,也非常地简单,与大家分享一下子!

downdemo

一、API函数调用

  • ep1.仅仅显示数字时钟: $(‘#onlyClock’).clock();
  • ep2.显示包含日期、星期、数字时钟: $(‘#showFullDate’).fullDate();
  • ep3.显示星期:$.hiro.getWeek();
  • ep4.显示默认的日期:$.hiro.getDateArr()[0];
  • ep5.显示年份:$.hiro.getDateArr()[1];
  • ep6.显示月份:$.hiro.getDateArr()[2];
  • ep7.显示日:$.hiro.getDateArr()[3];
  • ep8.显示数字版星期:$.hiro.getDateArr()[4];
  • ep9.显示当前小时:$.hiro.getDateArr()[5];
  • ep10.显示当前分钟:$.hiro.getDateArr()[6];
  • ep11.显示当前秒:$.hiro.getDateArr()[7];
  • ep12.格式化时、分、秒(小于10时前置0):$.hiro.format_time(9);
  • ep13.判断今天是否圣诞节:$.hiro.isChristmasDay();
  • ep14.判断今天是否元旦节:$.hiro.isNewYear().

二、插件的js代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/**
 *	Author:	hiro zhang
 *	URL:	http://www.ihiro.org/
 *	E-mail:	hiro.zhd@gmail.com
 *
 *	Based on jQuery library
 *
 */
 
;(function($) {
	$.fn.extend({
		clock : function() {
			var _this = this;
			_this.append('<label id="hours">' + $.hiro.getDateArr()[5] + '</label>: ' +
						 '<label id="minutes">' + $.hiro.getDateArr()[6] + '</label>: ' +
						 '<label id="seconds">' + $.hiro.getDateArr()[7] + '</label>');
			setInterval(function() {	//实时数字时钟
				var seconds = $('#seconds', _this).text();
				seconds++;
				if(seconds == 60) {
					seconds = 0;
					var minutes = $('#minutes', _this).text();
					minutes++;
					if(minutes == 60) {
						minutes = 0;
						var hours = $('#hours', _this).text();
						hours++;
						if(hours == 24) {
							hours = 0, minutes = 0, seconds = 0;
							hours = $.hiro.format_time(hours);
							$('#hours', _this).text(hours);
						};
					};
					minutes = $.hiro.format_time(minutes);
					$('#minutes', _this).text(minutes);
				};
				seconds = $.hiro.format_time(seconds);
				$('#seconds', _this).text(seconds);
			}, 1000);
		},
 
		fullDate : function() {
			this.prepend('<label id="date">' + $.hiro.getDateArr()[1] + '-' + $.hiro.getDateArr()[2] + '-' + $.hiro.getDateArr()[3] + '</label>' +
						 '<label id="week">' + $.hiro.getWeek() + '</label>');
			this.clock();
		}
	});
 
	$.hiro = {
		getDateArr : function() {
			var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate()
				week = date.getDay(),
				hours = date.getHours(),
				minutes = date.getMinutes(),
				seconds = date.getSeconds();
 
				date = date.toString();
				hours = $.hiro.format_time(hours);
				minutes = $.hiro.format_time(minutes);
				seconds = $.hiro.format_time(seconds);
 
			return [date, year, month, day, week, hours, minutes, seconds];
		},
 
		format_time : function(time) {	//格式化时、分、秒
			return time < 10 ? '0' + time : time;
		},
 
		getWeek : function() {
			var week = $.hiro.getDateArr()[4];
			switch (week) {
				case 0:
					week = '星期日';
					break;
				case 1:
					week = '星期一';
					break;
				case 2:
					week = '星期二';
					break;
				case 3:
					week = '星期三';
					break;
				case 4:
					week = '星期四';
					break;
				case 5:
					week = '星期五';
					break;
				case 6:
					week = '星期六';
					break;
			};
			return week;
		},
 
		isChristmasDay : function() {
			return $.hiro.getDateArr()[2] == '12' && $.hiro.getDateArr()[3] == '25' ? true : false;
		},
 
		isNewYear : function() {
			return $.hiro.getDateArr()[2] == '1' && $.hiro.getDateArr()[3] == '1' ? true : false;
		}
 
	};
})(jQuery);
评论数:6 浏览次数:360 views
不错不错,已经有 个评论!
  1. QQ:5069569

    少个文件 jquery-1.3.2.min.js 而且路径也有问题 倒是好解决~

    • 我的所有demo的下载中都不含jQuery库的,都是自行添加!!

    • I’m just getting home. I’ll be back later tonight to catch up on this awesome post.

  2. Wonderful post,You DO have the power ;o)

  3. Thank you for your comments , it means a lot to me, feeling that I’m not alone on this Earth thinking this way :-)

  4. Thank you, my day was pretty cool.

我要评论

  • * *