vue实现简易计时器组件

2024-08-01 10:13:48

在做项目中难免会碰到需要实时刷新，广告动画依次出现等等需求，刚最近基于业务需求，需要实现一个累加通话时长的计时器，这时候就需要定时器登上我们的代码舞台了，其实对于计时器，它的原理就是通过定时器来实现的，那么在写业务需求之前，我先说说关于定时器的一些知识。

window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。

在Javascript中，代码一般都是同步执行的，但定时器却是异步执行的。

window.setTimeout(callback,delay);   //callback:回调函数 delay：时间间隔时长
window.setInterval(callback,delay);

定时器分为隔时定时器setInterval和延时定时器setTimeout

那么它们两到底有什么区别呢？

setInterval以指定时间为周期循环执行，一般用于刷新表单、复杂动画的循环执行，对于一些表单的实时指定时间刷新同步
setTimeout只在指定时间后执行一次,像有些网站刚进去会出现一个弹窗广告，一般都是用的setTimeout

了解了定时器的基本知识之后,那么接下来就可以进行功能的实现了。

HTML

<template>
    <div class="timer">
    <div>{{nowTime}}</div>
    </div>
</template>

Javascript

<script>
    export default {
    name: 'Timer',
    data () {
     return {
      timer: null,
      nowTime:"",
      hour: 0,
      minutes: 0,
      seconds: 0
      }
    },
    created () {
    this.timer = setInterval(this.startTimer, 1000);
    },
    destroyed () {
    clearInterval(this.timer);
    },

    methods: {
    startTimer () {
     //建议开启定时器前，先清除定时器，避免定时器累加，出现不可预期的bug
     if(this.timer) {
   clearInterval(this.timer);
  }
     this.seconds += 1;
     if (this.seconds >= 60) {
      this.seconds = 0;
      this.minutes= this.minutes+ 1;
     }
     if (this.minutes>= 60) {
      this.minutes= 0;
      this.hour = this.hour + 1;
     }
     this.nowTime = this.toZero(this.hour): this.toZero(this.minutes):this.toZero(this.seconds)
    },
     toZero(timeNumber) {
     return timeNumber<10?"0"+timeNumber：timeNumber
   },
 }
}
</script>

这样，一个简单的计时器组件就实现好了，其实还有其他的实现思路，如果以后开发碰到了类似的需求，可以借鉴，希望对你们有所帮助。

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

vue 计时器组件的实现代码

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

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

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

项目需求,嵌到elementUi里的小组件,写得不好,不喜勿喷,谢谢父组件代码 <template> <div> <see-attachment :filesLists='files' :file='imgFile' v-if="showmask" @hideMask='showmask=false'></see-attachment> </div> </template> <script> impo
Vue+ElementUI 封装简易PaginationSelect组件的详细步骤

在实际开发工作中,经常会碰到当select下拉数据过需要做分页的情况这里简单介绍封装的一个Pagination-Select组件几个步骤封装的比较简易,可以根据自己的项目进行改动 /components/Pagination-Select/index.vue <template> <div id="PaginationSelect"> <el-select v-model="value" :placeholder="selec
vue实现商城上货组件简易版

本文实例为大家分享了vue实现商城上货组件的具体代码,供大家参考,具体内容如下 0.结果放前面点击查看效果带脚手架的源码加个Star后,fork下来. 然后在控制台,先输入npm install安装依赖,再输入npm run dev运行查看效果 1.先列需求一切开发都是基于需求做的,所以需求先行,根据需求设计功能. 需求如下: 上货商品有多个属性类别:(例如:颜色.尺寸.型号) 每个类别有多个子属性:(例如:白色.绿色.金色) 每个商品必然具备每个类别的其中一个子属性: 除此之外还有额外
vue.js的提示组件

这次的教程里,我们要把组件化进行到底!最近半年的几个项目中,都遇到了需要使用Toast或者Notification组件的情况.在目前已有的一些基于Vue.js开发的组件库,都没有找到太合适的,所以自己重头实现了一个.历经几个项目的磨练,这个提示组件的功能已经越来越完善,这次就分享一下组件以及其实现思路吧. GitHub 仓库: https://github.com/Yuyz0112/vue-notie Demo 地址: http://lab.myriptide.com/vue-notie/ 深入
vue获取验证码倒计时组件

本文实例为大家分享了vue获取验证码倒计时组件,供大家参考,具体内容如下之前写过一个计时函数,有计算误差,但是验证码的60秒倒计时可以忽略这一点点误差.直接上代码. <template> <div class="captcha-row"> <input class="captcha-input" placeholder="输入验证码" auto-focus /> <div v-if="show
vue图片上传组件使用详解

vue图片上传组件,供大家参考,具体内容如下最近在做项目的时候顺便补充了一下公司项目的公共组件库,刚刚手头事情告一段落,就来做个笔记. 首先来看看最终效果 1.不允许删除 2.允许用户删除(显示删除按钮) 实现的效果就是上图显示内容接下来说说组件布局那部分直接上代码了 <template> <div class="uploadImg"> <div class="upload-content"> <div class=&q
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

本文介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持,分享给大家,具体如下: 一个小遗憾能来看这篇文章的想必不用我来介绍vue是什么了.先让我们膜拜大神!vue项目的创建者尤大写了个sublime下语法高亮的插件,有人问他how about webstorm support?他是这么回答的.默哀一分钟. 添加高亮和语法支持这个我是通过插件来实现的.网上目前有两个插件: 插件1:https://github.com/henjue/vue-for-idea 插件2:htt
基于Vue如何封装分页组件

使用Vue做双向绑定的时候,可能经常会用到分页功能接下来我们来封装一个分页组件先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px; } .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-se

vue实现简易计时器组件

相关推荐

随机推荐