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. 绝对良心的 Java 中发邮件功能

    开篇语,是不是感觉这个功能都老掉牙了,网上一大推的文章,随便找个代码就是了,为什么我还要选择专门写一篇呢,因为我遇到了不一样的坑…… 首先,不免俗套的把代码都贴上来,拿去执行吧,记住换上你的账号和授权 ...

  2. 使开发更便捷——Visual Studio 使用技巧——快捷键

    下面是.Net开发中常用的快捷键,熟练使用可以提高开发效率: Ctrl + K + C //注释代码 Ctrl + K + U //取消代码注释 Ctrl + k + d //快速格式化代码 Shif ...

  3. iOS 11开发教程（十一）了解iOS11应用视图

    iOS 11开发教程(十一)了解iOS11应用视图 在iPhone或者iPad中,用户看到的和摸到的都是视图.视图是用户界面的重要组成元素.本节将主要讲解视图的添加.删除以及位置和大小的设置等内容. ...

  4. BZOJ 1212 [HNOI2004]L语言 【AC自动机 + 背包】

    题目链接[http://www.lydsy.com/JudgeOnline/problem.php?id=1212] 题意:给你一些单词,然后给出一个没有标点的文本串S,都是小写字符.现在让你求用给出 ...

  5. JMS异步消息机制

    企业消息系统 Java Message Service 是由 Sun Microsystems 开发的,它为 Java 程序提供一种访问 企业消息系统 的方法.在讨论 JMS 之前,我们分来析一下企业 ...

  6. 洛谷.3803.[模板]多项式乘法(NTT)

    题目链接:洛谷.LOJ. 为什么和那些差那么多啊.. 在这里记一下原根 Definition 阶 若\(a,p\)互质,且\(p>1\),我们称使\(a^n\equiv 1\ (mod\ p)\ ...

  7. 更好的浏览器动画实现 requestAnimationFrame

    requestAnimationFrame 是专门为实现高性能的帧动画而设计的一个API: js一般是借助setTimeout或setInterval这两个函数实现动画,性能不佳. css3动画,性能 ...

  8. Codeforces Round #297 (Div. 2)C. Ilya and Sticks 贪心

    Codeforces Round #297 (Div. 2)C. Ilya and Sticks Time Limit: 2 Sec  Memory Limit: 256 MBSubmit: xxx  ...

  9. newtonsoft动态修改JObject

    直接上代码: var data = new { mobile = ", company = ", isTravel = ", invoiceId = ", se ...

  10. 你了解for循环吗

    大家学什么语言都会学for循环 可是你真的会用吗 通常写法都是 var arr=arr[1,2,3,4]; for(var i=0;i<arr.length;i++){ console.log( ...