基于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中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
js AspxButton的客户端操作
Jun 26 Javascript
javascript 操作Word和Excel的实现代码
Oct 26 Javascript
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
jquery 表单取值常用代码
Dec 22 Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
js实现复制粘贴的两种方法
Dec 04 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的call_user_func传reference引发的思考
2010/07/23 PHP
php绘制一条直线的方法
2015/01/24 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
python绘图方法实例入门
2015/05/19 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
个人找工作的自我评价
2013/10/17 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
优秀员工评语
2014/02/10 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python
nginx lua 操作 mysql
2022/05/15 Servers
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server