商品进行倒计时
在很多时候，我们在做电子商城类的项目时，会经常用到倒计时，现在就给出常用的两种方法：
1.只有一个倒计时：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="/WEB-INF/tlds/c.tld" %>
<%@ taglib uri="/WEB-INF/tlds/fmt.tld" prefix="fmt" %>
<!doctype html>
<html class="no-js">
<head>
<title>收银台息平台</title>
<script src="frame/pingxx/pingpp.js" type="text/javascript"></script>
<c:if test="${effectSecond >= 0}">
<script type="text/javascript">
var SysSecond;
var InterValObj;
$(document).ready(function() {
SysSecond = parseInt($("#remainSeconds").html()); //这里获取倒计时的起始时间
InterValObj = window.setInterval(SetRemainTime, 1000); //间隔函数，1秒执行
});
//将时间减去1秒，计算天、时、分、秒
function SetRemainTime() {
if (SysSecond > 0) {
SysSecond = SysSecond - 1;
var second = Math.floor(SysSecond % 60); // 计算秒
var minite = Math.floor((SysSecond / 60) % 60); //计算分
var hour = Math.floor((SysSecond / 3600) % 24); //计算小时
var day = Math.floor((SysSecond / 3600) / 24); //计算天
$("#remainTime").html(hour + "小时" + minite + "分" + second + "秒");
} else {//剩余时间小于或等于0的时候，就停止间隔函数
window.clearInterval(InterValObj);
// 这里可以添加倒计时时间为0后需要执行的事件
var ordersID = $("#ordersID").val();
Alert({
msg : "订单已失效",
ok : function() {
$.ajax({
type : 'post',
url : 'orders/cancelOrders.do',
data : {
'id': ordersID
},
dataType : 'json',
async : true,
success : function(data) {
if (data.success) {
history.back(-1);
}
}
});
}
});
}
}
</script>
</c:if>
</head>
<body>
<header data-am-widget="header" class="am-header am-header-fixed am-header-default">
<div class="am-header-left am-header-nav">
<a href="javascript:history.back();">
<i class="am-header-icon am-icon-angle-left am-icon-sm"></i>
</a>
</div>
<h1 class="am-header-title">
<a href="#">收银台</a>
</h1>
</header>
<div class="blank1"></div>
<!-- 列表 -->
<ul class="am-list list">
<c:if test="${effectSecond > 0 }">
<li class="am-padding-sm">
<div>
<span>请您于</span>
<span id="remainSeconds" style="display:none">${effectSecond}</span>
<span id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900"></span>
<span>内付款，超时订单将自动关闭</span>
</div>
</li>
</c:if>
<li class="am-padding-sm">
<input id="ordersID" name="ordersID" value="${orders.id }" type="hidden"/>
<div>
<span>订单编号</span>
<span class="gray am-fr">${orders.no }</span>
<input id="ordersNo" name="ordersNo" value="${orders.no }" type="hidden"/>
</div>
</li>
<li class="am-padding-sm">
<div>
<span>订单金额</span>
<span class="red am-fr">${orders.price }元</span>
<input id="ordersPrice" name="ordersPrice" value="${orders.price }" type="hidden"/>
</div>
</li>
</ul>
<div class="blank1"></div>
<ul class="am-list list">
<li class="am-padding-sm">
<c:if test="${orders.price == 0}">
<div>
<span>您已成功兑换此信息</span>
<span style="float:right;"><a href="javascript:void(0)" onclick="ordersByVoucher()">点击查看订单详情</a></span>
</div>
</c:if>
</li>
</ul>
<c:if test="${orders.price > 0}">
<div class="am-padding-sm bg_white">支付方式</div>
<hr class="am-margin-0"/>
<div class="am-padding-horizontal-xs bg_white">
<ul class="am-list list">
<li class="entry" style="border-top:0px;">
<a href="javascript:void(0)" onclick="payByBalance()">
<img src="img/ico_pay_balance.png" class="am-inline-block am-vertical-align-bottom" style="max-height:4rem;"/>
<span class="am-inline-block am-vertical-align-bottom">
<div class="am-text-lg">账户余额支付</div>
<div class="am-text-sm">（余额：${userAmount.balance}元）</div>
<input id="balance" name="balance" value="${userAmount.balance}" type="hidden"/>
</span>
</a>
</li>
<li class="entry">
<a href="javascript:void(0)" onclick="payment('wx_pub')">
<img src="img/ico_pay_WeChat.png" class="am-inline-block am-vertical-align-bottom" style="max-height:4rem;"/>
<span class="am-inline-block am-vertical-align-bottom">
<div class="am-text-lg">微信支付</div>
<div class="am-text-sm">微信安全支付</div>
</span>
</a>
</li>
</ul>
</div>
</c:if>
</body>
</html>
2.一个页面中多个商品倒计时
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jquery一个页面中多个商品进行倒计时</title> <script language="javascript" src="/js/jquery.js"></script> <script type="text/javascript"> $(function(){ updateEndTime(); }); //倒计时函数 function updateEndTime(){ var date = new Date(); var time = date.getTime(); //当前时间距1970年1月1日之间的毫秒数 $(".settime").each(function(i){ var endDate =this.getAttribute("endTime"); //结束时间字符串 //转换为时间日期类型 var endDate1 = eval('new Date(' + endDate.replace(/\d+(?=-[^-]+$)/, function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')'); var endTime = endDate1.getTime(); //结束时间毫秒数 var lag = (endTime - time) / 1000; //当前时间和结束时间之间的秒数 if(lag > 0) { var second = Math.floor(lag % 60); var minite = Math.floor((lag / 60) % 60); var hour = Math.floor((lag / 3600) % 24); var day = Math.floor((lag / 3600) / 24); $(this).html(day+"天"+hour+"小时"+minite+"分"+second+"秒"); } else $(this).html("抢购已经结束啦！"); }); setTimeout("updateEndTime()",1000); } </script> </head> <body> <div class="settime" endTime="2012-5-30 12:1:1"></div> 可以写在循环里，只有保持跟上面的ID一致就可以啦 <div class="settime" endTime="2012-5-29 14:58:7"></div> </body> </html>
浙公网安备 33010602011771号