使用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. Java_数组, 懒得整理了 ---------------------> 未完, 待续

    待续 public class TestArray { public static void main(String[] args) { String[] s1 = {"双儿", ...

  2. The Product-Minded Software Engineer

    转自The Product-Minded Software Engineer Product-minded engineers are developers with lots of interest ...

  3. 制作安装Linux操作系统的启动U盘方法其实就这么简单

    安装系统前,我们需要制作系统安装启动U盘(或者DVD,但已经很少使用DVD,所以不再介绍),通过启动U盘来帮助我们安装下载好的Linux系统. 接下来我们来介绍在Windows.Linux和MacOS ...

  4. 知识全聚集 .Net Core 技术突破 | 我用C#手把手教你玩微信自动化一

    知识全聚集 .Net Core 技术突破 | 我用C#手把手教你玩微信自动化一 教程 01 | 模块化方案一 02 | 模块化方案二 03 | 简单说说工作单元 其他教程预览 分库分表项目实战教程 G ...

  5. Cocos Creator与VS Code整合代码提示问题

    Cocos Creator与VS Code整合开发配置 在Cocos Creator中依次点击下面框中的菜单 VS Code工作流 配置Cocos Creator的默认编辑器 Cocos Creato ...

  6. Kafka 生产者分区策略

    分区策略 1)分区的原因 (1)方便在集群中扩展,每个 Partition 可以通过调整以适应它所在的机器,而一个 topic 又可以有多个 Partition 组成,因此整个集群就可以适应任意大小的 ...

  7. binary hacks读数笔记(objdump命令)

    一.首先看一下几个常用参数的基本含义: objdump命令是Linux下的反汇编目标文件或者可执行文件的命令,它还有其他作用,下面以ELF格式可执行文件test为例详细介绍: 1.objdump -f ...

  8. JAVA SE——集合框架

    1.首先根据业务场景选择哪种集合类型. set(无序,并且不包含重复元素),list(有序,并且允许重复元素),map(key-value,)

  9. Ceph数据盘怎样实现自动挂载

    前言 在Centos7 下,现在采用了 systemctl来控制服务,这个刚开始用起来可能不太习惯,不过这个服务比之前的服务控制要强大的多,可以做更多的控制,本节将来介绍下关于 Ceph的 osd 磁 ...

  10. Python_入门第一篇【持续更新...】

    1.准备 准备电脑 和 分区 1.准备配置稍高的电脑(后后期需要装虚拟机),分辨率1920*1080 2.分区: C→系统 D→Project E→软件安装盘 F→其他 准备编辑器 1.Sublime ...