思路:

一、效果图:

二、CSS代码

.box{
width: 300px;
height: 100px;
line-height: 100px;
margin: 100px auto;
background-color: #eee;
text-align: center;
font-size: 30px;
color: #666;
}
.count-number{
color: red;
font-size: 30px;
font-weight: bold;
}

三、HTML代码

<div class="wrap">
<countdown seconds="15" index="1"></countdown>
<countdown seconds="30" index="2"></countdown>
</div>

四、JAVASCRIPT代码

// 倒计时组件
Vue.component('countdown', {
props: ['seconds', 'index'],
data: () => {
return {
timerCount: 0
}
},
mounted() {
this.timing();
},
methods: {
timing() {
let startTime = localStorage.getItem(`startTime${this.index}`);
let nowTime = new Date().getTime();
if(startTime) {
let surplus = this.seconds - parseInt((nowTime-startTime) / 1000, 10);
this.timerCount = surplus <= 0 ? 0 : surplus;
} else {
this.timerCount = this.seconds;
localStorage.setItem(`startTime${this.index}`, nowTime);
} let timer = setInterval(() => {
if(this.timerCount > 0 && this.timerCount <= this.seconds) {
this.timerCount--;
   } else {
localStorage.removeItem(`startTime${this.index}`);
clearInterval(timer);
}
}, 1000);
}
},
template: `<div class="box">倒计时 <span class="count-number">{{timerCount < 10 ? '0' + timerCount : timerCount}}</span> 秒</div>`
}); // Vue实例
new Vue({
el: '.wrap'
});

VUE组件 之 倒计时(防刷新)的更多相关文章

  1. php倒计时防刷新

    <?php //php的时间是以秒算.js的时间以毫秒算 date_default_timezone_set("Asia/Hong_Kong");//地区 //配置每天的活动 ...

  2. canvas实现倒计时效果示例(vue组件内编写)

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

  3. vue组件重新加载(刷新)

    vue组件重新加载(刷新) 第一种方法:利用v-if控制router-view,在根组件APP.vue中实现一个刷新方法 <template> <router-view v-if=& ...

  4. vue mint-ui 框架下拉刷新上拉加载组件的使用

    安装 npm i mint-ui -S 然后在main.js中引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.us ...

  5. vue组件通信的几种方式

    最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...

  6. vue单页应用前进刷新后退不刷新方案探讨

    引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview ...

  7. VUE组件汇总

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

  8. python 全栈开发,Day90(Vue组件,前端开发工具包)

    昨日内容回顾 1. Vue使用 1. 生成Vue实例和DOM中元素绑定 2. app.$el --> 取出该vue实例绑定的DOM标签 3. app.$data --> 取出该vue实例绑 ...

  9. vue 缓存的keepalive页面刷新数据

    用到这个的业务场景是这样的: a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条, 点击这条的时候进入到编辑页面,确认 ...

随机推荐

  1. Powershell渗透测试系列–进阶篇

    原文来自:https://bbs.ichunqiu.com/thread-41561-1-1.html i春秋作家:anyedt 0×00 引言 经过基础篇的学习我们已经对powershell有了一个 ...

  2. apk文件md5校验之用好压对下载服务器测试[测试篇]

    往往稍微有点规模的公司,都会有一个独立下载服务器,那么,我还是简单说一下下载服务器的原理吧,首先后台上传文件或软件,然后web服务器通过定时脚本检测,如有变化,则将文件同步出去到下载服务器,源站数据库 ...

  3. 分享一个windows下检测硬件信息的bat脚本

    文件名必须以.bat结尾,如果出现闪退,请右击鼠标,以管理身份运行即可 @echo offcolor 0atitle 硬件检测 mode con cols=90sc config winmgmt st ...

  4. 实现文本在标签内平均分布的css样式

    这里有一个容器,添加了一段文字,想让它们平均分布达到标签flex布局的效果,而不是靠左.靠右或者居中显示. 添加样式: text-align: justify; text-align-last: ju ...

  5. 脚手架vue-cli系列二:vue-cli的工程模板与构建工具

    上篇文章我们提到了vue-cli的工程模板.这里我们来详细的进行介绍. vue-cli提供的脚手架只是一个最基础的,也可以说是Vue团队认为的工程结构的一种最佳实践.对于初学者或者以前曾从事Angul ...

  6. [每天解决一问题系列 - 0013] 如何修改WiX Burn内置的窗口

    问题描述: 我们产品的burn安装包仅支持.net 3.5 sp1以上,在只有.net 2.0的机器上会给用户弹一个窗口,告诉用户为什么不能够安装的原因.本来burn已经内置了,但是在日文操作系统下, ...

  7. 课程四(Convolutional Neural Networks),第二 周(Deep convolutional models: case studies) —— 0.Learning Goals

    Learning Goals Understand multiple foundational papers of convolutional neural networks Analyze the ...

  8. Jenkins系列之一——初识

    Jenkins Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. 功能 Jenkins功能包括 ...

  9. Android开源系列:仿网易Tab分类排序控件实现

    前言 产品:网易新闻那个Tab排序好帅. 开发:哦~ 然后这个东东在几天后就出现了..... (PS:差不多一年没回来写博客了~~~~(>_<)~~~~,顺便把名字从 enjoy风铃 修改 ...

  10. ie请求缓存问题,页面内容没有及时更新

    问题一:列表页面删除一条数据成功了,但页面上还有数据,再次点击删除,报错了... 问题二:一个点赞按钮,点击后发送一个请求,后台返回1或0 (点赞.取消点赞) ,谷歌浏览器功能正常,但在ie浏览器,后 ...