Vue练习二十七：03_09_倒计时时钟

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>