首頁 > 開發者 > 網站開發

jQuery倒計時執行個體

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：輸出   pad   運算   tle   到期   mat   bsp   get   on()   

<!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>倒計時測試</title>
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script>
<script>
  function lxfEndtime(){
          $(".lxftime").each(function(){
                var lxfday=$(this).attr("lxfday");//用來判斷是否顯示天數的變數
                var endtime = new Date($(this).attr("endtime")).getTime();//取結束日期(毫秒值)
                var nowtime = new Date().getTime();        //今天的日期(毫秒值)
                var youtime = endtime-nowtime;//還有多久(毫秒值)
                var seconds = youtime/1000;
                var minutes = Math.floor(seconds/60);
                var hours = Math.floor(minutes/60);
                var days = Math.floor(hours/24);
                var CDay= days ;
                var CHour= hours % 24;
                var CMinute= minutes % 60;
                var CSecond= Math.floor(seconds%60);//"%"是取餘運算，可以理解為60進一後取餘數，然後只要餘數。
                if(endtime<=nowtime){
                        $(this).html("已到期")//如果結束日期小於當前日期就提示到期啦
                        }else{
                                if($(this).attr("lxfday")=="no"){
                                        $(this).html("<i>剩餘時間：</i><span>"+CHour+"</span>時<span>"+CMinute+"</span>分<span>"+CSecond+"</span>秒");          //輸出沒有天數的資料
                                        }else{
                        $(this).html("<i>剩餘時間：</i><span>"+days+"</span><em>天</em><span>"+CHour+"</span><em>時</em><span>"+CMinute+"</span><em>分</em><span>"+CSecond+"</span><em>秒</em>");          //輸出有天數的資料
                                }
                        }
          });
   setTimeout("lxfEndtime()",1000);
  };
$(function(){
      lxfEndtime();
   });
</script>
<style type="text/css">
*{
        font-style: normal;
        font-weight: normal;}
.haveday {
        padding: 20px;
        border: 1px dashed #000;
        margin-right: auto;
        margin-left: auto;
        width: 300px;
}
</style>
</head>
<body>
<div class="haveday">
<h1>含有天數的倒計時</h1>
<div class="lxftime" endtime="11/15/2017 17:24:0"></div>
<div class="lxftime" endtime="11/8/2017 3:3:20"></div>
<div class="lxftime" endtime="9/6/2017 6:1:0"></div>
<div class="lxftime" endtime="6/6/2017 9:3:5"></div>
</div>
<p></p>
<div class="haveday">
<h1>沒有天數的倒計時</h1>
<div class="lxftime" endtime="11/15/2017 17:24:0" lxfday="no"></div>
<div class="lxftime" endtime="11/8/2017 3:3:20" lxfday="no"></div>
<div class="lxftime" endtime="9/6/2017 6:1:0" lxfday="no"></div>
<div class="lxftime" endtime="6/6/2017 9:3:5" lxfday="no"></div>
</div>
</body>
</html>

jQuery倒計時執行個體

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More