vue 倒计时
简单粗暴
export default {
data () {
return {
timer: 30, //默认倒数30秒
stop : false, //默认是停止的,但界面加载之后会变成false
Interval:null //setInterval的对象
}
},
methods : {
update () {
if(this.timer <= 0)
{
this.timer = 30;
}
else{
this.timer--;
}
},
startTimer () {
//如果是false就开始倒计时,如果是true就停止倒计时
if(this.stop == false)
{
this.Interval = setInterval(this.update,1000);
}
else
{
clearInterval(this.Interval);
}
this.stop = !this.stop;
}
}
}
vue 倒计时的更多相关文章
- vue 倒计时返回首页
1. vue页面15分钟无操作时返回首页 2. 基于vue的倒计时demo 3. 在vue2.0项目中一个简单的倒计时功能 4. vue重新发送验证码 5. 表格<td>里面文字垂直显示
- vue 倒计时 iOS无效
vue实现的倒计时在苹果手机上无效,原因是因为后台返回的时间格式是'2019-1-29 17:13:04',而苹果手机只能解析这种时间格式'YYYY/MM/DD HH:mm:ss',修改后测试成功的代 ...
- vue倒计时:天时分秒
data数据定义 data () { return { curStartTime: '2019-07-31 08:00:00', day: '0', hour: '00', min: '00', se ...
- Vue 倒计时组件封装
项目中需要用到倒计时的功能,封装了一个组件. 代码解读: 1:created周期中获取传入参数时间的剩余秒数: this.initSecondsLeft() 并绑定间隔事件 intervalEvent ...
- vue 倒计时组件
<template> <span> <i v-text="msg"></i> </span></template& ...
- vue倒计时页面
https://www.cnblogs.com/sichaoyun/p/6645042.html https://blog.csdn.net/sinat_17775997/article/detail ...
- canvas实现倒计时效果示例(vue组件内编写)
前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...
- vue 设计一个倒计时秒杀的组件
简介: 倒计时秒杀组件在电商网站中层出不穷 不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的 核心思路:1.时间不能是本地客户端的时间 必须是服务器的时间这里用一个settimeout ...
- vue实现验证码倒计时60秒的具体代码
vue实现验证码倒计时60秒的具体代码 <span v-show="show" @click="getCode">获取验证码</span> ...
随机推荐
- css新增选择器
- class.forname()用法 转
主要功能 Class.forName(xxx.xx.xx)返回的是一个类 Class.forName(xxx.xx.xx)的作用是要求JVM查找并加载指定的类, 也就是说JVM会执行该类的静态代码段 ...
- Something about "for"
For语句引导了一个循环语句,格式for(::),例for(int i=0;i<100;i++).类似于if()括号的作用for()括号如同if()括号一样也是一个boolean型.int i= ...
- Java解析HTML之HTMLParser使用与详解
http://blog.csdn.net/jediael_lu/article/details/26285951
- 三进制状压 HDOJ 3001 Travelling
题目传送门 题意:从某个点出发,所有点都走过且最多走两次,问最小花费 分析:数据量这么小应该是状压题,旅行商TSP的变形.dp[st][i]表示状态st,在i点时的最小花费,用三进制状压.以后任意进制 ...
- bug提交模板
简述所属版本所属模块严重等级优先级分配给[网络情况][前置条件][详情描述] 1. 2. 3.[预期结果][实际结果][历史版本][备注][是否补充用例] 另外: 1.若和界面有关的bug尽量提供对应 ...
- 【Cocos2d-x游戏开发】解决Cocos2d-x中文乱码的三种方法
众所周知,Cocos2d-x是一款不错的开源引擎,但是在Cocos2d-x中直接使用中文是无法正确显示的.比如下面的情况: 解决这个问题常用的有三种方法:1.通过转换为UTF-8编码来显示.2.使用i ...
- BZOJ3591: 最长上升子序列
因为是一个排列,所以可以用$n$位二进制数来表示$O(n\log n)$求LIS时的单调栈. 首先通过$O(n^22^n)$的预处理,求出每种LIS状态后面新加一个数之后的状态. 设$f[i][j]$ ...
- 关于Div的宽度与高度的100%设定
http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html 正像你所知道的那样,设置DIV大小的有两个属性width和heig ...
- 《隆重介绍 思源黑体:一款Pan-CJK 开源字体》
关于思源黑体 思源黑体是谷歌与 Adobe 联合开发,支持简体中文.繁体中文.日文.韩文以及英文:支持 ExtraLight.Light.Normal.Regular.Medium.Bold 和 He ...