zoukankan      html  css  js  c++  java
  • Javascript倒计时页面跳转

    在js中实现页面定时跳转我们要使用setInterval或setTimeOut函数,还可以使用页面的meta实现。
    例1:
    <script type="text/javascript" language="JavaScript">
        var startTime = new Date();
        var endTime=startTime.getTime()+10*60*1000;
        var g_blinkswitch = 0;
        var g_blinktitle = document.title;
        function getRemainTime(){
            var nowTime = new Date();
            var nMS =endTime - nowTime.getTime();
            var nM=Math.floor(nMS/(1000*60)) % 60;
            var nS=Math.floor(nMS/1000) % 60;
            if(nM==0&&nS==0&&nMS<1000) //当倒计时结束
            {
                window.focus();
                setInterval("blinkNewMsg()", 1000);
                window.location.reload();
            }
            if(nS < 10) nS = "0" + nS;
            if(nMS >= 0){
                document.getElementById("remainTime").innerHTML= nM + "分" + nS + "秒";
                setTimeout("getRemainTime()",1000);
            }       
        }   
        function blinkNewMsg()
        {
            document.title = g_blinkswitch % 2==0 ? "【   】 - " + g_blinktitle : "【新消息】 - " +
            g_blinktitle;
            g_blinkswitch++;
        }   
     window.onload=getRemainTime;
    </script>
    <strong id="remainTime">10分00秒</strong>
     
    例2
    倒计时跳转页面
    <title>JS倒计时网页自动跳转代码</title>  
    <script language="JavaScript" type="text/javascript">
     function delayURL(url) {
      var delay = document.getElementById("time").innerHTML;
      if(delay > 0) {
       delay--;
       document.getElementById("time").innerHTML = delay;
      } else {
       window.top.location.href = url;
      }
      setTimeout("delayURL('" + url + "')", 1000);
     }
    </script>
    <span id="time" style="background: #00BFFF">3</span>秒钟后自动跳转,如果不跳转,请点击下面的链接<a href="http://www.jbxue.com">脚本学堂</a>
    <script type="text/javascript">
    delayURL("http://www.jbxue.com");
    </script>
     
    例3 防刷新的倒计时代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title> www.jbxue.com--倒计时页面</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> 
    <div id="timer" style="color:red"></div>  
    </body> 
    </html>
  • 相关阅读:
    2021NUAA暑假集训 Day3 题解
    2021NUAA暑假集训 Day2 题解
    2021NUAA暑期模拟赛部分题解
    CodeForces 1038D Slime
    UVA 11149 Power of Matrix
    UVA 10655 Contemplation! Algebra
    UVA 10689 Yet another Number Sequence
    HDU 4549 M斐波那契数列
    HDU 4990 Reading comprehension
    CodeForces 450B Jzzhu and Sequences
  • 原文地址:https://www.cnblogs.com/linuxnotes/p/3314745.html
Copyright © 2011-2022 走看看