为确保安全一些时间阈值定义在后台,自行实现即可。
一,Html部分
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
</head>
<body>
<input type="button" value="点击倒计时" id="send"/>
</body>
</html>
<script>
var i = 30;
$(function () {
$.ajax({
type : "post",
url : "Index/My/send_time",
data : {'second' : i},
success : function (data) {
console.log(data);
if (data > 0) {
interval(data);
}
}
})
});
$('#send').click(function () {
$.ajax({
type : "post",
url : "Index/My/record_time",
data : {'second' : i, 'click_time' : parseInt(new Date().getTime()/1000)},
success : function (data) {
if (data != 0) {
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>
二,后端部分:
class My extends Controller
{
public function send_time()
{
session_start();
$time = input('second');
$time_diff = time() - (isset($_SESSION['click_time']) ? $_SESSION['click_time'] : time());
if (isset($_SESSION['click_time']) && $time_diff < 30) {
$diff = $time - $time_diff;
echo $diff;
} else {
unset($_SESSION['click_time']);
}
}
public function record_time()
{
session_start();
$second = input('second'); //30
$click_time = input('click_time'); //本次点击时间
if (isset($_SESSION['click_time']) && $click_time - $_SESSION['click_time'] < $second) {
echo 0;
} else {
$_SESSION['click_time'] = $click_time;
echo date('Y-m-d H:i:s', $click_time);
}
}
}