商品进行倒计时
在很多时候,我们在做电子商城类的项目时,会经常用到倒计时,现在就给出常用的两种方法:
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>
分类:
HTML&CSS&JS
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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)