在做發送手機驗證碼時經常用倒計時限制用戶請求發送量，一般都是60s。但是刷新頁面後倒計時會重置，這樣用戶不用等待60s就可以重新發送。
要做到刷新頁面而不重置時間，肯定要把倒計時時間記住，可以記在cookie裏，也可以記在session裏，但是記在cookie裏很容易被篡改。因此選擇了session：
前端頁面及js代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒計時示例</title>
<style>
.send {
width: 150px;
height: 30px;
line-height: 30px;
margin: 0 auto;
cursor: pointer;
background: #65be2e;
color: #fff;
}
#send:hover {
background: green;
}
.disabled {
background: gray;
color: #fff;
cursor: default;
pointer-events: none;
}
</style>
<script type="text/javascript" src="/Public/study/js/jquery-3.1.1.min.js"></script>
<script>
var t1;
var time;
$(function () {
$.ajax({
url: '/index.php/word/review/getTime',
type: 'post',
dataType: 'html',
data: {'time': time},
async: true,
success: function (data) {
time = data;
if (time > 60) {
clearInterval(t1);
$("#send").removeClass('disabled');
$("#send").html('發送');
$("#time").html(60);
} else {
setTime(time);
}
}
});
$("#send").on('click', function () {
$.ajax({
url: '/index.php/word/review/getTime',
type: 'post',
dataType: 'html',
async: true,
data: {'time': 200},
success: function () {
var second = 60;
setTime(second);
}
});
});
function setTime(second) {
$("#send").addClass('disabled');
t1 = setInterval(function () {
second--;
if (second <= 0) {
clearInterval(t1);
$("#send").removeClass('disabled');
$("#send").html('發送');
$("#time").html(second);
} else {
$("#send").html(second + 's後重試');
$("#time").html(second);
}
}, 1000);
}
});
</script>
</head>
<body>
<div style="width: 500px;height: 200px;border: 1px solid #65be2e; margin: 200px auto;text-align: center;">
<p><span>倒計時：</span><b id="time"></b> <span> s </span></p>
<p id="send" class="send"></p>
</div>
</body>
</html>PHP代碼：
function getTime()
{
$judge = I('post.time');
if ($judge) {
session('time', null);
}
$time = 60;
$put_time = session('time');
if (!$put_time) {
$now_time = time();
session('time', $now_time);
} else {
$now = time();
$diff = $now - $put_time;
$time = 60 - $diff;
if ($time <= 0) {
$time = 66;
}
}
echo $time;
}