基于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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
JavaScript String 对象常用方法详解
May 13 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 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 array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
深入浅析php json 格式控制
2015/12/24 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
vue之数据交互实例代码
2017/06/20 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
跟老齐学Python之变量和参数
2014/10/10 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
Python实现Kmeans聚类算法
2020/06/10 Python
便捷提取python导入包的属性方法
2018/10/15 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
基于python图像处理API的使用示例
2020/04/03 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
广告学专业应届生求职信
2013/10/01 职场文书
大专生工程监理求职信
2013/10/04 职场文书
半年思想汇报
2013/12/30 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
平面设计师岗位职责
2014/09/18 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
大学生志愿者心得体会
2016/01/15 职场文书