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. join和 Daemon守护线程

    一.前言 一个程序至少有一个主线程,主线程启动子线程后,它们之间并没有隶属关系.主线程和子线程执行是并行的,相互独立.主线程执行完毕后默认不等子线程执行结束就接着往下走了,如果有其他程序就会运行另外的 ...

  2. Django快速创建博客，包含了整个框架使用过程，简单易懂

    创建工程                                                                                                 ...

  3. bzoj 5210(树链刨分下做个dp）

    5210: 最大连通子块和 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 211  Solved: 65[Submit][Status][Discus ...

  4. [HNOI2008]玩具装箱

    OJ题号: BZOJ1010 思路: 斜率优化动态规划. 由题意得状态转移方程为$f_i=\displaystyle{\min_{j=0}^{i-1}}\{f_j+\left(i-j-1+\displ ...

  5. HTTP首部字段

    HTTP首部由首部字段名和首部字段值组成,以逗号隔开.如果首部出现重复,有些浏览器优先处理第一个出现的首部,有些优先处理后者. 主要分为四大类 通用首部字段 请求首部字段 响应首部字段 实体首部字段 ...

  6. hdu 4547 LCA **

    题意:在Windows下我们可以通过cmd运行DOS的部分功能,其中CD是一条很有意思的命令,通过CD操作,我们可以改变当前目录. 这里我们简化一下问题,假设只有一个根目录,CD操作也只有两种方式: ...

  7. 【JavaScript代码实现二】通用的事件侦听器函数

    // event(事件)工具集,来源:github.com/markyun markyun.Event = { // 页面加载完成后 readyEvent : function(fn) { if (f ...

  8. UVALive 5058 Counting BST 数学

    B - Counting BST Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit S ...

  9. git命令行使用帮助

    克隆代码库 git clone git_project_url 提交代码 git commit -m 'commit messge'

  10. git push时提示"fatal: The current branch master has no..."

    git push到远程仓库时提示:fatal: The current branch master2 has no upstream branch. To push the current branc ...