js防刷新倒计时的实现

大致思路:

通过将初始的initTime时间存入cookie,在页面刷新的时候一直载入isFresh(),使用getCookie()方法获取cookie与initTime的值做比较,如果小于countTime那么就继续刷新btn。

setInterval() 和 clearInterval()

setInterval()

var intervalID = window.setInterval(animate, 500);
周期性地调用一个函数(function)或者执行一段代码。
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setInterval

clearInterval()

window.clearInterval(intervalID)
intervalID是你想要取消的定时器的ID,这个ID是个整数,是由setInterval()返回的.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  7. </head>
  8. <body>
  9. <button id="send-button">
  10. 发送验证码
  11. </button>
  12. <script>
  13. $(function(){
  14. $('#send-button').on('click',function(){
  15. //初始化时间戳,第一次点击的时间
  16. var initTime = parseInt((new Date().getTime()) / 1000);
  17. //将初始化的时间戳存入initTime的cookie
  18. document.cookie = "initTime=" + initTime;
  19. console.log("初始化时间戳"+initTime);
  20. interval(countTime);
  21. });
  22. });
  23. var getnowtime = parseInt((new Date().getTime()) / 1000);
  24. var countTime = 120;
  25. isFresh();
  26. function isFresh() {
  27. var initTime = getCookie('initTime');
  28. console.log('getnowtime:' + getnowtime );
  29. console.log('initTime:' + initTime );
  30. console.log('时间差:' + (getnowtime - initTime));
  31. if (document.cookie.length > 0) {
  32. if ((getnowtime - initTime) < countTime) {
  33. interval(countTime - (getnowtime - initTime));
  34. }
  35. }
  36. }
  37. //得到js的cookie
  38. function getCookie(cname) {
  39. var name = cname + "=";
  40. var ca = document.cookie.split(';');
  41. for (var i = 0; i < ca.length; i++) {
  42. var c = ca[i].trim();
  43. if (c.indexOf(name) == 0)
  44. return c.substring(name.length, c.length);
  45. }
  46. return "";
  47. }
  48. var nIntervId;
  49. function interval(count) {
  50. $(function () {
  51. nIntervId = setInterval(function () {
  52. if (count === 0) {
  53. $('#send-button').removeAttr('disabled');
  54. $('#send-button').text('再次发送');
  55. clearInterval(nIntervId);
  56. } else {
  57. $('#send-button').text('重新发送(' + count + ')');
  58. $('#send-button').attr("disabled", true);
  59. }
  60. count--;
  61. }, 1000);
  62. });
  63. }
  64. </script>
  65. </body>
  66. </html>

来自为知笔记(Wiz)

分享到:

发表评论

昵称

沙发空缺中,还不快抢~