基于javascript实现精确到毫秒的倒计时限时抢购


Posted in Javascript onApril 17, 2016

这篇文章为大家分享了javascript实现倒计时限时抢购,精确到毫秒的倒计时,供大家参考,具体内容如下

一、效果图

下面的图片就是聚划算上面的限时抢的效果

基于javascript实现精确到毫秒的倒计时限时抢购

二、实现限时抢的效果需要用到的知识 :Javascript Date()对象
Date()返回当前的日期和事件
getYear()返回年份 获得年最好用
getFullYear()方法来操作(完整格式如2016)
getMonth()返回月份值(从0开始,+1)
getDay()返回星期几(0-6)
getHours()返回小时数(0-23)
getMinutes()返回分钟数(0-59)
getSeconds()返回秒数
getTime()返回毫秒数
当然,上面的调用方法我们不一定全部用到,也要看你自己的需求,废话不多说,我们直接上代码:
1、HTML页面代码:
<p class="left-time"></p>
我们把倒计时的内容放在class为left-time的<p>标签内.
2、JS脚本:

$(function(){
  function leftTime(){
    var endTime = new Date("2016/5/20,12:00:00");//结束时间
    var curTime = new Date();//当前时间
    var leftTime = parseInt((endTime.getTime() - curTime.getTime())/1000);//获得时间差
    //小时、分、秒需要取模运算
    var d = parseInt(leftTime/(60*60*24));
    var h = parseInt(leftTime/(60*60)%24);
    var m = parseInt(leftTime/60%60);
    var s = parseInt(leftTime%60);
    var ms = parseInt(((endTime.getTime() - curTime.getTime())/100)%10);
    var txt = "剩余:"+d+"天"+h+"小时"+m+"分钟"+s+"."+ms+"秒";
    $(".left-time").text(txt);
    if(leftTime<=0){ $(".left-time").text("团购结束");}
  };
  leftTime();
  var set = setInterval(leftTime,100);
});

上面的js就实现了一个简单的限时抢的小例子,其中parseInt()方法是取整,getTime()把时间转化为毫秒,除了parseInt()方法之外,还可以用Math.floor()向下取整的方法代替.

最后记得不要忘记了给个if()判断时间结束的时候需要显示的内容哦,不然就会出现不必要的小bug哟!

Javascript 相关文章推荐
Js动态创建div
Sep 25 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
JS闭包用法实例分析
Mar 27 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 #Javascript
第一次接触JS require.js模块化工具
Apr 17 #Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 #Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 #Javascript
理解javascript对象继承
Apr 17 #Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 #Javascript
js如何准确获取当前页面url网址信息
Sep 13 #Javascript
You might like
PHP 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
php正则表达式学习笔记
2015/11/13 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
python实现的希尔排序算法实例
2015/07/01 Python
Python变量和数据类型详解
2017/02/15 Python
Python探索之创建二叉树
2017/10/25 Python
目前最全的python的就业方向
2018/06/05 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
电子商务助理求职自荐信
2014/04/10 职场文书
个人考核材料
2014/05/15 职场文书
物业接待员岗位职责
2015/04/15 职场文书
高三生物教学反思
2016/02/22 职场文书
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS