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

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

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

测试框架使用 ThinkPHP 3.2.3

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

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

index.html:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

</head>

<body>

	<input type="button" value="发送验证码" id="send">

</body>

<script>

	$i = 30; // 倒计时的秒数

	// 检测剩余时间

  $(function(){

  	$.ajax({

			url: "{:U('Home/Mail/send_time', '', '')}",

			method: 'post',

			data: {

				'seconds': $i

			},

			success: function(data) {

				console.log(data);

				if(data > 0) {

					interval(data);

				}

			}

  	});

  });

  // 发送点击时间

	$("#send").click(function(){

		$.ajax({

			url: "{:U('Home/Mail/record_time', '', '')}",

			method: 'post',

			data: {

				'seconds': $i,

				'click_time': parseInt(new Date().getTime()/1000)

			},

			success: function(data) {

				if(data != 0) { // 防止通过 F12 修改 button 的 disabled 属性在间隔时间之内再次点击按钮

					interval($i);

				}

				console.log(data);

			}

		});

	});

	// 显示提示文字，禁用提交按钮

	function setTime($t) {

		$button = $("#send");

		$message = $("<span id='message'> <span id='wait'>"+ $t +"</span>秒后可重新发送验证码...</span>");

		$message.insertAfter($button);

		$button.attr("disabled", true);

	}

	// 倒计时

	function interval($t) {

		setTime($t);

		var wait = document.getElementById('wait');

		var interval = setInterval(function(){

			var time = --wait.innerHTML;

			if(time <= 0) {

				clearInterval(interval);

				$button.attr("disabled", false);

				$message.remove();

			};

		}, 1000);

	}

</script>

</html>

MailController.class.php:

<?php

namespace Home\Controller;

use Think\Controller;

class MailController extends Controller {

	public function index() {

		$this->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，因此不会触发新的动作以及重新计时：

删除属性之前：

JavaScript + PHP 实现刷新继续保持倒计时的按钮的更多相关文章

  1. JavaScript禁用页面刷新

    JavaScript禁用页面刷新代码如下: //禁用F5刷新 document.onkeydown = function () { if (event.keyCode == 116) { event. ...

  2. ajax+FormData+javascript实现无刷新表单信息提交

    ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息  ,实例化表单数据对象 同时收集fm的表单域信息. var f ...

  3. JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址

    JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址 var stateObject = {}; var title = "改变后的网址的标题"; var ...

  4. WPF自定义控件之带倒计时的按钮--Button

    1.说明 之前做过一个小项目,点击按钮,按钮进入倒计时无效状态,计时完成后,恢复原样,现在就实现该效果---带倒计时的按钮 2.效果 1)正常状态               2)MouseOver( ...

  5. ajax+FormData+javascript 实现无刷新上传附件

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. ajax+FormData+javascript 实现无刷新表单注册

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 请写出一段JavaScript代码，要求页面有一个按钮，点击按钮弹出确认框。程序可以判断出用

    请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...

  8. javascript:location=location;">刷新</a>

    <a href="javascript:location=location;">刷新</a>

  9. [转]WPF自定义控件之带倒计时的按钮--Button

    1.说明 之前做过一个小项目,点击按钮,按钮进入倒计时无效状态,计时完成后,恢复原样,现在就实现该效果---带倒计时的按钮 2.效果 1)正常状态               2)MouseOver( ...

随机推荐

  1. iOS开发——高级篇——音频、音乐播放（封装类）

    一.简介 简单来说,音频可以分为2种音效又称“短音频”,通常在程序中的播放时长为1~2秒在应用程序中起到点缀效果,提升整体用户体验 音乐比如游戏中的“背景音乐”,一般播放时间较长 播放音频可以使用框架 ...

  2. django 模板语法和三种返回方式

    模板 for循环 {% for athlete in athlete_list %} <li>{{ athlete.name }}</li> {% endfor %} if语句 ...

  3. 序列化对象为xml字符串

    /// <summary>    /// 序列化对象为xml字符串    /// </summary>    /// <param name="obj" ...

  4. java序列化

    什么是java序列化,如何实现java序列化? 我们有时候将一个java对象变成字节流的形式传出去或者从一个字节流中恢复成一个java对象,例如,要将java对象存储到硬盘或者传送给网络上的其他计算机 ...

  5. i春秋手动病毒查杀

    1:查看系统进程程   tasklist命令 2:当任务管理器无法打开的时候可以利用 taskkill /f /im [程序所显示的pid]   两个参数的意思分别是强制和程序在内存中的印象 3:ms ...

  6. cell 的复用机制

    一个问题引发的血案,以下是本侦探的探案过程的一部分:以下全部都是转载自别人的博客:http://blog.sina.com.cn/s/blog_9c3c519b01016aqu.html 转自:htt ...

  7. waxpatch修改任意类的用法

    例如:修改一个UIView(PJView)的子类和一个NSObject(PJModel)类,则需要在patch.lua文件中声明这两个要修改的类 并且建立这些待修改的类的对应的.lua文件 对应的.l ...

  8. python备忘--函数

    1.zip函数 zip函数接受任意多个(包括0个和1个)序列作为参数,返回一个tuple列表. x = [1, 2, 3] y = [4, 5, 6] z = [7, 8, 9] xyz = zip( ...

  9. Jmeter发送soap请求

    1.新建线程组-添加SOAP/XML-RPC Request 2.我们以天气预报接口为例,http://ws.webxml.com.cn/WebServices/WeatherWS.asmx,选择最后 ...

  10. sqlserver表分区小结

    为什么要表分区?  当一个表的数据量太大的时候,我们最想做的一件事是什么?将这个表一分为二或者更多分,但是表还是这个表,只是将其内容存储分开,这样读取就快了N倍了 原理:表数据是无法放在文件中的,但是 ...