vue实战：在codesandbox中使用vue实现时，分，秒的计时器

最新推荐文章于 2024-06-24 09:30:29 发布

mandala -chen

最新推荐文章于 2024-06-24 09:30:29 发布

阅读量2k

点赞数

分类专栏： vue 文章标签： vue codesandle JavaScript v-model 前端开发

本文链接：https://blog.csdn.net/qq_41562735/article/details/89056592

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue实战：在codesandbox中使用vue实现时，分，秒的计时器

实验步骤：

首先在codesandbox中点击 creat sandbox 创建一个vue沙盒进入app.vue编写如下vue代码就可以实现一个时分秒的计时器了

<template>
  <div id="app">
    <strong>请输入倒计时时间：</strong>
    <input  v-model="hour"  style='width:20px'></input>时 
    <input v-model="moint"  style='width:20px'></input>分
    <input v-model="seconds"  style='width:20px'></input>秒 

     <div>
<button @click="start()">开始</button>
<p>还剩下{{hour}}时 </p>
<p>还剩下{{moint}}分 </p>
<p>还剩下{{seconds}}秒 </p>
  </div>
  </div>
 
</template>
<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
data(){
  return{
seconds:20,
moint:0,
hour:0

  }
  
},
methods:{
start(){
setTimeout(this.countDpwn,1000);
},
countDpwn(){
  this.seconds-=1;
  if(this.seconds>0){
  setTimeout(this.countDpwn,1000)};
  if(this.seconds==0){
this.moint-=1;
this.seconds=60;
setTimeout(this.countDpwn,1000)
  };
  if(this.moint==0){
this.hour-=1;
this.moint=60;
setTimeout(this.countDpwn,1000)
  };
}

},
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

最后的界面图是这样的（提示;在运行时和修改代码大家不要开启网页翻译功能，因为这会导致程序无法运行和修改）