基于javascript实现精确到毫秒的倒计时限时抢购
作者:bea
这篇文章为大家分享了javascript实现倒计时限时抢购,精确到毫秒的倒计时,供大家参考,具体内容如下 一、效果图 下面的图片就是聚划算上面的限时抢的效果 二、实现限时抢的效果需要用到的知识 :Javascript Date()对象 Date()返回当前的日期和事件 getYear()返回年份 获得年最好用 getFullYear()方法来操作(完整格式如2016) getMonth()返回月份值(从0开始,+1) getDay()返回星期几(0-6) getHours(
这篇文章为大家分享了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哟!
猜你喜欢
您可能感兴趣的文章:
- jQuery的内容过滤选择器学习教程
- 原生JS和jQuery版实现文件上传功能
- 基于Bootstrap实现Material Design风格表单插件 附源码下载
- jQuery 如何给Carousel插件添加新的功能
- AngularJS入门教程之AngularJS模型
- AngularJS入门教程之AngularJS指令
- AngularJS入门教程之AngularJS表达式
- jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
- jQuery使用$.each遍历json数组的简单实现方法
- jQuery validate+artdialog+jquery form实现弹出表单思路详解
- JS中artdialog弹出框控件之提交表单思路详解
- jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
- ArtEditor富文本编辑器增加表单提交功能
- JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
- JS区分浏览器页面是刷新还是关闭
- js组件SlotMachine实现图片切换效果制作抽奖系统
- JS中取二维数组中最大值的方法汇总
- JS组件Bootstrap ContextMenu右键菜单使用方法
- 最简单js代码实现select二级联动下拉菜单