基于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 相关文章推荐
如何用javascript控制上传文件的大小
Oct 26 Javascript
tbody元素支持嵌套的注意方法
Mar 24 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
vue axios post发送复杂对象问题
Jun 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
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
javascript与CSS复习(三)
2010/06/29 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
Python中几个比较常见的名词解释
2015/07/04 Python
Python装饰器用法实例分析
2019/01/14 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
python3 实现口罩抽签的功能
2020/03/11 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
python中最小二乘法详细讲解
2021/02/19 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
安全教育心得体会
2013/12/29 职场文书
二年级数学教学反思
2014/01/21 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
教学督导岗位职责
2015/04/10 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
使用javascript解析二维码的三种方式
2021/11/11 Javascript