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>

  • 相关阅读:
    TCP 监控工具 TCPMonitor
    程序员职业规划
    <转>eclipse如何修改dynamic web module version .
    JBoss部属和EJB调用-EJB3.0入门经典学习笔记(2)
    环境配置与JBoss安装-EJB3.0入门经典学习笔记(1)
    【EDA】PCBA丝印尺寸
    【Altium Designer】PCB如何用规则检查
    【Cadence】Gerber之二:钻孔文件设置与生成
    【生产】如何设计生产线
    【EMC】脉冲群Burst
  • 原文地址:https://www.cnblogs.com/zxjyuan/p/1640707.html
Copyright © 2011-2022 走看看