公司辩论赛,帮行政小姐姐写的小工具。
第一个是发言倒计时,可以自己指定时间。
第二个是自由辩论,双方各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>