基于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 触发a链接点击事件解决方案
May 02 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
JS 两个字符串时间的天数差计算
Aug 25 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
js module大战
Apr 19 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
第二次聊一聊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
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
php微信开发之关注事件
2018/06/14 PHP
javascript 拖动表格行实现代码
2011/05/05 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
python-numpy-指数分布实例详解
2019/12/07 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
十佳教师事迹材料
2014/01/11 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
会计专业自我鉴定
2014/02/10 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
教职工代表大会主持词
2014/04/01 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL