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>
效果如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
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对象提供了两个方法来实现定时器的效果,分别是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 使用计时器实现跑马灯效果,代码如下所示: <!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实现计时器功能的具体代码,供大家参考,具体内容如下 首先我们要知道setTimeout和setInterval的区别 setTimeout只在指定时间后执行一次,代码如下: <script> //定时器 异步运行 function hello(){ alert("hello"); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout(&qu
-
在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组件销毁之后计时器继续执行的问题
直接上代码,以下 window.setTimeout(function(){ if(this && !this._isDestroyed){ //_isDestroyed 组件是否被销毁 return; } window.location.href = "/serverMonitor?t="+ new Date().getTime(); },5000) 很粗暴的方法,在执行之前看是否被销毁就行, 第二种方法,调用路由组件内的钩子函数beforeRouteLeave be
-
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