JQuery仿小米手机抢购页面倒计时效果


Posted in Javascript onDecember 16, 2014

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,简单吧~

本代码是从本人项目中截取出来的,小伙伴们可以放心使用,如有疑问,请留言。

Javascript 相关文章推荐
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
详解Angular的8个主要构造块
Jun 20 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 Javascript
JavaScript实现拖拽盒子效果
Feb 06 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
详细分析vue响应式原理
Jun 22 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 Javascript
jQuery实现数字加减效果汇总
Dec 16 #Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 #Javascript
浅谈Javascript变量作用域问题
Dec 16 #Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 #Javascript
javascript arguments使用示例
Dec 16 #Javascript
javascript实现日期格式转换
Dec 16 #Javascript
javascript实现禁止复制网页内容
Dec 16 #Javascript
You might like
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
再谈JavaScript线程
2015/07/10 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
python生成特定分布数的实例
2019/12/05 Python
python输出pdf文档的实例
2020/02/13 Python
如何写python的配置文件
2020/06/07 Python
python ssh 执行shell命令的示例
2020/09/29 Python
python 自动识别并连接串口的实现
2021/01/19 Python
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
村捐赠仪式答谢词
2014/01/21 职场文书
小学生学习感言
2014/03/10 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
介绍信模板
2015/01/31 职场文书
草房子读书笔记
2015/06/29 职场文书