Vue写的倒计时工具

公司辩论赛，帮行政小姐姐写的小工具。

第一个是发言倒计时，可以自己指定时间。

第二个是自由辩论，双方各5分钟时间。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>


<div id="app">
<h1 style="font-size:120px;margin:15%">剩余时间 {{ data }} </h1>
<h2 style="font-size:42px;margin:5%">倒计时:<input type="text" style="width:50px;height:40px" v-model="total">秒
<button onclick=app.start()>开始</button></h2>

</div>


<script>
var app = new Vue({
  el: '#app',
  data: {
    data:'00:02:00',
    leftTime: 120000,
    total:120,
    flag:0
  },
  
  methods:{
    start(){
    app.leftTime = app.total * 1000
    app.countTime()
    app.flag += 1
    },
    countTime(){
    var date = new Date();
    var now = date.getTime();
    //设置截止时间
    //var endDate = new Date("2019-04-11 17:11:00");
    //var end = endDate.getTime();
    //时间差
    //var leftTime = end - now;
    app.leftTime = app.leftTime  - 1000;
    console.log(app.leftTime)
    //定义变量 d,h,m,s保存倒计时的时间
    if (app.leftTime >= 0) {
        d = Math.floor(app.leftTime / 1000 / 60 / 60 / 24);
        this.h = Math.floor(app.leftTime / 1000 / 60 / 60 % 24);
        this.m = Math.floor(app.leftTime / 1000 / 60 % 60);
        this.s = Math.floor(app.leftTime / 1000 % 60);
    }
  
    //递归每秒调用countTime方法，显示动态时间效果
    app.data = this.h + ':' + this.m + ':' + this.s
    if(app.flag < 2){
    setTimeout(this.countTime, 1000);
    }
    else(
    alert("请刷新后重新开始！")
    )
    }
    }
    })
</script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>


<div id="app">

	<div id="left" style="margin-left:5%;float:left;font-size:42">
	<h1>正方</h1>
	<h1>剩余时间 {{ left }} </h1>
	</div>

	<div id="right" style="margin-right:5%;float:right;font-size:42">
	<h1>反方</h1>
	<h1>剩余时间 {{ right }} </h1>
	</div>

	<div style="float:left">
	<button onclick=app.start() style="font-size:22"> 交换</button>
	</div>

</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    left:'00:05:00',
    right:'00:05:00',
    lLeftTime: 5 * 60 * 1000,
    rLeftTime: 5 * 60 * 1000,
    flag: 1
  },
  
  methods:{
 
	leftCountDown(){
		app.lLeftTime = app.lLeftTime  - 1000;
		//定义变量 d,h,m,s保存倒计时的时间
		if (app.lLeftTime >= 0) {
			d = Math.floor(app.lLeftTime / 1000 / 60 / 60 / 24);
			this.h = Math.floor(app.lLeftTime / 1000 / 60 / 60 % 24);
			this.m = Math.floor(app.lLeftTime / 1000 / 60 % 60);
			this.s = Math.floor(app.lLeftTime / 1000 % 60);
		}
		
		if(this.flag % 2 == 0 && app.lLeftTime > 0) {
			setTimeout("app.leftCountDown()", 1000);	
        }
		
		app.left = this.h + ':' + this.m + ':' + this.s
		

	},
	
	rightCountDown(){
		app.rLeftTime = app.rLeftTime  - 1000;
		//定义变量 d,h,m,s保存倒计时的时间
		if (app.rLeftTime >= 0) {
			d = Math.floor(app.rLeftTime / 1000 / 60 / 60 / 24);
			this.h = Math.floor(app.rLeftTime / 1000 / 60 / 60 % 24);
			this.m = Math.floor(app.rLeftTime / 1000 / 60 % 60);
			this.s = Math.floor(app.rLeftTime / 1000 % 60);
		}
		
		
		if(this.flag % 2 == 1 && app.rLeftTime > 0) {
			setTimeout("app.rightCountDown()", 1000);	
        }
		
		app.right = this.h + ':' + this.m + ':' + this.s
	},
    
    start(){
		this.flag += 1
		
		if(this.flag % 2 == 0){
			app.leftCountDown()
        }
		else{
			app.rightCountDown()
        }	
	}



  }
})
</script>