Vue2.0 countdown plug-in (timestamp refresh jump does not affect), vue2.0 jump

Vue2.0 countdown plug-in (timestamp refresh jump does not affect), vue2.0 jump

I found that many countdown plug-ins will be refreshed from the ground up, so I wrote one with vue2.0, passed the test, and directly went to the code

The following is the component code:

<Template> <span: endTime = "endTime": callback = "callback ": endText = "endText"> <slot >{{ content }}</slot> </span> </template> <script> export default {data () {return {content: '',}}, props: {endTime: {type: String, default:''}, endText: {type: String, default: 'stopped'}, callback: {type: Function, default: ''}}, mounted () {this. countdowm (this. endTime)}, methods: {countdowm (timestamp) {let Self = this; let timer = setInterval (function () {let nowTime = new Date (); let endTime = new Date (timestamp * 1000); let t = endTime. getTime ()-nowTime. getTime (); if (t> 0) {let day = Math. floor (t/86400000); let hour = Math. floor (t/3600000) % 24); let min = Math. floor (t/60000) % 60); let sec = Math. floor (t/1000) % 60); hour = hour <10? "0" + hour: hour; min = min <10? "0" + min: min; sec = sec <10? "0" + sec: sec; let format = ''; if (day> 0) {format = '$ {day} day $ {hour} hour $ {min} minute $ {sec} second';} if (day <= 0 & hour> 0) {format = '$ {hour} hour $ {min} minute $ {sec} second';} if (day <= 0 & hour <= 0) {format = '$ {min} minute $ {sec} second';} self. content = format;} else {clearInterval (timer); self. content = self. endText; self. _ callback () ;}}, 1000) ;}, _ callback () {if (this. callback & this. callback instanceof Function) {this. callback (... this) ;}}}</script>

The following is the call code:

<Count-down endTime = "1490761620": callback = "callback" endText = "ended"> </count-down>

EdnTime is the timestamp after the end of the time. callback is the callback endText after the end is the text display after the end!

The above section describes the countdown plug-in for vue2.0 (timestamp refreshing and redirection are not affected). I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!