`

Jquery订单列表的批量倒计时实现

 
阅读更多
<script language="javascript" type="text/javascript" src="jQuery-1.6-2.js"></script>
<script language="javascript" type="text/javascript">

$(function() {
	//启用过期时钟
  	order_expire_time();
});

//倒计时
function counterClock(left_time) {
	var left_time = parseInt(left_time);
	var days_second = 86400; //每天时间
	var hours_second = days_second / 24;
	var minute_second = hours_second / 60;
	var str = '';
	if(left_time > 0) {
		var days = parseInt(left_time / days_second);
		str += (days > 0) ? days + '天' : '';
		var hours = parseInt((left_time - days * days_second) / hours_second);
		str += hours > 0 ? hours + '时' : '';
		var minutes = parseInt((left_time - days * days_second - hours_second * hours) / minute_second);
		str += minutes > 0 ? minutes + '分' : '';
		second = left_time - days * days_second - hours_second * hours - minutes * minute_second;
		str += second + '秒';
	}
	return str;
}

//订单过期时间
function order_expire_time() {
  $('#transaction td[data-type="order_expire_time"],#order_status_show').each(function() {
    var time_obj = $(this).find('.time');
    var left_time_int = time_obj.attr('left_time_int');
    if(left_time_int) {
      var time_string = counterClock(left_time_int);
      if(time_string == '') time_obj.html('<span class="pngfix">&nbsp;</span>已失效');
      else {
        time_obj.html('<span class="pngfix">&nbsp;</span>' + time_string);
        time_obj.attr('left_time_int', left_time_int - 1);
      }
    }
  });
  window.setTimeout(function() {
    order_expire_time();
  }, 1000);
}
</script>
<table width="100%" class="transaction" id="transaction">
  <thead>
    <tr>
      <th>订单状态</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-type="order_expire_time"><span>等待卖家发货</span><br />
        <span>距离规定发货时间</span><br />
        <span class="time" left_time_int="162173"><span class="pngfix">&nbsp;</span>-</span></td>
    </tr>
  </tbody>
  <tbody>
    <tr height="100">
      <td data-type="order_expire_time"><span>等待卖家发货</span><br />
        <span>距离规定发货时间</span><br />
        <span class="time" left_time_int="76734"><span class="pngfix">&nbsp;</span>-</span></td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td data-type="order_expire_time"><span>等待卖家发货</span><br />
        <span>距离规定发货时间</span><br />
        <span class="time" left_time_int="76734"><span class="pngfix">&nbsp;</span>-</span></td>
    </tr>
  </tbody>
</table>
分享到:
评论

相关推荐

    jquery实现倒计时,支持多行分别无限循环倒计时

    本项目聚焦于使用jQuery实现一个功能丰富的倒计时功能,尤其关注多行独立且无限循环的倒计时应用。 倒计时是网页中常见的动态效果,常见于活动开始时间预告、考试倒计时或定时任务等场景。jQuery实现倒计时的核心...

    jQuery+flipTimer演示倒计时与时钟效果

    jQuery+flipTimer演示倒计时与时钟效果 jQuery+flipTimer演示倒计时与时钟效果 jQuery+flipTimer演示倒计时与时钟效果 jQuery+flipTimer演示倒计时与时钟效果

    jQuery实现网站倒计时

    jQuery,一个广泛使用的JavaScript库,提供了丰富的功能和简便的API,使得实现网站倒计时变得简单易行。本文将详细讲解如何利用jQuery来创建一个多功能的网站倒计时插件。 首先,我们需要理解jQuery的基本用法。...

    jquery倒计时插件多个倒计时同时计时代码

    下面是一个简单的jQuery倒计时插件实现示例: ```javascript (function($) { $.fn.countdown = function(endTime) { return this.each(function() { var $this = $(this); var countDownDate = new Date...

    jQuery翻牌倒计时效果demo

    在本文中,我们将深入探讨如何实现一个基于jQuery的翻牌倒计时效果。这个效果通常用于网站或应用中,以创建吸引用户注意力的倒计时计时器,比如促销活动的截止时间显示或者赛事倒计时等。我们将讨论jQuery库的基础...

    jquery.countdown倒计时插件下载_翻牌倒计时器特效

    jquery.countdown倒计时插件下载_翻牌倒计时器特效 jquery.countdown倒计时插件下载_翻牌倒计时器特效 jquery.countdown倒计时插件下载_翻牌倒计时器特效

    jQuery多功能网页倒计时插件

    在这个特定的场景中,我们讨论的是一个基于jQuery的多功能网页倒计时插件。这个插件旨在为网页提供灵活的倒计时功能,包括但不限于手机短信验证码的60秒或120秒倒计时,以及固定日期时间的倒计时。 首先,让我们...

    jQuery实现的倒计时器

    **jQuery实现的倒计时器** 在Web开发中,倒计时器是一种常见的功能,用于显示剩余时间,例如在线考试的截止时间、促销活动的结束时间等。jQuery,作为一个广泛使用的JavaScript库,提供了丰富的功能来简化这样的...

    【Jquery经典特效12】jQuery手机发送验证码倒计时代码

    在实际开发中,这个文件可能包含了完整的jQuery倒计时功能的示例代码,包括上述提到的各个步骤。通过阅读和学习这个文件,你可以更深入地了解并掌握这个特效的实现方式。 总的来说,jQuery手机发送验证码倒计时是...

    jquery实现倒计时和取消倒计时

    一个封装好的jquery倒计时,可以取消倒计时,可以指定截止时间,精确到天时分秒的一个jquery的脚本.其中页面和jquery.js需要自己加.这个有经验的程序员都没问题.

    jQuerycountdown是一款功能齐全的jQuery倒计时插件

    总的来说,jQuery.countdown是一个功能强大且易于使用的倒计时插件,能够帮助开发者轻松实现各种倒计时功能,提升用户体验。其简洁的API和灵活的回调机制使其在实际项目中具有很高的实用性。通过熟练掌握这个插件,...

    jQuery在线考试倒计时界面.rar

    《jQuery在线考试倒计时界面实现详解》 在IT领域,前端开发经常涉及到用户交互的丰富设计,其中考试系统就是一种常见的应用场景。本项目“jQuery在线考试倒计时界面”提供了一个无需数据库支持的静态答题体验,其...

    JQuery倒计时插件

    **jQuery倒计时插件详解** 在Web开发中,倒计时功能经常被用于各种应用场景,比如活动开始前的预告、考试倒计时、产品上市时间提示等。jQuery作为一个广泛使用的JavaScript库,提供了丰富的插件来帮助开发者实现...

    jQuery+H5结婚倒计时邀请函电子请帖模板.rar

    在这个结婚倒计时邀请函中,jQuery被用来实现动态效果,如数字倒计时的更新、背景的平滑过渡或者其他互动元素的响应。通过使用jQuery,开发者可以编写更简洁、高效的代码,同时提供更流畅的用户体验。 这个模板中的...

    JQuery 倒计时插件

    JQuery倒计时插件是Web开发中常用的一种工具,它可以帮助开发者在网页上实现动态的时间显示,例如倒计时至某个特定日期或时间。这种插件通常基于JavaScript库JQuery构建,因为JQuery简化了DOM操作和事件处理,使得...

    基于jQuery的倒计时插件

    **jQuery倒计时插件详解** 在Web开发中,倒计时功能经常被用于各种应用场景,如活动开始时间提醒、考试倒计时等。jQuery,作为一款轻量级的JavaScript库,提供了丰富的API来简化DOM操作,使得创建倒计时插件变得...

    用jquery.cookie写的倒计时

    在本文中,我们将深入探讨如何使用jQuery库中的`jquery.cookie`插件来实现一个具有刷新记忆功能的倒计时器。这个技术可以帮助我们创建一个在用户刷新页面后仍能保持计时状态的计时器,从而提升用户体验。 首先,...

    jquery数字读秒的倒计时代码.zip

    以下是一个基本的jQuery倒计时实现步骤: 1. **初始化时间**:首先,你需要确定倒计时的目标时间,这可以通过创建一个新的Date对象来设定,例如`var endTime = new Date("2023年12月31日23:59:59");`。 2. **计算...

    jQuery创意精美的网页倒计时代码

    &lt;title&gt;jQuery倒计时计时器 &lt;div id="countdown"&gt;&lt;/div&gt; 设置时间 &lt;script src="https://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="js/countdown.js"&gt;&lt;/script&gt; ``` 接下来是CSS样式部分...

Global site tag (gtag.js) - Google Analytics