jquery实现的判断倒计时是否结束代码

本章节介绍一段代码实例,此代码能够判断当前日期是否已经倒计时结束,此代码中并没有倒计时效果,只是判断是否倒计时完成,比如购物网站优惠期限等,虽然实际应用中,很少会出现类似的代码,不过希望能够给浏览者带来一定的启示作用。

代码如下:

function done(){
var str=$('#end').text();
var out=str.match(/\d+/g);
console.log(out);
var h=parseInt(out[0]),m=parseInt(out[1]),s=parseInt(out[2]);
console.log(h+'#'+m+'#'+s);
var calc=h*3600+m*60+s;
console.log(calc);
if(calc==0){
//code
}
else{
console.log('等待..');
}
var t=setTimeout('done()',1000);
}
done(); 

上面只是代码片段,不能够演示,下面介绍一下它的实现过程。

一.代码注释:

1.function done(){},此函数实现判断倒计时结束效果。
2.var str=$('#end').text(),获取指定元素中的文本内容,本代码中应该倒计时当前时间.
3.var out=str.match(/\d+/g),获取时间日期中数字的数组。
4.var h=parseInt(out[0]),m=parseInt(out[1]),s=parseInt(out[2]),分别获取小时、分钟和秒。
5.var calc=h*3600+m*60+s,转换成秒。
6.if(calc==0){//code},判断倒计时是否结束,然后指定相应的操作。
7.var t=setTimeout('done()',1000),每隔一秒执行一次判断函数。
8.done(),执行此函数。

jquery实现倒计时代码如下所示:

$(function(){
var tYear = ""; //输入的年份
var tMonth = ""; //输入的月份
var tDate = ""; //输入的日期
var iRemain = ""; //开始和结束之间相差的毫秒数
var sDate = ""; //倒计的天数
var sHour = ""; //倒计时的小时
var sMin = ""; //倒计时的分钟
var sSec = ""; //倒计时的秒数
var sMsec = ""; //毫秒数
//通用工具函数,在个位数上加零,根据传的N的参数,来设前面加几个零
function setDig(num,n){
var str = ""+num;
while(str.length<n){
str="0"+str
}
return str;
}
//获得相差的天,小时,分钟,秒
function getdate(){
//创建开始时间和结束时间的日期对象
var oStartDate = new Date();
var oEndDate = new Date();
//获取文本框的值
tYear = $("#tyear").val();
tMonth = $("#tmonth").val();
tDate = $("#tdate").val();
//设置结束时间
oEndDate.setFullYear(parseInt(tYear));
oEndDate.setMonth(parseInt(tMonth)-1);
oEndDate.setDate(parseInt(tDate));
oEndDate.setHours(0);
oEndDate.setMinutes(0);
oEndDate.setSeconds(0);
//求出开始和结束时间的秒数(除以1000)
iRemain = (oEndDate.getTime() - oStartDate.getTime())/1000;
//总的秒数除以一天的秒数,再取出整数部分,就得出有多少天。
sDate = setDig(parseInt(iRemain/(60*60*24)),3);
//总的秒数除以一天的秒数,然后取其中的余数,就是把整数天扣除之后,剩下的总秒数。
iRemain %= 60*60*24;
//剩下的总秒数除以一个小时的秒数,再取整数部分,就是有多少小时。
sHour = setDig(parseInt(iRemain/(60*60)),2)
//剩下的总秒数除以一个小时的秒数,再取其余数,这个余数,就是扣除小时这后,剩下的总秒数。
iRemain %= 60*60;
//剩下的总秒数除以一分钟的秒数,再取其整数部分,就是有多少分钟。
sMin = setDig(parseInt(iRemain/60),2)
//剩下的总秒数除以一分钟的秒数,再取其余数,这个余数,就是扣除分钟之后,剩下的总秒数。
iRemain%=60;
//剩下的秒数
sSec = setDig(iRemain,2);
//毫秒数
sMsec = sSec*100;
}
//更改显示的时间
function updateShow(){
$(".showdate span").text(tYear+"-"+tMonth+"-"+tDate);
$(".count span").each(function(index, element) {
if(index==0){
$(this).text(sDate);
}else if(index==1){
$(this).text(sHour);
}else if(index == 2){
$(this).text(sMin);
}else if(index == 3){
$(this).text(sSec);
}else if(index == 4){
$(this).text(sMsec);
}
});
}
//每一秒执行一次时间更新
function autoTime(){
getdate();
//如果小于零,清除调用自己,并且返回
if(iRemain<0){
clearTimeout(setT);
return;
}
updateShow();
var setT = setTimeout(autoTime,1000);
}
//点击按钮开始计时
$("button").click(function(){
autoTime();
})
})

记录需要注意的地方:

1.取模运算:

  iRemain %= 60*60*24;

就是返回余数,在这个实例中的余数,就是把整数拿走后,剩下的秒数。

2.工具函数 setDig(num,n)  

可以根据传入的参数,自动在传入的数字前加零

(0)

相关推荐

  • jQuery实现简单倒计时功能的方法

    本文实例讲述了jQuery实现简单倒计时功能的方法.分享给大家供大家参考,具体如下: 1.效果图如下: 2.html代码: <div class="timeFix"> <div class="daojishi" id="09/04/2016 00:00:00"> <span class="timeh"></span> <span class="timem"

  • jQuery实现的倒计时效果实例小结

    本文实例总结了jQuery实现的倒计时效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • jQuery实现发送验证码并60秒倒计时功能

    本文给大家分享一段js代码关于实现验证码功能并在60秒后倒计时功能.废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta content="width=device-width,initial-scale=1.0,ma

  • jQuery模拟爆炸倒计时功能实例代码

     HTML部分  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>炸弹倒计时</title> <style type="text/css"> .content { width: 200px; margin:0 auto; } .content .img1 { /*添加炸弹动

  • jQuery简单倒计时效果完整示例

    本文实例讲述了jQuery简单倒计时效果.分享给大家供大家参考,具体如下: 前天做了一个活动项目,其中有一块需要做倒计时的效果,由于需求比较简单,所以也就没用网上各种倒计时的插件.今天抽空整理出来,分享给大家. html 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>倒计时效果</titl

  • 基于jQuery倒计时插件实现团购秒杀效果

    倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的朋友一起学习吧! 1.1 帮助文档关键字 倒计时 秒杀 timer 1.2. 使用场景 这样的倒计时在购物网站中会经常使用到,比如秒杀,限时抢购,确认收货倒计时. 这个功能并不难实现,就是利用js的定时执行,搜了一下网上的代码,五花八门,都是一个方法,没有做到封装,方便使用,所以写了一个插件,方便项

  • jQuery短信验证倒计时功能实现方法详解

    本文实例讲述了jQuery短信验证倒计时功能实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > &l

  • 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

    相关阅读: 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能) 今天测试提了一个bug,发送短信倒计时功能,要求关闭页面也要进行倒计时.这想到了,当年我参与的周杰伦演唱会的先付先抢功能.与之类似,只不过,那个项目的时间都是服务器时间,本人目前有点偷懒,就用客户端的时间了. 一下是完整的代码,只不过在客户端的效率不是很好. <!doctype html> <html lang="en"> <head> <meta

  • jquery实现的判断倒计时是否结束代码

    本章节介绍一段代码实例,此代码能够判断当前日期是否已经倒计时结束,此代码中并没有倒计时效果,只是判断是否倒计时完成,比如购物网站优惠期限等,虽然实际应用中,很少会出现类似的代码,不过希望能够给浏览者带来一定的启示作用. 代码如下: function done(){ var str=$('#end').text(); var out=str.match(/\d+/g); console.log(out); var h=parseInt(out[0]),m=parseInt(out[1]),s=pa

  • jquery实现可关闭的倒计时广告特效代码

    本文实例讲述了jquery实现可关闭的倒计时广告特效代码.分享给大家供大家参考.具体如下: 这是一款类似播放视频时候最开始的倒计时广告,广告时间结束才能看到视频内容,一个JS小贴片广告代码,右上角带关闭按钮,左上角显示倒计时剩余时间,运行jQuery代码综合实现,CSS和HTML共同结合的网页特效,兼容各主流浏览器,本效果是从门户网站上整理而来.希望大家喜欢. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-close-time

  • IOS关于大型网站抢购、距活动结束,剩余时间倒计时的实现代码

    2016年七夕抢购七夕底价直降,满268再减50!满468减100!大牌49元起!相约七夕情人节!欧美日韩名妆香水,2折秒杀爆款!绝对正品! 真心表爱意!限时抢购等活动拥有尽有.那么问题来了,基于代码是如何实现此功能的呢?不要着急,下面效果给大家带来了关于大型网站抢购.距活动结束,剩余时间倒计时的核心代码,一起看看吧. 关键代码如下所示: /** * 倒计时 * * @param endTime 截止的时间戳 * * @return 返回的剩余时间 */ - (NSString*)remaini

  • 一个用jquery写的判断div滚动条到底部的方法【推荐】

    jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它. 我们现在只探讨和垂直滚动有关的 scrollTop.scrollHeight 属性. 一.滚动条有关属性的正确理解: 假设有以下Html代码: <div id="div1" style="overflow-y:auto; ove

  • 关于JavaScript和jQuery的类型判断详解

    对于类型的判断,JavaScript用typeof来进行. 栗子: console.log(typeof null); //object console.log(typeof []); //object console.log(typeof {}); //object console.log(typeof new Date()); //object console.log(typeof new Object); //object console.log(typeof function(){});

  • JQuery实现的按钮倒计时效果

    本文实例讲述了JQuery实现的按钮倒计时效果.分享给大家供大家参考,具体如下: 一个实现了在按钮上显示倒计时,倒计时完毕自动将按钮设置为不可用的效果,具体代码如下: <html> <head> <title>test count down button</title> <script src="jquery1.8.3.min.js" type="text/javascript"></script&g

  • jQuery自定义图片上传插件实例代码

    摘要 1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片 效果 调用方式 $("#picUrl").imgUpload({}),在代码内部为调用对象绑定了click事件,点击弹出上传界面. $(function(){ $("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'}) $(&q

  • JS判断时间段的实现代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <th>交易时间开始:</th> <td><input id="bcconDateBeginDate" name="bcconDateBeginDate" value="2016/06/12 00:00:00" class="easyui-datetimebox" editable="false" style=&

  • python中readline判断文件读取结束的方法

    本文实例讲述了python中readline判断文件读取结束的方法.分享给大家供大家参考.具体分析如下: 大家知道,python中按行读取文件可以使用readline函数,下面现介绍一个按行遍历读取文件的方法,通过这个方法,展开我们要讨论的问题: 复制代码 代码如下: filename = raw_input('Enter your file name')  #输入要遍历读取的文件路径及文件名 file = open(filename,'r') done = 0 while not  done:

随机推荐