基于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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
摘自百度的图片轮换效果代码
Nov 19 Javascript
js程序中美元符号$是什么
Jun 05 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 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简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
php防止sql注入的方法详解
2017/02/20 PHP
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
初步探究Python程序的执行原理
2015/04/11 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Python在线运行代码助手
2016/07/15 Python
Python程序退出方式小结
2017/12/09 Python
python实现随机漫步算法
2018/08/27 Python
Python基于百度云文字识别API
2018/12/13 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
毕业生找工作推荐信
2013/11/21 职场文书
大学在校生求职信范文
2013/11/21 职场文书
幼儿教师国培感言
2014/02/19 职场文书
政风行风建设责任书
2014/07/23 职场文书
公民授权委托书范本
2014/09/17 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
计算机专业自荐信
2015/03/05 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang