• 技术文章 >web前端 >js教程

    js实现防刷新的倒计时代码展示

    巴扎黑巴扎黑2017-09-07 11:41:12原创736

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

    最近在维护考试系统,在进行考试测试时无意中点击了刷新按钮,但是上面的倒计时并没有受到影响,同时在几篇博客中也有这样的例子,所以我想看看它到底是怎样防止刷新的。

    如果是用cs代码写,我们可能会很快的写出来怎样防止刷新,可是我们要进行前段开发,考试是在页面上进行的,这里就要用到我们学到的js了。


    <htmlxmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
    <title>前端开发</title>
    
    </head>
    
     
    
    <body>
    
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var maxtime;
    if(window.name==''){
    maxtime = 1*60;
    }else{
    
    maxtime = window.name;
    
    }
    
     
    
    function CountDown(){
    if(maxtime>=0){
    minutes = Math.floor(maxtime/60);
    seconds = Math.floor(maxtime%60);
    msg = "距离考试结束还有"+minutes+"分"+seconds+"秒";
    document.all["timer"].innerHTML = msg;
    if(maxtime == 5*60) alert('注意,还有5分钟!');
    
    --maxtime;
    
    window.name = maxtime;
    
    }
    
    else{
    clearInterval(timer);
    alert("考试时间到,结束!");
    
    }
    
    }
    
    timer = setInterval("CountDown()",1000);
    //-->
    
    </SCRIPT>
    
    <p id="timer"style="color:red"></p>
    
     
    
    </body>
    
    </html>

    其实,这里最主要的思想就是,我们将时间放到一个变量中,刷新后,我们从变量中接着读取这个数据即可。我们也可以用cookie存开始时间,刷新以后先读取cookie。方法也许不只是这一个,希望大家有更好地方法来多多交流。

    以上就是js实现防刷新的倒计时代码展示的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript 倒计时 新的
    上一篇:JavaScript使用FileReader完成图片上传和预览的功能介绍 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 一文详解js如何用文件流下载csv文件• 手把手教你用js实现一个拖拽效果• 一文聊聊Node.js中的cluster(集群)• 简单了解JavaScript闭包• 一文浅析node中如何使用消息队列
    1/1

    PHP中文网