基于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 相关文章推荐
JavaScript 继承详解(四)
Jul 13 Javascript
JQuery 获取和设置Select选项的代码
Feb 07 Javascript
document.getElementById介绍
Sep 13 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
深入了解JS之作用域和闭包
Jun 16 Javascript
详解JavaScript中的链式调用
Nov 27 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
星际中的相关伤害
2020/03/04 星际争霸
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
美术师范毕业生自荐信
2013/11/16 职场文书
中学生期末评语
2014/02/03 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
二年级学生期末评语
2014/12/26 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
社区低保工作总结2015
2015/07/23 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python
Nginx限流和黑名单配置
2022/05/20 Servers