基于Vue方法实现简单计时器

Vue简单的计时器，供大家参考，具体内容如下

原理：setInterval来每隔1s(可设置的时间间隔)运行一次自增方法，clearInterval来让持续运行的自增方法停止，来达到计时器的功能。Vue部分，利用到Vue实时刷新视图的功能，来将自增变量的值展示在前端。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Time</title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <div id="app">
   <input type="button" name="" id="" value="开始" @click="start"/></br>
   <h1>{{number}}</h1>
   <input type="button" name="" id="" value="暂停" @click="stop"/></br>
  </div>

  <script type="text/javascript">
   var vm=new Vue({
    el:"#app",
    data:{
     number:0
    },
    methods:{
     start:function(){
      time=setInterval(function(){
       vm.number++
      },1000)
     },
     stop:function(){
      clearInterval(time)
     }
    }
   })
  </script>
 </body>
</html>

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue计时器的实现方法

    vue计时器的实现方法

    本文实例为大家分享了vue实现计时器的具体代码,供大家参考,具体内容如下 这里做的是点击按钮开始与结束倒计时的功能 <div class="time" v-if="rptType">{{str}}</div> <div class="receipt" :class="rptType?'jdz':'jiedan'" @click="receipt">开始</div&g

  • Vue计时器的用法详解

    Vue计时器的用法详解

    本文实例为大家分享了Vue实现计时器的具体代码,供大家参考,具体内容如下 功能简介: 1.初始值为0,点击[加]按钮,数字自+1:连续点击[加],不影响数字+1 2.点击[停]按钮,停止+1 源码: <!DOCTYPE html> <html add="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

  • 解决vue组件销毁之后计时器继续执行的问题

    直接上代码,以下 window.setTimeout(function(){ if(this && !this._isDestroyed){ //_isDestroyed 组件是否被销毁 return; } window.location.href = "/serverMonitor?t="+ new Date().getTime(); },5000) 很粗暴的方法,在执行之前看是否被销毁就行, 第二种方法,调用路由组件内的钩子函数beforeRouteLeave be

  • 使用vue实现计时器功能

    使用vue实现计时器功能

    本文实例为大家分享了vue实现计时器功能的具体代码,供大家参考,具体内容如下 首先我们要知道setTimeout和setInterval的区别 setTimeout只在指定时间后执行一次,代码如下: <script> //定时器 异步运行 function hello(){ alert("hello"); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout(&qu

  • vue实现简易计时器组件

    在做项目中难免会碰到需要实时刷新,广告动画依次出现等等需求,刚最近基于业务需求,需要实现一个累加通话时长的计时器,这时候就需要定时器登上我们的代码舞台了,其实对于计时器,它的原理就是通过定时器来实现的,那么在写业务需求之前,我先说说关于定时器的一些知识. window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval. 在Javascript中,代码一般都是同步执行的,但定时器却是异步执行的. window.setTimeou

  • vue 计时器组件的实现代码

    整理文档,搜刮出一个vue 计时器组件的代码,稍微整理精简一下做下分享. <template> <div> <span :sendSync="sendSync" :autoStart="autoStart" :defaultVal="defaultVal" >{{countString}}</span> </div> </template> <script> ex

  • vue.js实现简单计时器功能

    vue.js实现简单计时器功能

    本文实例为大家分享了vue.js实现简单计时器功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <title>抬腿计数器</title> <script src="/static/vue/vue.js"></script> <script src="/static/vue/index.js&quo

  • Vue 使用计时器实现跑马灯效果的实例代码

    Vue 使用计时器实现跑马灯效果的实例代码

    Vue 使用计时器实现跑马灯效果,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="

  • 在Vue环境下利用worker运行interval计时器的步骤

    今天在code review时,发现之前遗留的问题: 在一个视频播放页面,有一个40ms的interval一直在阻碍,导致视频延时逐渐增大 于是写了一个worker单独把计时器拉出去跑了 实现步骤如下 由于用的是vue-cli,在webpack下要安装worker-loader依赖才能单独加载worker.js npm install worker-loader --save-dev 更改 vue.config.js 文件的配置项 configureWebpack:{ module: { rul

  • Vue-cli框架实现计时器应用

    Vue-cli框架实现计时器应用

    技术背景 本应用使用 vue-cli 框架,并使用了自定义组件(将按钮拆分成单独的组件)和vue 模板. 使用说明 开始正计时:点击工具栏的"开始正计时"按钮即可,快捷键为"Enter"键. 开始倒计时:在输入框内写入时间后,点击"开始倒计时"按钮,即可开始倒计时. 暂停计时器:点击"暂停计时器"按钮即可暂停. 清空正/倒计时:点击此按钮,计时器便会回到初始状态,等待新的计时. 重新再计时:点击此按钮,计时器便会重新开始此次计

随机推荐