基于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 相关文章推荐
js查找父节点的简单方法
Jun 28 Javascript
学习ExtJS accordion布局
Oct 08 Javascript
js 金额文本框实现代码
Feb 14 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 Javascript
JavaScript 反射学习技巧
Oct 16 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下escape解码函数的实现方法
2010/08/08 PHP
php简单压缩css样式示例
2016/09/22 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
浅谈Django REST Framework限速
2017/12/12 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
出国留学自荐信
2013/10/25 职场文书
土木建筑学生自我评价
2014/01/14 职场文书
承办会议欢迎词
2014/01/17 职场文书
经典安踏广告词
2014/03/21 职场文书
物理学专业自荐信
2014/06/11 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
老人节标语大全
2014/10/08 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
学校百日安全活动总结
2015/05/07 职场文书
计算机实训心得体会
2016/01/14 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB