vue中倒计时，时分秒分开显示（个位十位分开显示）

开发中遇到写一个倒计时 秒杀的的功能

虽然 网上很多这种插件组件，不过很少有符合自己需要的

于是手写了个插件 仅供大家参考

htmlcss部分

<style type="text/css">
body{ background-color: fff;}
span{background-color: #000000;color: #fff;margin-left: 10px;display: inline-block;padding: 10px;}
</style>
	
<div>
    倒计时：<span>1</span><span>0</span>分<span>3</span><span>0</span>秒
</div>
	

js部分

var totalTimer = 60;// 单位是秒 总时间是12小时
var spans = document.getElementsByTagName("span");
var timers = setInterval(function(){
    if(totalTimer>0){
        totalTimer--;//每隔一秒就把totalTimer的值减一
        var hour = Math.floor( totalTimer/60/60 );//获取小时
        var minute = Math.floor( (totalTimer - hour*60*60)/60 );//获取分钟
        var second = totalTimer%60;//获取秒
        spans[0].innerHTML = Math.floor( minute/10 );//获取小时的十位
        spans[1].innerHTML = minute%10;//获取小时的个位
        spans[2].innerHTML = Math.floor( second/10 );//获取小时的十位
        spans[3].innerHTML = second%10;//获取小时的个位
    }else{
        clearInterval(timers);
    }
},1000)