写了一个简单的数字时钟插件,没有美化效果,非常地简易,也非常地简单,与大家分享一下子!
一、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); |
少个文件 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.
Wonderful post,You DO have the power ;o)
Thank you for your comments , it means a lot to me, feeling that I’m not alone on this Earth thinking this way
Thank you, my day was pretty cool.