1、效果及功能说明
通过对时间的控制来告诉用户一个活动还剩多少时间，精确到秒。
2、实现原理
首先定义活动的截至的时间，要重年份精确到毫秒，在获得当前的年份到秒钟，在用截至时间，减去现在的时间，剩下的还有多少的时间就把还剩下的时间给显示出来就得出了离截止日期还有多久。
主要代码

var startTime = new Date();

//获得当前的时间

startTime.setFullYear(2016, 5, 27);

//调用设置年份

startTime.setHours(23);

//调用设置指定的时间的小时字段

startTime.setMinutes(59);

//调用设置指定时间的分钟字段

startTime.setSeconds(59);

//调用设置指定时间的秒钟字段

startTime.setMilliseconds(999);

//调用置指定时间的毫秒字段

var EndTime=startTime.getTime();

//获得截至的时间

var nMS = EndTime - NowTime.getTime();

//截至时间减去当前时间获得剩余时间

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

//定义参数 获得天数

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

//定义参数 获得小时

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

//定义参数 获得分钟

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

//定义参数 获得秒钟 这些就是当前时间

3、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google
Chrome游览器下都可实现
4、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
5、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果
6、代码

<!DOCTYPE html>

<head>

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

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<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;">本次活动已结束。</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();

    //定义参数可返回当天的日期和时间

    startTime.setFullYear(2016, 5, 27);

    //调用设置年份

    startTime.setHours(23);

    //调用设置指定的时间的小时字段

    startTime.setMinutes(59);

    //调用设置指定时间的分钟字段

    startTime.setSeconds(59);

    //调用设置指定时间的秒钟字段

    startTime.setMilliseconds(999);

    //调用置指定时间的毫秒字段

    var EndTime=startTime.getTime();

    //定义参数可返回距 1970 年 1 月 1 日之间的毫秒数

    function GetRTime(){

    //定义方法

        var NowTime = new Date();

        //定义参数可返回当天的日期和时间

        var nMS = EndTime - NowTime.getTime();

        //定义参数 EndTime减去NowTime参数获得返回距 1970 年 1 月 1 日之间的毫秒数

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

        //定义参数 获得天数

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

        //定义参数 获得小时

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

        //定义参数 获得分钟

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

        //定义参数 获得秒钟

        if (nMS < 0){

        //如果秒钟大于0

            $("#dao").hide();

            //获得天数隐藏

            $("#daoend").show();

            //获得活动截止时间展开

        }else{

        //否则

           $("#dao").show();

           //天数展开

           $("#daoend").hide();

           //活动截止时间隐藏

           $("#RemainD").text(nD);

           //显示天数

           $("#RemainH").text(nH);

           //显示小时

           $("#RemainM").text(nM);

           //显示分钟

           $("#RemainS").text(nS);

           //显示秒钟

        }

    }

    $(document).ready(function () {

    //定义方法

        var timer_rt = window.setInterval("GetRTime()", 1000);

        //定义参数 显示出GetRTime()方法 1000毫秒以后启动

    });

    </script>

</body>

</html>

7、倒计时完成后，设置按钮的hidden属性为false，简单吧~

JQuery模仿淘宝天猫魔盒抢购页面倒计时效果的更多相关文章

  1. jQuery模仿淘宝商品评价

    最近做项目要做个商品评价的功能,我直接就跑到淘宝那里去研究了,可看着晕晕的,还不知道他是怎么做的,于是把图抠了下来,自己写了一个,接下来就展示一下我是怎么做的,大家有不同的实现方法可要记得分享一下呀. ...

  2. jquery模仿淘宝星星打分

    今天做论坛页面有星星评分功能,以下是代码.用的时候引入jquery <span> <ul class="hs_df_xx"> <li><i ...

  3. 模仿淘宝首页写的高仿页面，脚本全用的原生JS，菜鸟一枚高手看了勿喷哈

    自己仿照淘宝首页写的页面,仿真度自己感觉可以.JS脚本全是用原生JavaScript写得,没用框架.高手看了勿喷,请多多指正哈!先上网页截图看看效果,然后上源码: 上源码,先JavaScript : ...

  4. 淘宝天猫关键词SEO优化

    淘宝天猫的网站完全像是一个成熟的搜索引擎,只是从google.bing.baidu改成了淘宝天猫而已,普通搜索引擎有品专,有皇冠,有PC,有无线:淘宝天猫里面有钻展,有直通车,也有PC,无线.搜索引擎 ...

  5. Python网页信息采集：使用PhantomJS采集淘宝天猫商品内容

    1,引言 最近一直在看Scrapy 爬虫框架,并尝试使用Scrapy框架写一个可以实现网页信息采集的简单的小程序.尝试过程中遇到了很多小问题,希望大家多多指教. 本文主要介绍如何使用Scrapy结合P ...

  6. 漂亮！Javascript代码模仿淘宝宝贝搜索结果的分页显示效果

    分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager  JS ...

  7. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  8. 简单的抓取淘宝关键字信息、图片的Python爬虫|Python3中级玩家：淘宝天猫商品搜索爬虫自动化工具（第一篇）

    Python3中级玩家:淘宝天猫商品搜索爬虫自动化工具(第一篇) 淘宝改字段,Bugfix,查看https://github.com/hunterhug/taobaoscrapy.git 由于Gith ...

  9. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

随机推荐

  1. 前端安全系列之二：如何防止CSRF攻击？

    背景 随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业安全问题的高危据点.在移动互联网时代,前端人员除了传统的 XSS.CSRF 等安全问题之外,又时常遭遇网络劫持 ...

  2. Tkinter制作简单的python编辑器

    想要制作简单的python脚本编辑器,其中文字输入代码部分使用Tkinter中的Text控件即可实现. 但是问题是,如何实现高亮呢?参考python自带的编辑器:python27/vidle文件夹中的 ...

  3. 希尔排序之C++实现（高级版）

    希尔排序之C++实现(高级版) 一.源代码:ShellSortHigh.cpp /*希尔排序基本思想: 先取一个小于n的整数d1作为第一个增量,把文件的全部记录分组. 所有距离为d1的倍数的记录放在同 ...

  4. Metasploit小技巧

    meterpreter > 进入meterpreter之后即可进行一些相关木马操作了,下面是正式本章内容 首先可以查看帮助文档,命令“help”,挑常用操作来讲↓↓↓ ------------- ...

  5. [JOISC2014]歴史の研究/[BZOJ4241]历史研究

    [JOISC2014]歴史の研究/[BZOJ4241]历史研究 题目大意: 一个长度为\(n(n\le10^5)\)的数列\(A(A_i\le10^9)\),定义一个元素对一个区间\([l,r]\)的 ...

  6. （Nginx和PHP下）URL重写，TP实现URL重写

    UrlRewrite就是我们通常说的地址重写,用户得到的全部都是经过处理后的URL地址. 优点 一:提高安全性,可以有效的避免一些参数名.ID等完全暴露在用户面前,如果用户随便乱输的话,不符合规则的话 ...

  7. python开发_webbrowser_浏览器控制模块

    ''' python的webbrowser模块支持对浏览器进行一些操作 主要有以下三个方法: webbrowser.open(url, new=0, autoraise=True) webbrowse ...

  8. BZOJ 1192 鬼谷子的钱袋 数论

    1192:鬼谷子的钱袋 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1926  Solved: 1417 题目连接 http://www.lydsy ...

  9. 离线下载Xcode的文档

    https://developer.apple.com/library/downloads/docset-index.dvtdownloadableindex 找到里面的文档下载地址 例如iOS 8. ...

  10. Python3使用setuptools

    旧版的setuptools已经不能用于Python3上了,国外有大神fork出了另一分支distribute,它可以支持Python3:     1 2 3 4 5 6 7 #下载 wget http ...