商品进行倒计时

  在很多时候,我们在做电子商城类的项目时,会经常用到倒计时,现在就给出常用的两种方法:

  1.只有一个倒计时:

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<%@ 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>
复制代码

 

posted on   微笑着行走者  阅读(293)  评论(0编辑  收藏  举报

编辑推荐:
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· 程序员常用高效实用工具推荐,办公效率提升利器!
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)

导航

< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示