zoukankan      html  css  js  c++  java
  • [JavaScript]常用的页面倒计时

    倒计时是web开发中比较常用的,以下列出常用的几个倒计时方法,仅供参考:

    一 :页面倒计时 原理一般都是通过 setTimeout 或 setInterval 函数实现,下面是一个最简单的倒计时

    <script type="text/javascript">
    var second=10;
    var timer;
    function change()
    {
      second--;
     
     if(second>-1)
     {
      document.getElementById("second").innerHTML=second;
      timer = setTimeout('change()',1000);//调用自身实现
     }
     else
     {
       clearTimeout(timer);
     }
    }
    timer = setTimeout('change()',1000);
    </script>


    二:用于页面显示服务器时间,或本地时间(每秒钟读取当前时间再以指定的格式显示)

    <script type=text/javascript>
    var now = new Date();
    function CurentTime(){
        var mm = now.getMinutes();  
        var ss = now.getTime() % 60000;
        ss = (ss - (ss % 1000)) / 1000;  
        var clock = now.getHours() +':';  
        if (mm < 10) clock += '0'; 
        clock += mm+':';  
        if (ss < 10) clock += '0';  
        return(clock + ss); 
    }  
    function showTime(){  
        document.getElementById("clock").innerHTML = now.getYear()+"."+(now.getMonth()+1)+"."+now.getDate()+"    "+ CurentTime();now.setSeconds(now.getSeconds()+1);} 
        
     window.onload=start;
     function start(){
        setInterval(showTime,1000);   
    }

    </script>
    现在时间:<body><span id="clock"></span></body>


    三:由玩家提交数据的倒计时,或者是服务器返回一个剩余的秒数,比如玩家升级了某个建筑,需要2个小时,
    前台从2*3600开始计时,同时保存当前数据,玩家下次刷新页面时便读取剩余的秒数。下面这个倒计时是 从 游戏<中国故事>中改写的,
    这个游戏中有大量的倒计时,函数event_timer 实际有2个参数,他将每个建筑或单位标志一个唯一的id来计时的 
    <html>
      <script type="text/javascript">
      function start_event_timer(){
        document.getElementById('showTime').style.display = '';    
        var val =document.getElementById('val_text').value;
        event_timer(val);
       }
      //开始计时
      function event_timer(time_remain) {  
         //由页面提交的时间与服务器时间一般都有2~4秒的差值
         rt = parseInt(time_remain) + 4;s
            var eventid=document.getElementById('event_time_remain');
        var senond_remain=document.getElementById('senond_remain');
        if (rt == 0) {  
           alert("timeover");
           window.location.reload();
        }else {   
           eventid.innerHTML = time_format(rt);
           senond_remain.innerHTML = rt;
           time_remain = time_remain - 1;
           setTimeout("event_timer('" + time_remain + "')",1000); 
        }
    }

    // 以hh:mm:ss格式化时间,可以根据需要 定义格式 
    function time_format(s) {
    var t;
    if(s > -1){
        hour = Math.floor(s/3600);
        min = Math.floor(s/60) % 60;
        sec = s % 60;
        day = parseInt(hour / 24);
        if (day > 0) {
            hour = hour - 24 * day;
            t = day + "天," + hour + ":";
            }
        else t = hour + ":";
        
        if(min < 10){t += "0";}
            t += min + ":";
        if(sec < 10){t += "0";}
            t += sec;}
    else
        {t = "0:00:0x";}
    return t;
    }
      </script>
      <body>
       <center>
       输入计时的秒数:<input type="text" id="val_text" size="5"/>
    <input type ="button" onclick="start_event_timer();" value ="start"/>
    <div style="display:none" id="showTime">
       <p class="event_class" style="color: blue;">倒计时: <span id="event_time_remain"></span>
      &nbsp; 剩余<span id="senond_remain"></span>秒
    </div>
    </center>
      </body>
    </html>


    四,网上的一个无刷新的倒计时,这个所谓的'无刷新',就是将剩余的秒数保存到 浏览器对象
     window.name中,只要窗口未关闭,值就在。个人感觉没有实际的用途,刷新就是要重新读服务器数据,实时更新的
    不是在做静态页面...

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var maxtime;
    alert(window.name);
    if(window.name==''){
    maxtime = 60*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;
    --maxtime;
    window.name = maxtime;
    }
    else{
    clearInterval(timer);
    alert("time over");
    }
    }
    timer = setInterval("CountDown()",1000);
    //-->
    </SCRIPT>
    <div id="timer" style="color:red"> </div> 

  • 相关阅读:
    QT资料大全
    网络协议及tcp协议详解
    QT和Java的跨平台
    QString转char *
    QT删除整个文件夹
    QT获取linux下的当前用户名
    std::map自定义类型key
    QT程序自启动
    linux下通过命令连接wifi
    Rsync实现文件的同步
  • 原文地址:https://www.cnblogs.com/pangchunlei/p/5512541.html
Copyright © 2011-2022 走看看