基于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>
效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
在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 使用计时器实现跑马灯效果的实例代码
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计时器的实现方法
本文实例为大家分享了vue实现计时器的具体代码,供大家参考,具体内容如下 这里做的是点击按钮开始与结束倒计时的功能 <div class="time" v-if="rptType">{{str}}</div> <div class="receipt" :class="rptType?'jdz':'jiedan'" @click="receipt">开始</div&g
-
Vue-cli框架实现计时器应用
技术背景 本应用使用 vue-cli 框架,并使用了自定义组件(将按钮拆分成单独的组件)和vue 模板. 使用说明 开始正计时:点击工具栏的"开始正计时"按钮即可,快捷键为"Enter"键. 开始倒计时:在输入框内写入时间后,点击"开始倒计时"按钮,即可开始倒计时. 暂停计时器:点击"暂停计时器"按钮即可暂停. 清空正/倒计时:点击此按钮,计时器便会回到初始状态,等待新的计时. 重新再计时:点击此按钮,计时器便会重新开始此次计
-
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实现简易计时器组件
在做项目中难免会碰到需要实时刷新,广告动画依次出现等等需求,刚最近基于业务需求,需要实现一个累加通话时长的计时器,这时候就需要定时器登上我们的代码舞台了,其实对于计时器,它的原理就是通过定时器来实现的,那么在写业务需求之前,我先说说关于定时器的一些知识. window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval. 在Javascript中,代码一般都是同步执行的,但定时器却是异步执行的. window.setTimeou
-
Vue计时器的用法详解
本文实例为大家分享了Vue实现计时器的具体代码,供大家参考,具体内容如下 功能简介: 1.初始值为0,点击[加]按钮,数字自+1:连续点击[加],不影响数字+1 2.点击[停]按钮,停止+1 源码: <!DOCTYPE html> <html add="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="
-
vue 计时器组件的实现代码
整理文档,搜刮出一个vue 计时器组件的代码,稍微整理精简一下做下分享. <template> <div> <span :sendSync="sendSync" :autoStart="autoStart" :defaultVal="defaultVal" >{{countString}}</span> </div> </template> <script> ex
-
解决vue组件销毁之后计时器继续执行的问题
直接上代码,以下 window.setTimeout(function(){ if(this && !this._isDestroyed){ //_isDestroyed 组件是否被销毁 return; } window.location.href = "/serverMonitor?t="+ new Date().getTime(); },5000) 很粗暴的方法,在执行之前看是否被销毁就行, 第二种方法,调用路由组件内的钩子函数beforeRouteLeave be
-
使用vue实现计时器功能
本文实例为大家分享了vue实现计时器功能的具体代码,供大家参考,具体内容如下 首先我们要知道setTimeout和setInterval的区别 setTimeout只在指定时间后执行一次,代码如下: <script> //定时器 异步运行 function hello(){ alert("hello"); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout(&qu
随机推荐
- jQuery使用bind函数实现绑定多个事件的方法
- 去掉字符串前后所有空格的正则表达式
- C#传递参数到线程的方法汇总
- php,ajax实现分页
- 8个PHP程序员常用的功能汇总
- 去除段首段尾的 和全角的空格的正则
- C++回文数及素数问题计算方法
- js css实现垂直方向自适应的三角提示菜单
- 利用js判断手机是否安装某个app的多种方案
- js实现兼容IE、Firefox的图片缩放代码
- lua获取未来某时间点的时间戳解决方案
- 使用javascript获取页面名称
- Java中int与integer的区别(基本数据类型与引用数据类型)
- javascript实时显示北京时间的方法
- 个人站长制做网页常用的php代码
- C#的WebBrowser操作frame实例解析
- C# 去除首尾字符或字符串的方法
- PC版与Android手机版带断点续传的多线程下载
- 浅谈C++中的mutable和volatile关键字
- 分布式服务Dubbo+Zookeeper安全认证实例