基于javascript实现精确到毫秒的倒计时限时抢购
更新时间：2016年04月17日 10:21:28 投稿：lijiao
现如今做电商网站必不可少的一个效果就是限时抢购，这也是各大电商网站的一种促销手段。如何实现倒计时限时抢购，本文为大家分享了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响应式图表Chartist.js的使用
本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用，具有一定的参考价值，有兴趣的可以了解一下2017-09-09
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
如果要为图片添加详细的图片说明，并为图片的说明设置一些格式，如字体的大小、颜色等，那么使用 title 这个属性来设置这些说明信息是没办法实现的。2010-03-03
虽说jquery支持css选择器，可以把一些css规则放在js里，js无论如何是比css灵活的。但是js修改的是dom的htmlelement的stlye，是一个操作而非规则。2009-06-06
这篇文章主要为大家详细介绍了基于JavaScript实现轮播图原理及示例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
在JavaScript中,${}用于模板文字（template literals）,为ES6中新增的字符串方法,其作用是配合反单引号实现字符串拼,代替以前传统复杂的引号双引号与+的拼接,简介明了,非常好用,本文给大家介绍JS中‘${}‘什么意思有什么作用,感兴趣的朋友一起看看吧2023-08-08
这篇文章主要为大家详细介绍了JavaScript实现下拉列表选择框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要为大家详细介绍了javascript自定义加载loading效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
Javascript调试之console对象——你不知道的一些小技巧
这篇文章主要总结了console对象的一些有用的方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-07-07
下面的这段代码是基于金山词霸网络翻译提供的接口，远程调用文件，可以作为一个自定义的在线查询工具。2010-01-01
在一些情况下需要直接往url上拼接请求参数,下面这篇文章主要给大家介绍了关于前端url拼接参数格式&?用&和? =拼接的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
最新评论