基于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 03 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
webpack4的迁移的使用方法
May 25 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
Vue插件之滑动验证码用法详解
Apr 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继承的一个应用
2011/09/06 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
python正则表达式re模块详解
2014/06/25 Python
python使用arp欺骗伪造网关的方法
2015/04/24 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
pandas 数据类型转换的实现
2020/12/29 Python
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
项目管理计划书
2014/01/09 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
党员评议自我评价
2015/03/03 职场文书
工会工作个人总结
2015/03/03 职场文书
大学生求职信怎么写
2015/03/19 职场文书
Nginx反向代理、重定向
2022/04/13 Servers