使用cookie倒计时60s

Vue实例创建一个变量time=0

生命周期一般是created,给time赋值一个cookie的键值-当前的时间(因为刚进入页面这时是没有cookie的,所以time变成一个负值),所以判断time值是否>0,是否调用定时器函数

this.time = getCookie().email - parseInt(new Date().getTime() / 1000)

定义一个函数定时器,数据绑定,使用{{}}插值表达式在标签,定时器每次time自身减一,判断time值<=0时,终止定时器的使用

const count = setInterval(() => {

this.time--

if (this.time <= 0) clearInterval(count)

}, 1000)

点击事件函数:创建一个cookie,键值为当前的时间戳+60,time赋值60,调用定时器函数

const end = parseInt(new Date().getTime() / 1000) + 60

设定两个button,判断条件显示一个按钮

cookie倒计时的更多相关文章

  1. 设置cookie倒计时让让表单自动提交

    <%@ page language="java" import="java.util.*" pageEncoding="gbk"%&g ...

  2. js cookie 页面倒计时

    疯了啦 写了一篇没有保存需求:页面倒计时 只从第一次加购开始公共方法cookie的设置 获取function getCookie(c_name){ if (document.cookie.length ...

  3. 网页存储倒计时与解决网页cookie保存多个相同key问题

    短信倒计时多用网页临时存储,这可以保证网页在关闭状态也可记时. <p class="test_button" id="getcode">获取验证码& ...

  4. Webform:Session、Cookie对象的用法

    Session 优点:1.使用简单,不仅能传递简单数据类型,还能传递对象.  2.数据量大小是不限制的. 缺点:1.在Session变量存储大量的数据会消耗较多的服务器资源. 2.容易丢失. 使用方法 ...

  5. webform中Session和Cookie对象的用法

    Session: Session:在计算机中,尤其是在网络应用中,称为"会话控制".Session 对象存储特定用户会话所需的属性及配置信息.这样,当用户在应用程序的 Web页之间 ...

  6. js实现发送短信验证码后的倒计时功能(无视页面刷新)

    [1].[代码] 这是页面上的发送验证码按钮 跳至 [1] [2] [3]<input id="second" type="button" value=& ...

  7. Session与Cookie

    Session与Cookie的比较 Cookie与Session都可以进行会话跟踪,但是实现的原理不太一样.一般情况下二者均可以满足需求,但有时候不可以使用Cookie,有时候不可以使用Session ...

  8. js防刷新的倒计时

    近期在维护考试系统,在进行考试測试时无意中点击了刷新button.可是上面的倒计时并没有受到影响.同一时候在几篇博客中也有这种样例,所以我想看看它究竟是如何防止刷新的. 假设是用cs代码写.我们可能会 ...

  9. session和cookie介绍以及session简单应用

    介绍http协议与TCP协议:        http协议:是短连接,关闭浏览器的时候断开与服务器的连接         TCP协议:是长连接,连接一直存在         http协议是在TCP协议 ...

随机推荐

  1. 纯CSS实现3D正方体动画效果

    前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​

  2. 是什么让我节省了60%的编码时间?使用MBG

    MyBatis Generator简介 业务需求不断变更,数据库表结构不断修改,是我们逃不出的宿命.工欲善其事,必先利其器,是时候祭出神器了:MyBatis Generator(简称:MBG),它是一 ...

  3. leetcode 30day--2

    202. Happy Number Write an algorithm to determine if a number n is "happy". A happy number ...

  4. spring 2.5 基础知识和与其他框架的集成

    spring环境搭建: 一:导入spring2.5所需的包,在classpath目录下建一个名为"beans.xml"模板文件: <?xml version="1. ...

  5. 【干货!!】十分钟带你搞懂 Java AQS 核心设计与实现!!!

    前言 这篇文章写完放着也蛮久的了,今天终于发布了,对于拖延症患者来说也真是不容易-哈哈哈. 言归正传,其实吧..我觉得对于大部分想了解 AQS 的朋友来说,明白 AQS 是个啥玩意儿以及为啥需要 AQ ...

  6. On Starting My Blogging On CNBlogs

    About Myself I am a would-be Master of Engineering, on the last year of my student life, I'm ambitou ...

  7. 如何用Prometheus监控十万container的Kubernetes集群

    概述 不久前,我们在文章<如何扩展单个Prometheus实现近万Kubernetes集群监控?>中详细介绍了TKE团队大规模Kubernetes联邦监控系统Kvass的演进过程,其中介绍 ...

  8. 思维导图哪款好用?怎么借助MindManager 做旅游计划

    世界那么大,想不想去看看!想不想来一场说走就走的旅行?尤其是在新冠的笼罩下, 2020年已经过去四分之三,国内疫情已经基本得到了控制,接下来的日子里你想出门好好玩玩吗? 说走就走的旅游虽然美好,但是你 ...

  9. Echo Delay:FL中好用的声音制作处理方法

    今天来一起研究FL Studio的Echo Delay的作用,Echo Delay可以从MIDI输入创建回声,并允许我们通过音量,声像,切除和共振,音高和时间来操纵延迟. 图1:Echo Dealy ...

  10. 微课制作软件Camtasia,来为视频添加预设动画效果

    之前已介绍过使用微课制作软件Camtasia为视频添加"缩放和平移"动画的教程以及"效果按钮"的使用. 此篇内容,我们就来介绍使用录像编辑软件--Camtasi ...