使用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. 排序算法—快速排序(Quick Sort)

    快速排序(Quick Sort) 快速排序的基本思想:通过一趟排序将待排记录分隔成独立的两部分,其中一部分记录的关键字均比另一部分的关键字小,则可分别对这两部分记录继续进行排序,以达到整个序列有序. ...

  2. SpringBoot学习笔记(十七:MyBatis-Plus )

    @ 目录 一.MyBatis-Plus简介 二.基本用法 1.准备数据 2.引入依赖 2.配置 3.代码 4.测试 三.自定义SQL 1.自定义批量插入 2.自定义查询 2.1.自定义返回结果 2.2 ...

  3. 利用.NET 5和Github Action 自动执行米游社原神每日签到福利

    背景 众所周知,原神的签到福利是需要下载app才可以领取的.但像我这种一般不怎么刷论坛的人,每天点开app签到很麻烦. 很多大佬利用Github的Action自动执行的模式,实现了很多好东西.加上.n ...

  4. [UNCTF2020]BetterCpu WriteUp

    这题不同前一题虚拟机ezvm一样,指令很多而且复杂,需要通过写文档和脚本来化简过程. 直接丢进IDA7.2(如果使用IDA7.0则虚拟机的emulator部分会分析出错)查看. 进入main函数后按F ...

  5. 一篇文章了解_unittest

    1. 基本概念 2018年10月7日 星期日 11:39 unittest是python自带的单元测试框架,有时候又被称为"PyUnit",是python版本的JUint实现. 该 ...

  6. JUC锁种类总结

    在并发编程中有各种各样的锁,有的锁对象一个就身兼多种锁身份,所以初学者常常对这些锁造成混淆,所以这里来总结一下这些锁的特点和实现. 乐观锁.悲观锁 悲观锁 悲观锁是最常见的锁,我们常说的加锁指的也就是 ...

  7. 动态导航栏和JavaScript箭头函数

    动态导航栏和JavaScript箭头函数 今天我们来写一下动态的导航栏,并且学一下JavaScript的箭头函数等相关问题. 样式如下所示: html中执行代码如下所示: <!DOCTYPE h ...

  8. 我要进大厂之大数据ZooKeeper知识点(2)

    01 我们一起学大数据 接下来是大数据ZooKeeper的比较偏架构的部分,会有一点难度,老刘也花了好长时间理解和背下来,希望对想学大数据的同学有帮助,也特别希望能够得到大佬的批评和指点. 02 知识 ...

  9. Matlab项目经验分享-去除震荡点

    Matlab是做科研是比较常用的建模工具,我在研一做项目期间遇到了一个还算比较基础的问题,所以我打算记录下来并分享出来! 处理问题步骤: 1. 抛出问题 2. 思考解决方法 3. 代码验证看结果 抛出 ...

  10. 网站滑到指定的位置给div添加动画效果

    <!DOCTYPE html> <html> <head> <style> .anim-show { width:100px; height:100px ...