基于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 相关文章推荐
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 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网上调查系统
2006/10/09 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
python创建关联数组(字典)的方法
2015/05/04 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
python脚本实现验证码识别
2018/06/07 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
大学生创业计划书的用途
2014/01/08 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
承兑汇票延期证明
2015/06/23 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
2016春节放假通知范文
2015/08/18 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
Redis高并发缓存架构性能优化
2022/05/15 Redis