基于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 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
jquery 问答知识整理
Feb 11 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
js判断字符长度以及中英文数字等
Dec 31 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
this.$toast() 了解一下?
Apr 18 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中soap的用法实例
2014/10/24 PHP
php的ddos攻击解决方法
2015/01/08 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
js中this用法实例详解
2015/05/05 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
python3.x上post发送json数据
2018/03/04 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
Python中如何导入类示例详解
2019/04/17 Python
Django中FilePathField字段的用法
2020/05/21 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
几个Linux面试题笔试题
2016/08/01 面试题
大学军训感言600字
2014/02/25 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
家长意见书
2015/06/04 职场文书
初二英语教学反思
2016/02/15 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
Pandas加速代码之避免使用for循环
2021/05/30 Python