vue时间 插件

原创 李仁伟前端笔记 随笔 vue 163阅读 2018-07-31 18:21:15 举报

<template>
<div>
<li class="" v-for="(item,index) in hours" :key="index">

</li>
<p class="timerfont">{{hours}}:{{minute}}:{{second}}</p>
<!--<img :src=imgs alt="">-->

</div>
</template>

<script type="text/ecmascript-6">
import { mapState, mapActions } from "vuex";
import state from "../../../store/state";

export default {
data () {
return {
hours:0,
minutes: 15,
timecl:'',
seconds: 0,
imgs: require(@/img/lottery/times/时间0.png)
}
},
mounted () {
this.add()
},
methods: {
num: function (n) {
return n < 10 ? '0' + n : '' + n
},
add: function () {
window.clearInterval(this.timecl);
  var t=this.$store.state.liuhe.count;
//let day = Math.floor(t / (60 60 24));
this.hours = Math.floor(t / (60 60));// - (day 24);
  var m=0;
  m=Math.floor(t/60%60);
  m<10&&(m=m);//m<10&&(m='0'+m);
this.minutes = m;
this.seconds=Math.floor(t%60);

    var _this = this
    this.timecl = window.setInterval(function () {

      if (_this.minutes === 0 && _this.hours !== 0) {
        _this.minutes = 59
        _this.hours -= 1
      }

      if (_this.seconds === 0 && _this.minutes !== 0) {
        _this.seconds = 59
        _this.minutes -= 1
      } else if (_this.minutes === 0 && _this.seconds === 0) {
        _this.seconds = 0
        window.clearInterval(time)
      } else {
        _this.seconds -= 1
      }
    }, 1000)
  }
},
watch: {
  second: {
    handler (newVal) {
      this.num(newVal)
    }
  },
  minute: {
    handler (newVal) {
      this.num(newVal)
    }
  }
},
computed: {
  ...mapState({
    count: state => state.liuhe.count
  }),
  second: function () {
    return this.num(this.seconds)
  },
  minute: function () {
    return this.num(this.minutes)
  },

},
props:['timemsg']

}
</script>

<style>
.timerfont{font-family:"Times New Roman", Times, serif;font-size:30px;}
</style>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复