![\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e2d\u83b7\u53d6\u9a8c\u8bc1\u7801\u5012\u8ba1\u65f660s\u7684\u5b9e\u4f8b\u5206\u6790\u63d2\u56fe\"](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/194\/ff95197e785c7bf3177cca4de5e123a7-0.jpg\" "\\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e2d\u83b7\u53d6\u9a8c\u8bc1\u7801\u5012\u8ba1\u65f660s\u7684\u5b9e\u4f8b\u5206\u6790\u63d2\u56fe\\"")
<\/p>\n\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4e3a\u5927\u5bb6\u8be6\u7ec6\u4ecb\u7ecd\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5b9e\u73b0\u5012\u8ba1\u65f660s\u83b7\u53d6\u9a8c\u8bc1\u7801\uff0c\u5177\u6709\u4e00\u5b9a\u7684\u53c2\u8003\u4ef7\u503c\uff0c\u611f\u5174\u8da3\u7684\u5c0f\u4f19\u4f34\u4eec\u53ef\u4ee5\u53c2\u8003\u4e00\u4e0b<\/p>\n
\u672c\u6587\u5b9e\u4f8b\u4e3a\u5927\u5bb6\u5206\u4eab\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5012\u8ba1\u65f6\u83b7\u53d6\u9a8c\u8bc1\u7801\u7684\u5177\u4f53\u4ee3\u7801\uff0c\u4f9b\u5927\u5bb6\u53c2\u8003\uff0c\u5177\u4f53\u5185\u5bb9\u5982\u4e0b<\/p>\n
1\u3001\u5de5\u5177\u7c7b\uff08\u5f15\u7528\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u63d0\u4f9b\u7684\u5de5\u5177\u7c7b\uff09<\/p>\n
<\/p>\n
countdown.js<\/p>\n
class Countdown {\r\nconstructor(options = {}) {\r\nObject.assign(this, {\r\noptions, \r\n})\r\nthis.__init()\r\n}\r\n\/**\r\n* \u521d\u59cb\u5316\r\n*\/\r\n__init() {\r\nthis.page = getCurrentPages()[getCurrentPages().length - 1]\r\nthis.setData = this.page.setData.bind(this.page)\r\nthis.restart(this.options)\r\n}\r\n\/**\r\n* \u9ed8\u8ba4\u53c2\u6570\r\n*\/\r\nsetDefaults() {\r\nreturn {\r\ndate: `June 7, 2087 15:03:25`, \r\nrefresh: 1000, \r\noffset: 0, \r\nonEnd() {}, \r\nrender(date) {}, \r\n}\r\n}\r\n\/**\r\n* \u5408\u5e76\u53c2\u6570\r\n*\/\r\nmergeOptions(options) {\r\nconst defaultOptions = this.setDefaults()\r\nfor (let i in defaultOptions) {\r\nif (defaultOptions.hasOwnProperty(i)) {\r\nthis.options[i] = typeof options[i] !== `undefined` ? options[i] : defaultOptions[i]\r\nif (i === `date` && typeof this.options.date !== `object`) {\r\nthis.options.date = new Date(this.options.date)\r\n}\r\nif (typeof this.options[i] === `function`) {\r\nthis.options[i] = this.options[i].bind(this)\r\n}\r\n}\r\n}\r\nif (typeof this.options.date !== `object`) {\r\nthis.options.date = new Date(this.options.date)\r\n}\r\n}\r\n\/**\r\n* \u8ba1\u7b97\u65e5\u671f\u5dee\r\n*\/\r\ngetDiffDate() {\r\nlet diff = (this.options.date.getTime() - Date.now() + this.options.offset) \/ 1000\r\nlet dateData = {\r\nyears: 0,\r\ndays: 0,\r\nhours: 0,\r\nmin: 0,\r\nsec: 0,\r\nmillisec: 0,\r\n}\r\nif (diff = (365.25 * 86400)) {\r\ndateData.years = Math.floor(diff \/ (365.25 * 86400))\r\ndiff -= dateData.years * 365.25 * 86400\r\n}\r\nif (diff >= 86400) {\r\ndateData.days = Math.floor(diff \/ 86400)\r\ndiff -= dateData.days * 86400\r\n}\r\nif (diff >= 3600) {\r\ndateData.hours = Math.floor(diff \/ 3600)\r\ndiff -= dateData.hours * 3600\r\n}\r\nif (diff >= 60) {\r\ndateData.min = Math.floor(diff \/ 60)\r\ndiff -= dateData.min * 60\r\n}\r\ndateData.sec = Math.round(diff)\r\ndateData.millisec = diff % 1 * 1000\r\nreturn dateData\r\n}\r\n\/**\r\n* \u8865\u96f6\r\n*\/\r\nleadingZeros(num, length = 2) {\r\nnum = String(num)\r\nif (num.length > length) return num\r\nreturn (Array(length + 1).join(`0`) + num).substr(-length)\r\n}\r\n\/**\r\n* \u66f4\u65b0\u7ec4\u4ef6\r\n*\/\r\nupdate(newDate) {\r\nthis.options.date = typeof newDate !== `object` ? new Date(newDate) : newDate\r\nthis.render()\r\nreturn this\r\n}\r\n\/**\r\n* \u505c\u6b62\u5012\u8ba1\u65f6\r\n*\/\r\nstop() {\r\nif (this.interval) {\r\nclearInterval(this.interval)\r\nthis.interval = !1\r\n}\r\nreturn this\r\n}\r\n\/**\r\n* \u6e32\u67d3\u7ec4\u4ef6\r\n*\/\r\nrender() {\r\nthis.options.render(this.getDiffDate())\r\nreturn this\r\n}\r\n\/**\r\n* \u542f\u52a8\u5012\u8ba1\u65f6\r\n*\/\r\nstart() {\r\nif (this.interval) return !1\r\nthis.render()\r\nif (this.options.refresh) {\r\nthis.interval = setInterval(() => {\r\nthis.render()\r\n}, this.options.refresh)\r\n}\r\nreturn this\r\n}\r\n\/**\r\n* \u66f4\u65b0offset\r\n*\/\r\nupdateOffset(offset) {\r\nthis.options.offset = offset\r\nreturn this\r\n}\r\n\/**\r\n* \u91cd\u542f\u5012\u8ba1\u65f6\r\n*\/\r\nrestart(options = {}) {\r\nthis.mergeOptions(options)\r\nthis.interval = !1\r\nthis.start()\r\nreturn this\r\n}\r\n}<\/pre>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
export default Countdown<\/p>\n
2\u3001WXML\u90e8\u5206\uff1a<\/p>\n
<view>\r\n <view>{{ c2 || '\u83b7\u53d6\u9a8c\u8bc1\u7801' }}<\/view><\/view><\/pre>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
3\u3001JS\u90e8\u5206:<\/p>\n
import $wuxCountDown from 'countdown\/countdown'\r\nexport {\r\n $wuxCountDown, \r\n}\r\nimport { $wuxCountDown } from '..\/..\/components\/wux'\r\n vcode: function () {\r\n if (this.c2 && this.c2.interval) return !1\r\n this.c2 = new $wuxCountDown({\r\n date: +(new Date) + 60000,\r\n onEnd() {\r\n this.setData({\r\n c2: '\u91cd\u65b0\u83b7\u53d6\u9a8c\u8bc1\u7801',\r\n })\r\n },\r\n render(date) {\r\n const sec = this.leadingZeros(date.sec, 2) + ' \u79d2\u540e\u91cd\u53d1 '\r\n date.sec !== 0 && this.setData({\r\n c2: sec,\r\n })\r\n },\r\n })\r\n }<\/pre>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e2d\u83b7\u53d6\u9a8c\u8bc1\u7801\u5012\u8ba1\u65f660s\u7684\u5b9e\u4f8b\u5206\u6790\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4e3a\u5927\u5bb6\u8be6\u7ec6\u4ecb\u7ecd\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5b9e\u73b0\u5012\u8ba1\u65f660s\u83b7\u53d6\u9a8c\u8bc1\u7801\uff0c\u5177\u6709\u4e00\u5b9a\u7684\u53c2\u8003\u4ef7\u503c\uff0c\u611f\u5174\u8da3\u7684\u5c0f\u4f19\u4f34\u4eec\u53ef\u4ee5\u53c2\u8003\u4e00\u4e0b \u672c\u6587\u5b9e\u4f8b\u4e3a\u5927\u5bb6\u5206\u4eab\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5012\u8ba1\u65f6\u83b7\u53d6\u9a8c\u8bc1\u7801\u7684\u5177\u4f53\u4ee3\u7801\uff0c\u4f9b\u5927\u5bb6\u53c2\u8003\uff0c\u5177\u4f53\u5185\u5bb9\u5982\u4e0b 1\u3001\u5de5\u5177\u7c7b\uff08\u5f15\u7528\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u63d0\u4f9b\u7684\u5de5\u5177\u7c7b\uff09 countdown.js class Countdown { constructor(options = {}) { Object.assign(this, { options, }) this.__init() } \/** * \u521d\u59cb\u5316 *\/ __init() { this.page = getCurrentPages()[getCurrentPages().length – 1] this.setData = this.page.setData.bind(this.page) this.restart(this.options) } \/** * \u9ed8\u8ba4\u53c2\u6570 *\/ setDefaults() { return { date: `June 7, 2087 15:03:25`, refresh: 1000, offset: 0, onEnd() {}, render(date) {}, } } \/** * \u5408\u5e76\u53c2\u6570 *\/ mergeOptions(options) { const defaultOptions = this.setDefaults() for (let i in defaultOptions) { if (defaultOptions.hasOwnProperty(i)) { this.options[i] = typeof options[i] !== `undefined` ? options[i] : defaultOptions[i] if (i === `date` && typeof this.options.date !== `object`) { this.options.date = new Date(this.options.date) } if (typeof this.options[i] === `function`) { this.options[i] = this.options[i].bind(this) } } } if (typeof this.options.date !== `object`) { this.options.date = new Date(this.options.date) } } \/** * \u8ba1\u7b97\u65e5\u671f\u5dee *\/ getDiffDate() { […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-30884","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/30884","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=30884"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/30884\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=30884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=30884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=30884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}