js+html5实现页面可刷新的倒计时效果


本文摘自PHP中文网,作者不言,侵删。

这篇文章主要为大家详细介绍了js+html5实现页面可刷新的倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

写了一个5分钟倒计时的代码,有的时候代码需要刷新,然后倒计时又从4:59开始了,我想到的一个解决办法,就是使用缓存,将开始倒计时的时间加上要倒计时的5分钟设为缓存,然后直接用这个缓存时间减去当前时间,就可以一直倒计时了,不管你在倒计时过程中操作了什么,时间总在变吧,哈哈,原理就是这样嘀。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

<!doctype html>

<html>

 

  <head>

    <meta charset="utf-8">

    <title>简单易用的倒计时js代码</title>

 

  </head>

 

  <body>

    <p id="time"></p>

    <script src="js/jquery-git.js"></script>

    <script>

      localStorage.setItem('start', new Date().getTime());

      countDown(localStorage.getItem('start'));

 

      function countDown(startTime) {

        var time = setInterval(function() {

          var currentTime = new Date();

          var second = 59 - parseInt(((currentTime.getTime() - startTime) / 1000) % 60);

          var min = 4 - parseInt((currentTime.getTime() - startTime) / 60000);

 

          if(min < 10) {

            min = "0" + min;

          }

          if(second < 10) {

            second = "0" + second;

          }

 

          var countDown = min + ":" + second;

          $('#time').html(countDown);

 

          if(second == 0 && min == 0) {

            clearInterval(time);

          }

        }, 1000)

      }

    </script>

 

  </body>

 

</html>

阅读剩余部分

相关阅读 >>

js获取html元素的实际宽度高度的方法

js实现图片无缝滚动

js判断数组中是否包含某个值

js中相等判断===、==、object.is()的区别

jquery 过时了吗?

了解js中!/+/-/~ function() {/*...*/}()是什么意思

js遍历对象有几种方法

如何利用js实现水平移动与垂直移动效果

js的防抖与节流

实例详解js数组方法slice()的用法

更多相关阅读请进入《js》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...