原生js实现倒计时页面刷新不重新加载

最新推荐文章于 2024-04-18 17:52:13 发布

weixin_34252090

最新推荐文章于 2024-04-18 17:52:13 发布

阅读量2.1k

点赞数 2

文章标签： javascript 前端 php ViewUI

原文链接：https://juejin.im/post/5c810cb8e51d451f006ed37a

版权

有时候注册登录时会有倒计时，页面刷新不会重置，闲来无事随手敲了敲时间不多.废话不说

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <button>
    获取验证阿码
  </button>
  <script> 
    var but = document.getElementsByTagName("button")[0];
    var sum;
    var tmer;
    let time = localStorage.getItem("time")
    but.onclick = function () {
        localStorage.clear()
        if (time == null || time == undefined || time < 0) {
          sum = 60
        }
        tm()
    }

    if (time == null || time == undefined) {
      sum = 60
    } else {
      sum = time
      tm()
    }

    function tm() {
      console.log(sum)
      but.disabled = true
      tmer = setTimeout(tm, 1000)
      sum--;
      but.innerHTML = sum
      localStorage.setItem("time", sum)
      if (sum < 1) {
        localStorage.clear()
        clearTimeout(tmer)
        but.innerHTML = "重新获取"
        flag = true;
        but.disabled = false
      }


    }
  </script>
</body>

</html>
复制代码

前端小白，如有错误欢迎指正。谢谢

优惠劵

weixin_34252090

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
原生js实现倒计时页面刷新不重新加载

有时候注册登录时会有倒计时，页面刷新不会重置，闲来无事随手敲了敲时间不多.废话不说<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
复制链接

扫一扫