基于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 相关文章推荐
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
JavaScript中的闭包
Feb 24 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
js实现移动端轮播图
Dec 21 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
Javascript实现关闭广告效果
Jan 29 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中substr()与explode()函数用法分析
2014/11/24 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
PHP7 标准库修改
2021/03/09 PHP
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
jsonp原理及使用
2013/10/28 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
详解angular element()方法使用
2017/04/08 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
轻松理解Python 中的 descriptor
2017/09/15 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
几道PHP面试题
2013/04/14 面试题
初中生学习生活的自我评价
2013/11/20 职场文书
公务员培训心得体会
2013/12/28 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
2014年纪检工作总结
2014/11/12 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
python标准库ElementTree处理xml
2022/05/20 Python
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL