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"></script>
  <script src="/static/vue/vue-resource.min.js"></script>
  <link rel="stylesheet" href="/static/vue/index.css" >
</head>
<style type="text/css">
  .el-container {
    margin:100px 30px 30px 30px ;
    height:1800px;
    background-color: #B3C0D1;
  }
  .el-button{
    height:1800px;
    width:100%;
    font-size:300px;
  }
</style>
<body>
  <div id="app">
    <el-container>
      <el-button type="primary" :disabled="!canclick" @click="add">
        {{ num }} <el-divider></el-divider> {{ content }}
      </el-button>
    </el-container>
    <video ref="notify">
      <source src="countdown.m4a" />
    </video>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: function () {
        return {
          num:0,
          canclick:true,
          content:"计数器",
          count:10
        }
      },
      mounted(){
        this.getnum() //获取所有选择项
      },
      methods:{
        getnum:function(){
          this.$http.get('/api/count/count.php').then(function(res){
            this.num=res.data
          },function(){
            console.log('请求失败处理')
          });
        },
        add:function(){
          this.canclick=false
          this.$refs.notify.play()
          this.content=this.count+'s后结束'
          let clock=setInterval(()=>{
            this.count--
            this.content=this.count+'s后结束'
            if(this.count==0){
              this.content="计数器"
              clearInterval(clock)
              this.canclick=true
              this.count=10
            }
          },850);
          this.$http.get('/api/count/add.php?num='+this.num).then(function(res){
            this.num=res.data
          },function(){
            console.log('请求失败处理')
          });
        }
      }
    })
  </script>
</body>
</html>

效果如下

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

(0)

相关推荐

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

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

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

  • 在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组件销毁之后计时器继续执行的问题

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

  • Vue计时器的用法详解

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

  • 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.js实现简单购物车功能

    本文实例为大家分享了vue.js实现简单购物车的具体代码,供大家参考,具体内容如下 这次我将给大家带来一个vue.js实现购物车的小项目,如有不足请严厉指出. 购物车功能有:全选和选择部分商品,选中商品总价计算,商品移除,以及调整购买数量等功能. js主要有以下方法 加函数,减函数,手动修改数量判断库存函数,总价格计算函数,单选事件,全选事件,一共分为6个事件 具体效果如下图 代码在这里 main.js 'use strict' var app = new Vue({ el: '#app', d

  • JS使用setInterval实现的简单计时器功能示例

    本文实例讲述了JS使用setInterval实现的简单计时器功能.分享给大家供大家参考,具体如下: 使用setInterval实现计时,并且满60秒向分钟进一,满60分钟向小时进一. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS计时器</title> <script> window.onload =

  • Vue.js实现的计算器功能完整示例

    本文实例讲述了Vue.js实现的计算器功能.分享给大家供大家参考,具体如下: 1. HTML部分代码 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/css.css" rel="external nofollow" > <sc

  • html+vue.js 实现漂亮分页功能可兼容IE

    当功能比较简单,在单一html中使用vue.js分页展示数据,并未安装脚手架,或使用相关UI框架,此时需要手写一个分页器,不失为最合理最便捷的解决方案 先看一下实现效果: 上代码: 1.简单搞一搞 CSS,此处代码有折叠 2.简单搞一搞 HTML <div id="app" v-cloak @click="showOption=false"> 第{{pageIndex}}页, 每页显示{{pageSize}}条 <div v-show="

  • vue+tp5实现简单登录功能

    本文实例为大家分享了vue+tp5实现简单登录功能的具体代码,供大家参考,具体内容如下 准备工作:安装vue-cli,element-ui,package.json中如图所示,看着安装吧 1.在src目录下新建一个views放置页面 2. 在/src/router/index.js中写入: import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' i

  • Vue.js实现价格计算器功能

    本文实例为大家分享了Vue.js实现价格计算器功能的具体代码,供大家参考,具体内容如下 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>价格计算器</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial

  • JS实现简单路由器功能的方法

    本文实例讲述了JS实现简单路由器功能的方法.分享给大家供大家参考.具体实现方法如下: var wawa = {}; wawa.Router = function(){ function Router(){ } Router.prototype.setup = function(routemap, defaultFunc){ var that = this, rule, func; this.routemap = []; this.defaultFunc = defaultFunc; for (v

  • vue.js实现的幻灯片功能示例

    本文实例讲述了vue.js实现的幻灯片功能.分享给大家供大家参考,具体如下: 1.在父组件中 <slide-show :slides="slides"></slide-show> import SlideShow from '@/components/SlideShow' export default { components: { SlideShow, }, 2.在slideshow.vue中 <template> <div class=&q

  • vue.js实现图书管理功能

    本文实例为大家分享了vue.js实现图书管理功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta

随机推荐