Demo 在线地址:
https://sx00xs.github.io/test/27/index.html
---------------------------------------------------------------
ide: vscode
文件格式:.vue
解析:(待补)
<template> <div id="app"> <div class="countdown"> <span>{{spanVal1}}</span>分钟<span>{{spanVal2}}</span>秒 <input :class="{cancel:isCancel}" type="button" value="" @click="handleClick" > </div> </div> </template> <script> function format(a){ return a.toString().replace(/^(d)$/,'0$1') } export default { data:function(){ return{ isCancel:false, spanVal1:'01', spanVal2:'40', timer:null } }, methods:{ handleClick(){ !this.isCancel ? (this.timer=setInterval(this.updateTime,1000),this.updateTime()) : (clearInterval(this.timer)); !this.isCancel ? this.isCancel=true : this.isCancel=false; }, updateTime(){ var Remain=this.spanVal1.replace(/^0/,'') * 60 + parseInt(this.spanVal2.replace(/^0/,'')); if(Remain <= 0){ clearInterval(this.timer); return; } Remain--; this.spanVal1=format(parseInt(Remain/60)); Remain %= 60; this.spanVal2=format(parseInt(Remain)); } } } </script>