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 相关文章推荐
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
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实现Ftp用户的在线管理的代码
2007/03/06 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
新手入门常用代码集锦
2007/01/11 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
Python如何绘制日历图和热力图
2020/08/07 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
出纳岗位职责范本
2013/12/01 职场文书
大一自我鉴定范文
2013/12/27 职场文书
运动会开幕式邀请函
2014/01/22 职场文书
降价通知函
2015/04/23 职场文书
中学政教处工作总结
2015/08/13 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
浅谈JavaScript作用域
2021/12/06 Javascript
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript