zoukankan      html  css  js  c++  java
  • Jquery实现倒计时效果

    <!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=utf-8" />
    <title>Jquery实现倒计时效果</title>
    <script language="javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
     var SysSecond;
     var InterValObj;
     $(document).ready(function() {
      SysSecond = parseInt($("#remainSeconds").html()); //这里我是在服务端算好了剩余的秒数,并保存到客户端,如果过期则返回0
      InterValObj = window.setInterval(SetRemainTime, 1000); //间隔函数,1秒执行
     });

     //代理,接单的时间+1小时减去当前时间的秒数
     function SetRemainTime() {
      if (SysSecond > 0) {
       //alert(SysSecond);
       SysSecond = SysSecond - 1;
       var second = Math.floor(SysSecond % 60);             // 计算秒    
       var minite = Math.floor((SysSecond / 60) % 60);      //计算分
       var hour = Math.floor((SysSecond / 3600) % 24);      //计算小时
       var day = Math.floor((SysSecond / 3600) / 24);        //计算天

       $("#remainTime").html(day + "天" + hour + "小时" + minite + "分" + second + "秒");
      } else {//剩余时间小于或等于0的时候,就停止间隔函数
       window.clearInterval(InterValObj);
      }
     }
    </script>
    </head>

    <body>
    <div id="remainSeconds" style="display:none">18000</div>
    <div id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900"></div>
    </body>
    </html>

  • 相关阅读:
    雨林木风操作系统有感
    Bitcoin P2P 虚拟货币原理详解
    SVN switch 用法详解
    Bitcoin P2P 货币:有史以来最危险的项目
    回旋线科普
    Mathematica 如何绘制双纵坐标轴的图像?
    c#数据库操作
    在自定义HttpHandler中无法使用Session
    VS2010安装因net framework4.0无法安装而失败的解决方法
    .net framework 4.0 0xc8000247错误解决
  • 原文地址:https://www.cnblogs.com/zxjyuan/p/1640707.html
Copyright © 2011-2022 走看看