PHP+JavaScript实现刷新继续保持倒计时的按钮

场景:发送一个验证码到手机,当验证码发出时,会提示隔 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']);
		}
	}
}

实现效果图

初始状态:

PHP+JavaScript实现刷新继续保持倒计时的按钮

点击按钮:

PHP+JavaScript实现刷新继续保持倒计时的按钮

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

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

PHP+JavaScript实现刷新继续保持倒计时的按钮

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

倒计时结束:

PHP+JavaScript实现刷新继续保持倒计时的按钮

按钮恢复可用。

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

PHP+JavaScript实现刷新继续保持倒计时的按钮

删除属性之前:

PHP+JavaScript实现刷新继续保持倒计时的按钮

关于PHP+JavaScript实现刷新继续保持倒计时的按钮的文章就分享到这,如果对你有帮助欢迎继续关注我们哦

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/41842.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
php学习php学习订阅用户
上一篇 2022年6月23日 16:31
下一篇 2022年6月23日 16:31

相关推荐

  • PHP中的MD5加密技术指南。

    PHP 是一门非常强大的编程语言,广泛应用于 Web 开发领域。随着 Web 网站日益壮大,网站安全问题成为 Web 开发中不可忽视的因素。其中,密码安全是最为重要的一环。为了保护用户密码,Web 开发人员常常使用加密技术…

    2023年5月23日
    02
  • PHP中的区块链。

    随着区块链技术的不断发展和应用,它已经成为一个热门的话题,受到了广泛的关注。区块链技术不仅被应用在数字货币的交易中,还被应用在金融、医疗、物流等行业中。而在编程方面,区块链技术也有很多应用,其中PHP中…

    2023年5月30日
    00
  • 如何处理PHP中的XML和JSON数据。

    在Web开发中,我们经常需要处理不同格式的数据,包括XML和JSON格式的数据。在PHP中,处理这些数据是一个常见的任务,因为PHP是一种非常流行的服务器端脚本语言,而XML和JSON都是常用的数据交换格式。在本文中,我们…

    2023年5月30日
    01
  • php字符串处理函数大全

    addcslashes — 为字符串里面的部分字符添加反斜线转义字符 addslashes — 用指定的方式对字符串里面的字符进行转义 bin2hex — 将二进制数据转换成十六进制表示 chop — rtrim() 的别名函数 chr — 返回一个字符的ASCII…

    2018年3月3日
    0286
  • 如何在PHP中进行增强学习和智能问答。

    随着人工智能技术的发展,智能问答和增强学习已经在各种领域得到了广泛应用,其中包括对话系统、自然语言处理、语音识别、图像识别等等。这些技术可以帮助我们更高效地处理大量数据,减少人工操作和人力成本。在PHP…

    2023年5月23日
    02
  • PHP数据库连接文件代码

    对于PHP程序而言,要经常访问某数据库时,可以将与该数据库的连接过程写成一个PHP文件,每次需要连接数据库时直接调用该文件即可。、 例: conn.php:   在别的文件中,每次连接数据库时时,只需要在文件中调用…

    2018年10月3日
    0215
  • PHP中的自动化部署工具。

    PHP作为一种广泛应用的编程语言,它的应用范围十分广泛。无论是个人网站还是大型企业应用,PHP都有着相应的应用场景。然而,在开发PHP应用过程中,如何进行自动化部署是十分重要的。因为自动化部署可以极大地减少人…

    2023年5月30日
    02
  • PHP数组的创建

    数组的三种创建方式 方式一: 变量 = array(元素的值,元素的值,元素的值,........); 方式二: 变量 = array(元素,元素,元素,..........); 方式三: 变量[【下标】] = 值; 变量[【下标】] = 值; 变量[【下标】] =…

    2018年4月7日
    0386

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息