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

    使用jQuery实现倒计时效果,这个实例是在页面上显示剩余几天几小时几分几秒的效果。

            在头部引用最新的jQuery.js文件:

             <head>

             <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

             <script src="jQuery.js" type="text/javascript"></script>

             </head>

             前台页面:

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

              jQuery代码:

              <script type="text/javascript" language="javascript">
              var SysSecond;
              var InterValObj;
              $(document).ready(function() {
              SysSecond = parseInt($("#remainSeconds").html());
              InterValObj = window.setInterval(SetRemainTime, 1000);
              });
              function SetRemainTime() {
              if (SysSecond > 0) {
              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 {
               window.clearInterval(InterValObj);
               }
               }
               </script>

  • 相关阅读:
    Eclipse配置SVN的几种方法及使用详情
    python爬虫实战:基础爬虫(使用BeautifulSoup4等)
    MySQL中case when的基本用法总结
    SQL常见的一些面试题(太有用啦)
    Python应用——自定义排序全套方案
    Hadoop运维
    图形化查看maven的dependency依赖
    mac os x 10.10.3 安装protoc
    创业方向:O2O及移动社交 from 沈博阳
    手动编译安装docker环境,以及偶尔出现的bug
  • 原文地址:https://www.cnblogs.com/nice41/p/3833090.html
Copyright © 2011-2022 走看看