這里分享一個自己寫的倒計時插件，這里使用了VUE來封裝組件，下面是具體的代碼：

/** Created by mayouchen on 2017/4/13* youchen.ma@weimob.com*/

整個文件采用了CMD的思想，并且引入了zepto，與Vue來開發。

define(function (require, exports, module) {var $ = require("lib_cmd/zepto-cmd"),Vue = require("lib_cmd/vue-cmd");//倒計時組件Vue.component('countdown', {template: '\<div style="text-align: center;height: 30px;line-height: 30px">當前時間\<span v-html="day|fortime"></span>天<span v-html="hour|fortime"></span>時<span v-html="minute|fortime"></span>分<span v-html="second|fortime"></span>秒\</div>\',props: [''],data: function () {var self = this; //定義 天，時，分，秒var day=0,minute=0,hour = 0,second=0;return {day:day,hour:hour,minute:minute,second:second}},methods: {createtime:function(){ //計算天，時，分，秒var time = new Date().getTime()setInterval(function(){time = time-1000;},1000);var delta = 1499508739691 - time;//1499508739691 這里是你要傳入的截止時間，這里是毫秒數，暫時先給出一個假定的值if(delta <=0){return false;console.log("倒計時時間已經過期~");}else{var self = this;var day = Math.floor(delta/(24*60*60*1000)),d2ms = day*24*60*60*1000;self.day = day;var hour = Math.floor((delta-d2ms)/(60*60*1000)),h2ms = hour*60*60*1000;self.hour = hour;var minute = Math.floor((delta-d2ms-h2ms)/(60*1000)),m2ms = minute*60*1000;self.minute = minute;var second = Math.floor((delta-d2ms-h2ms-m2ms)/1000),s2ms = second*1000;self.second = second;}},ready: function () {var self = this;setInterval(function(){self.createtime();},1000);},filters: { //給單數位前面補零fortime:function(value){if (typeof value == 'undefined') {return;}var html;var num_2 = value;if (num_2 < 10) {num_2 = '0' + num_2;}return html = '<span>'+num_2+'</span>';}}});return Vue; });

如果這里還要把每個時間的兩位數切分開，就是用下面這個過濾器：

filters: { //數據過濾fortime:function(value){if (typeof value == 'undefined') {return;}var html,arr;var num_2 = value;if (num_2 < 10) {num_2 = '0' + num_2;}arr = String(num_2).split("");return html = '<span>'+arr[0]+'</span>'+'<span>'+arr[1]+'</span>';}}

總結

以上是生活随笔為你收集整理的自制倒计时插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。