{"id":84,"date":"2014-03-15T22:13:19","date_gmt":"2014-03-15T14:13:19","guid":{"rendered":"http:\/\/www.magki.com\/blog\/?p=84"},"modified":"2014-03-15T22:23:57","modified_gmt":"2014-03-15T14:23:57","slug":"a-timer-plugin-for-jquery","status":"publish","type":"post","link":"http:\/\/www.ijony.com\/blog\/2014\/03\/a-timer-plugin-for-jquery.html","title":{"rendered":"\u57fa\u4e8e JQuery \u7684\u8ba1\u65f6\u63d2\u4ef6"},"content":{"rendered":"<p>\u56e0\u4e3a\u4ee5\u524d\u9879\u76ee\u9700\u8981\u505a\u4e86\u4e00\u4e2a\u7b80\u5355\u7684<a href=\"http:\/\/www.ijony.com\/blog\/2013\/12\/simple-timer-by-jquery.html\">\u8ba1\u65f6\u5668<\/a>\uff0c\u540e\u6765\u65e0\u804a\uff0c\u63d0\u51fa\u6765\u5b8c\u5584\u6210\u4e00\u4e2a\u63d2\u4ef6\u4e86\u3002\u540c\u65f6\u652f\u6301\u8ba1\u65f6\u548c\u5012\u8ba1\u65f6\u3002<\/p>\n<p>\u6837\u5f0f\u90e8\u5206<\/p>\n<pre>\r\n.timer *{ padding: 0px; margin: 0px;}\r\n.timer{ width: 210px; height: 34px; line-height: 34px; font-family: Verdana, sans-serif; font-size: 28px; color: #FFF;}\r\n.timer div.clock{ float: left; width: 28px; height: 34px; text-align: center; line-height: 34px; background: #000; margin-right: 2px; border-radius: 5px; overflow: hidden;}\r\n.timer div.clock ul{ list-style: none;}\r\n.timer div.clock ul li{ float: left; width: 28px; height: 34px; text-align: center; line-height: 34px;}\r\n.timer div.dot{ float: left; width: 12px; height: 34px; color: #000;}\r\n<\/pre>\n<p>\u4ee3\u7801\u90e8\u5206<\/p>\n<pre>\r\n\/**\r\n * \u57fa\u4e8e JQuery \u7684\u8ba1\u65f6\u63d2\u4ef6\r\n *\r\n * @author Jony\r\n * @version 2014-03-15 22:08 Jony <jonneyless@gmail.com>\r\n *\/\r\n;\r\n(function($){\r\n\tvar timerIndex;\r\n\tvar timerBox = [];\r\n\tvar timerConfig = [];\r\n\r\n\t$.fn.extend({\r\n\t\t\/**\r\n\t\t * @param \u6574\u578b beginTime\t\u8d77\u59cb\u65f6\u95f4\uff0c\u9ed8\u8ba4\u4e3a 0\u3002\u683c\u5f0f\uff1ahhiiss\r\n\t\t * @param \u5e03\u5c14 countDown\t\u5012\u8ba1\u65f6\uff0c\u9ed8\u8ba4\u4e3a false\r\n\t\t * @param \u5b57\u4e32 clockClass\t\u6307\u9488\u6837\u5f0f\uff0c\u9ed8\u8ba4\u4e3a clock\r\n\t\t * @param \u5b57\u4e32 dotClass\t\t\u95f4\u9694\u6837\u5f0f\uff0c\u9ed8\u8ba4\u4e3a dot\r\n\t\t * @param \u5b57\u4e32 firstClass\t\u524d\u5bfc\u6837\u5f0f\uff0c\u9ed8\u8ba4\u4e3a first\r\n\t\t * @example $('#timer').jqTimer({begintTime: 123456});\r\n\t\t *\/\r\n\t\tjqTimer: function(options){\r\n\t\t\tvar defaults = {\r\n\t\t\t\tbeginTime: 0,\r\n\t\t\t\tcountdown: false,\r\n\t\t\t\tclockClass: 'clock',\r\n\t\t\t\tdotClass: 'dot',\r\n\t\t\t\tfirstClass: 'first'\r\n\t\t\t};\r\n\r\n\t\t\ttimerIndex = timerBox.length;\r\n\t\t\ttimerBox[timerIndex] = this;\r\n\t\t\ttimerConfig[timerIndex] = $.extend(defaults, options || {});\r\n\r\n\t\t\tvar box = timerBox[timerIndex];\r\n\t\t\tvar config = timerConfig[timerIndex];\r\n\r\n\t\t\tbox.addClass('timer');\r\n\r\n\t\t\tbox.append($('<div>').addClass(config.clockClass).text(config.beginTime[0]))\r\n\t\t\t\t.append($('<div>').addClass(config.clockClass).text(config.beginTime[1]))\r\n\t\t\t\t.append($('<div>').addClass(config.dotClass))\r\n\t\t\t\t.append($('<div>').addClass(config.clockClass).addClass(config.firstClass).text(config.beginTime[2]))\r\n\t\t\t\t.append($('<div>').addClass(config.clockClass).text(config.beginTime[3]))\r\n\t\t\t\t.append($('<div>').addClass(config.dotClass))\r\n\t\t\t\t.append($('<div>').addClass(config.clockClass).addClass(config.firstClass).text(config.beginTime[4]))\r\n\t\t\t\t.append($('<div>').addClass(config.clockClass).text(config.beginTime[5]));\r\n\r\n\t\t\tbox.children('.' + config.clockClass).each(function(){\r\n\t\t\t\tvar s = parseInt($(this).text());\r\n\t\t\t\ts = isNaN(s) ? 0 : s;\r\n\t\t\t\t$(this).html('<ul><li>'+s+'<\/li><li>'+s+'<\/li><\/ul>');\r\n\t\t\t});\r\n\r\n\t\t\t$.extend({\r\n\t\t\t\tjqTimerRun: function(boxIndex, i){\r\n\t\t\t\t\tvar box = timerBox[boxIndex];\r\n\t\t\t\t\tvar config = timerConfig[boxIndex];\r\n\r\n\t\t\t\t\tvar i = (!i && i != 0) ? 5 : i;\r\n\t\t\t\t\tvar c = box.children('.' + config.clockClass).eq(i);\r\n\t\t\t\t\tvar p = config.countdown ? (c.hasClass(config.firstClass) ? 5 : 9) : (c.hasClass(config.firstClass) ? 6 : 10);\r\n\t\t\t\t\tvar s = parseInt(c.find('li').eq(0).text(), 10);\r\n\t\t\t\t\tvar h = c.find('li').eq(0).height();\r\n\t\t\t\t\tvar g = false;\r\n\r\n\t\t\t\t\tif(config.countdown){\r\n\t\t\t\t\t\ts--;\r\n\t\t\t\t\t\tif(s < 0){\r\n\t\t\t\t\t\t\ts = p;\r\n\t\t\t\t\t\t\tg = true;\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tc.children('ul').css({marginTop: '-'+h+'px'});\r\n\t\t\t\t\t\tc.find('li').eq(0).text(s);\r\n\t\t\t\t\t\tc.children('ul').animate({marginTop: '0px'}, 'fast', function(){\r\n\t\t\t\t\t\t\tc.find('li').eq(1).text(s);\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t}else{\r\n\t\t\t\t\t\ts++;\r\n\t\t\t\t\t\tif(s >= p){\r\n\t\t\t\t\t\t\ts = 0;\r\n\t\t\t\t\t\t\tg = true;\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tc.children('ul').css({marginTop: '0px'});\r\n\t\t\t\t\t\tc.find('li').eq(1).text(s);\r\n\t\t\t\t\t\tc.children('ul').animate({marginTop: '-'+h+'px'}, 'fast', function(){\r\n\t\t\t\t\t\t\tc.find('li').eq(0).text(s);\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tif(g && i > 0){\r\n\t\t\t\t\t\t$.jqTimerRun(boxIndex, (i - 1));\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t});\r\n\r\n\t\t\tsetInterval('$.jqTimerRun(\"' + timerIndex + '\")', 1000);\r\n\t\t}\r\n\t});\r\n})(jQuery);\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u56e0\u4e3a\u4ee5\u524d\u9879\u76ee\u9700\u8981\u505a\u4e86\u4e00\u4e2a\u7b80\u5355\u7684\u8ba1\u65f6\u5668\uff0c\u540e\u6765\u65e0\u804a\uff0c\u63d0\u51fa\u6765\u5b8c\u5584\u6210\u4e00\u4e2a\u63d2\u4ef6\u4e86\u3002\u540c\u65f6\u652f\u6301\u8ba1\u65f6\u548c\u5012\u8ba1\u65f6\u3002 \u6837\u5f0f\u90e8\u5206 .t [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/posts\/84"}],"collection":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":0,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/posts\/84\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/categories?post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.ijony.com\/blog\/wp-json\/wp\/v2\/tags?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}