基于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的一个拖拽到指定区域内的效果
Sep 21 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 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 xml文件操作实现代码(二)
2009/03/20 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
python实现对一个完整url进行分割的方法
2015/04/29 Python
在Python的Django框架中编写编译函数
2015/07/20 Python
Python实时获取cmd的输出
2015/12/13 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
详解python中的hashlib模块的使用
2019/04/22 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
外贸英语毕业生自荐信
2013/11/14 职场文书
志愿者活动总结
2014/04/28 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
2014年法务工作总结
2014/12/11 职场文书
优秀教师事迹材料
2014/12/15 职场文书
英文商务邀请函范文
2015/01/31 职场文书
酒店温馨提示语
2015/07/14 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
python之json文件转xml文件案例讲解
2021/08/07 Python