欧美又黄又刺激色情大片,亚洲欧美日韩综合一区,日韩无人区码卡二卡3卡4卡介绍

倒計(jì)時(shí)一般是用來(lái)表示未來(lái)某一時(shí)刻距現(xiàn)在時(shí)刻還剩多少時(shí)間。倒計(jì)時(shí)在WEB上應(yīng)用非常廣泛，如考試系統(tǒng)倒計(jì)時(shí)，團(tuán)購(gòu)網(wǎng)站中的優(yōu)惠活動(dòng)倒計(jì)時(shí)等等。今天，我們來(lái)使用jQuery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的倒計(jì)時(shí)功能。

查看演示下載源碼

本文以團(tuán)購(gòu)網(wǎng)站的倒計(jì)時(shí)為背景，我們知道，網(wǎng)站會(huì)給每個(gè)優(yōu)惠活動(dòng)（商品）定一個(gè)結(jié)束時(shí)間，也就是到期時(shí)間，但系統(tǒng)時(shí)間到達(dá)了結(jié)束時(shí)間，就意味著活動(dòng)結(jié)束。因此，我們?cè)贖TML中就要定義活動(dòng)的結(jié)束時(shí)間。

?

HTML

        <ul class="prolist"> 
     <li><img src="images/p1.jpg" />簡(jiǎn)約時(shí)尚皮帶男士手表一款69元<p class="endtime showtime" 
      value="1354365003"></p></li> 
     <li><img src="images/p2.jpg" />高強(qiáng)度無(wú)毒樹(shù)脂材料榨汁器24元<p class="endtime showtime" 
      value="1350748800"></p></li> 
     <li><img src="images/p3.jpg" />茶香番茄/烏梅/楊梅0.48元<p class="endtime showtime" 
      value="1346487780"></p></li> 
     <li><img src="images/p4.jpg" />沙灘鞋男士戶外涼鞋69元<p class="endtime showtime" 
      value="1367380800"></p></li> 
</ul>

上述html代碼中，我們建立了一個(gè)列表，用于展示活動(dòng)名稱(chēng)、圖片和倒計(jì)時(shí)，關(guān)鍵的是我們?cè)诿總€(gè)活動(dòng)定義了結(jié)束時(shí)間：.endtime屬性 value的值，這個(gè)值是一串?dāng)?shù)字，表示自1970年1月1日以來(lái)的秒數(shù)，由后臺(tái)（PHP）生成。比如結(jié)束時(shí)間2013-05-01 12:00可以通過(guò)PHP轉(zhuǎn)換為1367380800秒，轉(zhuǎn)換后的秒數(shù)可以用來(lái)接下來(lái)的jQuery計(jì)算倒計(jì)時(shí)。

?

CSS

我們需要給頁(yè)面中的列表實(shí)際一個(gè)稍微好看點(diǎn)的外觀。

        .endtime{font-size:20px; font-family:"Microsoft Yahei"; color:#000} 
.prolist{margin:10px auto} 
.prolist li{float:left; width:320px; height:240px; margin:10px; font-size:14px;  
position:relative} 
.prolist li img{width:320px; height:198px;} 
.showtime{position:absolute; top:174px; height:24px; line-height:24px;  
background:#333; color:#fff; opacity:.6; display:none}

保存，預(yù)覽頁(yè)面效果，可以看到一個(gè)排列整齊的活動(dòng)列表。

?

jQuery

        var serverTime =  * 1000; //服務(wù)器時(shí)間，毫秒數(shù) 
$(function(){ 
    var dateTime = new Date(); 
    var difference = dateTime.getTime() - serverTime; //客戶端與服務(wù)器時(shí)間偏移量 
     
    setInterval(function(){ 
      $(".endtime").each(function(){ 
        var obj = $(this); 
        var endTime = new Date(parseInt(obj.attr('value')) * 1000); 
        var nowTime = new Date(); 
        var nMS=endTime.getTime() - nowTime.getTime() + difference; 
        var myD=Math.floor(nMS/(1000 * 60 * 60 * 24)); //天 
        var myH=Math.floor(nMS/(1000*60*60)) % 24; //小時(shí) 
        var myM=Math.floor(nMS/(1000*60)) % 60; //分鐘 
        var myS=Math.floor(nMS/1000) % 60; //秒 
        var myMS=Math.floor(nMS/100) % 10; //拆分秒 
        if(myD>= 0){ 
            var str = myD+"天"+myH+"小時(shí)"+myM+"分"+myS+"."+myMS+"秒"; 
        }else{ 
            var str = "已結(jié)束！";     
        } 
        obj.html(str); 
      }); 
    }, 100); //每個(gè)0.1秒執(zhí)行一次 
});

我們首先獲取服務(wù)器時(shí)間，我們要將倒計(jì)時(shí)與服務(wù)器時(shí)間保持一致，這樣一來(lái)每個(gè)客戶端看到的倒計(jì)時(shí)是一樣的，我們通過(guò)計(jì)算客戶端與服務(wù)器的時(shí)間偏移量，來(lái)避免了因客戶機(jī)器時(shí)間與服務(wù)器時(shí)間不一致而引起的倒計(jì)時(shí)不同步的麻煩。當(dāng)然這個(gè)服務(wù)器時(shí)間需要使用服務(wù)端語(yǔ)言來(lái)獲取，本文使用了PHP的 time()函數(shù)獲取的秒數(shù)，記得要乘以1000轉(zhuǎn)換成毫秒數(shù)。

我們通過(guò)setInterval建立一個(gè)定時(shí)器，并且每個(gè)100毫秒執(zhí)行一次setInterval里面的代碼。

然后在定時(shí)器里，我們使用jQuery的each()方法，遍歷頁(yè)面中的列表，計(jì)算天、小時(shí)、分、秒。

因?yàn)閖avascript的getTime()函數(shù)獲取的是毫秒數(shù)，所以計(jì)算過(guò)程中都要/1000，

我們并不想在一個(gè)頁(yè)面將列表中所有的倒計(jì)時(shí)都顯示出來(lái)，而需要用戶將鼠標(biāo)滑向列表中的圖片才顯示對(duì)應(yīng)的倒計(jì)時(shí)，因此我們還需要加入以下輔助代碼：

        $(function(){ 
    $(".prolist li img").each(function(){ 
        var img = $(this); 
        img.hover(function(){ 
            img.next().show(); 
        },function(){ 
            img.next().hide(); 
        }); 
    }); 
});

猛擊這里看演示DEMO。

來(lái)源于 helloweba.com http://www.helloweba.com/view-blog-182.html

下載附件： countdown

全代碼：

      <!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倒計(jì)時(shí)</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var serverTime = <?php echo time();?> * 1000;
$(function()
{
    var str      = '';
    var dateTime = new Date();
    var difference = dateTime.getTime() - serverTime;
    
    setInterval(function()
    {
        $(".endtime").each(function()
        {
            var obj = $(this);
            var endTime = new Date(parseInt(obj.attr('value')) * 1000);
            var nowTime = new Date();
            var nMS=endTime.getTime() - nowTime.getTime() + difference;
            var myD=Math.floor(nMS/(1000 * 60 * 60 * 24));
            var myH=Math.floor(nMS/(1000*60*60)) % 24;
            var myM=Math.floor(nMS/(1000*60)) % 60;
            var myS=Math.floor(nMS/1000) % 60;
            var myMS=Math.floor(nMS/100) % 10;
            str = myD>= 0 ? myD+"天"+myH+"小時(shí)"+myM+"分"+myS+"."+myMS+"秒" : "已結(jié)束！"; 
            
            obj.html(str);
        });
    }, 100);
});
</script>
</head>

<body>
    <p>距離2015年05月18日還有</p>
    <div class="endtime" value="<?php echo strtotime('2015-05-18 00:00:00') ?>"></div>
    <p>距離2015年05月19日還有</p>
    <div class="endtime" value="<?php echo strtotime('2015-05-19 12:36:00') ?>"></div>
</body>
</html>

無(wú)毫秒版：

      <!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>倒計(jì)時(shí)</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    $(function(){ updateEndTime(); });
    
    //倒計(jì)時(shí)函數(shù)
    function updateEndTime()
    {
        var date = new Date();
        var time = date.getTime();  //當(dāng)前時(shí)間距1970年1月1日之間的毫秒數(shù)
     
        $(".settime").each(function(i){
     
        var endDate =this.getAttribute("endTime"); //結(jié)束時(shí)間字符串
        //轉(zhuǎn)換為時(shí)間日期類(lèi)型
        var endDate1 = eval('new Date(' + endDate.replace(/\d+(?=-[^-]+$)/, function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')');
    
        var endTime = endDate1.getTime(); //結(jié)束時(shí)間毫秒數(shù)
     
        var lag = (endTime - time) / 1000; //當(dāng)前時(shí)間和結(jié)束時(shí)間之間的秒數(shù)
        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+"小時(shí)"+minite+"分"+second+"秒");
        }
        else $(this).html("團(tuán)購(gòu)已經(jīng)結(jié)束啦！");
     });
     
     setTimeout("updateEndTime()",1000);
    }
</script>
</head>

<body>
    <div class="settime" endTime="2015-5-12 12:1:1"></div>
    <div class="settime" endTime="2015-6-13 12:8:1"></div>
    <div class="settime" endTime="2013-5-12 12:1:1"></div>
</body>
</html>

ikeepstudying.com

jQuery倒計(jì)時(shí)（仿團(tuán)購(gòu)）

更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系： 360901061

您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對(duì)您有幫助就好】元

2元

5元

10元

20元

自定義