博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript + PHP 实现刷新继续保持倒计时的按钮
阅读量:6587 次
发布时间:2019-06-24

本文共 1512 字,大约阅读时间需要 5 分钟。

场景:发送一个验证码到手机,当验证码发出时,会提示隔 1 分钟之后可以再次发送。通常有这几种方式防止恶意请求,一是再次发送之前需要输入验证码,二是在指定的时间间隔之内不能再次发送。

有些网站在 1 分钟的间隔之间之内发送按钮的确是禁用了,但是只要刷新浏览器,或者通过 F12 工具修改 Button 的 disabled 属性,在时间间隔之内仍然可以点击按钮。

需要在刷新的情况下仍然保持倒计时,可以在服务器端用过 SESSION 记录点击的时间,并且每次加载页面的时候都去检测当前时间和点击时间的时间差。

测试框架使用 ThinkPHP 3.2.3

视图文件位于:/Application/Home/View/Mail/index.html

控制器位于:/Application/Home/Controller/MailController.class.php

 

index.html:

	
Document

 

MailController.class.php:

display(); } // 记录时间戳 public function record_time() { session_start(); if(IS_AJAX) { $click_time = $_POST['click_time']; if(isset($_SESSION['click_time']) && $click_time - $_SESSION['click_time'] < $_POST['seconds']) { echo 0; // 防止通过 F12 修改 button 的 disabled 属性在间隔时间之内再次点击按钮 } else { $_SESSION['click_time'] = $click_time; echo date('Y-m-d H:i:s', $click_time); } } } // 发送时间戳 public function send_time() { session_start(); $time_diff = time() - $_SESSION['click_time']; if(isset($_SESSION['click_time']) && $time_diff < 30) { $diff = $_POST['seconds'] - $time_diff; if($diff > 0) { echo $_POST['seconds'] - $time_diff; } else { echo 0; } } else { unset($_SESSION['click_time']); } }}

  

实现效果图

初始状态:

 

点击按钮:

console 中显示的时间戳是点击按钮时的时间戳,通过 AJAX 发送到服务器端并且记录在 SESSION 中

 

倒计时结束之前刷新页面:

console 控制台显示的 12 表示距离倒计时结束还有 12 秒,通过加载页面时的 AJAX 请求服务器,比较当前时间和 SESSION 中记录的点击时间(如果有)并且两者相差的时间小于倒计时的时间,则返回剩余的时间,客户端接受到时间后仍然保持按钮禁用,同时从返回的时间开始倒计时。

 

倒计时结束:

按钮恢复可用。

 

在倒计时间隔时间内通过 F12 删除 button 的 disabled 属性,虽然按钮可以点击,但是由于返回值是 0,因此不会触发新的动作以及重新计时:

 

删除属性之前:

转载地址:http://bbhno.baihongyu.com/

你可能感兴趣的文章
在新美大“创业”:KTV预定业务演进之路
查看>>
Swap in C C++ C# Java
查看>>
简单高效的云服务器单元化扩容方案
查看>>
ubuntu开机直接进入命令行模式
查看>>
重读《JavaScript DOM编程艺术》(第一版)
查看>>
Shell脚本监控CPU、内存和硬盘利用率
查看>>
任务记录:OEA 框架中的多类型树控件
查看>>
x264代码剖析(四):vs2010编译x264错误集锦
查看>>
SQL*Plus环境下创建PLUSTRACE角色
查看>>
我所想的GIX4的权限
查看>>
Hbuilder--让手爽,飞一般的编码(二)
查看>>
hdu 4355 Party All the Time
查看>>
容错技术介绍
查看>>
OpenvSwitch readme & faq
查看>>
JAVA生成条码(jbarcode)
查看>>
[经典面试题][百度]数轴上从左到右有n各点a[0], a[1], ……,a[n -1],给定一根长度为L的绳子,求绳子最多能覆盖其中的几个点。...
查看>>
支付宝钱包流量电量优化实践
查看>>
开发一个React + Electron应用
查看>>
一款超级实用的SuperLayout
查看>>
Picasso源码阅读笔记三
查看>>