欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

<legend id="8zgtf"><track id="8zgtf"><dfn id="8zgtf"></dfn></track></legend>

^{<blockquote id="8zgtf"></blockquote>}

JQuery仿小米手機搶購頁面倒計時效果

更新時間：2014年12月16日 14:27:36 投稿：hebedich

這篇文章主要介紹了JQuery仿小米手機搶購頁面倒計時效果，從功能到實現(xiàn)原理以及主要代碼都做了詳細的介紹，推薦給有相同需求的小伙伴。

1、效果及功能說明

通過對時間的控制來告訴用戶一個活動還剩多少時間，精確到秒。

2、實現(xiàn)原理

首先定義活動的截至的時間，要重年份精確到毫秒，在獲得當前的年份到秒鐘，在用截至時間，減去現(xiàn)在的時間，剩下的還有多少的時間就把還剩下的時間給顯示出來就得出了離截止日期還有多久。

主要代碼

復制代碼代碼如下:

var startTime = new Date();

//獲得當前的時間

startTime.setFullYear(2016, 5, 27);

//調(diào)用設置年份

startTime.setHours(23);

//調(diào)用設置指定的時間的小時字段

startTime.setMinutes(59);

//調(diào)用設置指定時間的分鐘字段

startTime.setSeconds(59);

//調(diào)用設置指定時間的秒鐘字段

startTime.setMilliseconds(999);

//調(diào)用置指定時間的毫秒字段

var EndTime=startTime.getTime();

//獲得截至的時間

var nMS = EndTime - NowTime.getTime();

//截至時間減去當前時間獲得剩余時間

var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));

//定義參數(shù) 獲得天數(shù)

var nH = Math.floor(nMS/(1000*60*60)) % 24;

//定義參數(shù) 獲得小時

var nM = Math.floor(nMS/(1000*60)) % 60;

//定義參數(shù) 獲得分鐘

var nS = Math.floor(nMS/1000) % 60;

//定義參數(shù) 獲得秒鐘 這些就是當前時間

3、運行環(huán)境
IE6 IE7 IE8及以上 Firefox 和 Google
Chrome游覽器下都可實現(xiàn)

4、所有圖片的壓縮包新建一個文件后將包解壓放進文件夾圖片的壓縮包在頁面的最下方可以看到并下載下載后無需修改文件夾名因為本身就已經(jīng)寫好了和html5內(nèi)的路徑相吻合

5、將創(chuàng)建html文件保存的時候?qū)⒕幋a類型換成(UTF-8有簽名)這樣可以讓部分中文正常的顯示出來，將保存類型(T)換成(所有文件(*.*))，將html5和解壓后的圖片文件夾放在同一個文件夾內(nèi)效果

6、代碼

復制代碼代碼如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src=">
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180%;background:#fff;}
.timerbg{background:url(images/bg.png) no-repeat;height:60px;width:980px;margin:20px auto;}
.timerbg div{float:right;font-size:16px;margin:24px 0 0 0;font-weight:800;text-align:left;width:335px;font-family:"微軟雅黑","宋體";}
.timerbg div strong{font-size:28px;margin:0 13px;color:#D6000F;font-family:Arial;}
#daoend{margin:24px 0 0 0;width:324px;color:#D6000F;font-size:22px;}
</style>
</head>
<body>
    <div class="timerbg">
        <div id="daoend" style="display:none;">本次活動已結(jié)束。</div>
        <div id="dao"><strong id="RemainD"></strong>天<strong id="RemainH"></strong>時<strong id="RemainM"></strong>分<strong id="RemainS"></strong>秒</div>
    </div>
    <script type="text/javascript">
    var startTime = new Date();
    //定義參數(shù)可返回當天的日期和時間
    startTime.setFullYear(2016, 5, 27);
    //調(diào)用設置年份
    startTime.setHours(23);
    //調(diào)用設置指定的時間的小時字段
    startTime.setMinutes(59);
    //調(diào)用設置指定時間的分鐘字段
    startTime.setSeconds(59);
    //調(diào)用設置指定時間的秒鐘字段
    startTime.setMilliseconds(999);
    //調(diào)用置指定時間的毫秒字段
    var EndTime=startTime.getTime();
    //定義參數(shù)可返回距 1970 年 1 月 1 日之間的毫秒數(shù)
    function GetRTime(){
    //定義方法
        var NowTime = new Date();
        //定義參數(shù)可返回當天的日期和時間
        var nMS = EndTime - NowTime.getTime();
        //定義參數(shù) EndTime減去NowTime參數(shù)獲得返回距 1970 年 1 月 1 日之間的毫秒數(shù)
        var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));
        //定義參數(shù) 獲得天數(shù)
        var nH = Math.floor(nMS/(1000*60*60)) % 24;
        //定義參數(shù) 獲得小時
        var nM = Math.floor(nMS/(1000*60)) % 60;
        //定義參數(shù) 獲得分鐘
        var nS = Math.floor(nMS/1000) % 60;
        //定義參數(shù) 獲得秒鐘
        if (nMS < 0){
        //如果秒鐘大于0
            $("#dao").hide();
            //獲得天數(shù)隱藏
            $("#daoend").show();
            //獲得活動截止時間展開
        }else{
        //否則
           $("#dao").show();
           //天數(shù)展開
           $("#daoend").hide();
           //活動截止時間隱藏
           $("#RemainD").text(nD);
           //顯示天數(shù)
           $("#RemainH").text(nH);
           //顯示小時
           $("#RemainM").text(nM);
           //顯示分鐘
           $("#RemainS").text(nS);
           //顯示秒鐘
        }
    }
    $(document).ready(function () {
    //定義方法
        var timer_rt = window.setInterval("GetRTime()", 1000);
        //定義參數(shù) 顯示出GetRTime()方法 1000毫秒以后啟動
    });
    </script>
</body>
</html>

7、倒計時完成后，設置按鈕的hidden屬性為false，簡單吧~

本代碼是從本人項目中截取出來的，小伙伴們可以放心使用，如有疑問，請留言。

您可能感興趣的文章:

相關文章

jQuery實現(xiàn)右側(cè)顯示可向左滑動展示的深色QQ客服效果代碼
這篇文章主要介紹了jQuery實現(xiàn)右側(cè)顯示可向左滑動展示的深色QQ客服效果代碼,涉及jQuery控制頁面元素樣式動態(tài)變換的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-10-10
深入理解jquery自定義動畫animate()
下面小編就為大家?guī)硪黄钊肜斫鈐query自定義動畫animate()。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
豆瓣網(wǎng)的jquery代碼實例
豆瓣網(wǎng)的jquery實例代碼，效果不錯，方便大家學習
2008-06-06
jquery插件實現(xiàn)懸浮的菜單
這篇文章主要為大家詳細介紹了jquery插件實現(xiàn)懸浮的菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
jQuery1.5.1 animate方法源碼閱讀
jquery本身的動畫較之mootools，總體上感覺稍微有點遜色，不過因為其有強大的插件，加上API易讀型，易用性等備受青睞，在動畫效果方面，API提供了比如一些比較實用的Effects，下面是main方法animate
2011-04-04
實例代碼講解jquery easyui動態(tài)tab頁
這篇文章主要介紹了實例代碼講解jquery easyui動態(tài)tab頁的相關資料,需要的朋友可以參考下
2015-11-11
淺談EasyUI常用控件的禁用方法
下面小編就為大家?guī)硪黄獪\談EasyUI常用控件的禁用方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
JQuery表格內(nèi)容過濾的實現(xiàn)方法
使用JQuery 實現(xiàn)一個表格內(nèi)容過濾的功能，有需要的朋友可以參考一下，代碼如下：
2013-07-07
jquery ajax屬性async(同步異步)示例
在jquery的ajax中如果我們希望實現(xiàn)同步或者異步我們可以直接設置async發(fā)生為真或假即可true false，下面舉幾個jquery ajax同步和異步實例
2013-11-11
jQuery鼠標事件匯總
鼠標事件是指用戶在移動鼠標光標或者點擊任意鼠標鍵時觸發(fā)的事件,jQuery中封裝了基本上所有的鼠標事件包括點擊,雙擊,移動等鼠標事件,下面我們就來看下這些事件的語法和用法
2015-08-08

最新評論