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.8.3.min.js"></script>
    <script language="javascript">
    $(function(){
    updateEndTime();
    });
    //倒计时函数
    function updateEndTime()
    {
    var date = new Date();
    var time = date.getTime(); //当前时间距1970年1月1日之间的毫秒数


    $(".settime").each(function(i){


    var endDate =this.getAttribute("endTime"); //结束时间字符串
    //转换为时间日期类型
    var endDate1 = eval('new Date(' + endDate.replace(/d+(?=-[^-]+$)/, function (a) { return parseInt(a, 10) - 1; }).match(/d+/g) +')');


    var endTime = endDate1.getTime(); //结束时间毫秒数


    var lag = (endTime - time) / 1000; //当前时间和结束时间之间的秒数
    if(lag > 0)
    {
    var second = Math.floor(lag % 60); 
    var minite = Math.floor((lag / 60) % 60);
    var hour = Math.floor((lag / 3600) % 24);
    var day = Math.floor((lag / 3600) / 24);
    $(this).html(day+"天"+hour+"小时"+minite+"分"+second+"秒");
    }
    else{
    $(this).removeClass("settime");
    alert($(this).attr("id"));
    $(this).html("团购已经结束啦!");
    }
    });
    setTimeout("updateEndTime()",1000);
    }
    </script>
    </head>


    <body>
    <div id="1" class="settime" endTime="2015-08-12 12:01:01"></div>
    可以写在循环里,只有保持跟上面的ID一致就可以啦
    <div id="2" class="settime" endTime="2015-08-12 14:58:07"></div>
    </body>
    </html>

  • 相关阅读:
    初识Kafka
    初学Linux (Linux_note)
    Zookeeper_ACL
    Zookeeper简单配置
    getWindow().setFlags
    设置session失效时间
    Android开发者必知的5个开源库
    oracle A用户访问B用户的表aa
    oracle 根据约束名查表名
    java ftp上载下传 遇到的问题
  • 原文地址:https://www.cnblogs.com/ccllj/p/10243294.html
Copyright © 2011-2022 走看看