【工作笔记】微信公众号页面倒计时处理

来源：互联网发布：数控机床编程入门书籍编辑：程序博客网时间：2024/06/05 03:28
效果图：
页面代码：
<%@ include file="/common/taglibs.jsp"%><%@ include file="/common/common.jsp"%><%@ page contentType="text/html; charset=UTF-8"%><!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"><title>详情</title><link rel="stylesheet" href="${ctx}/style/weui.min.css" /><link rel="stylesheet" href="${ctx}/style/pingtuan.css"/><script src="${ctx}/js/jquery-1.8.2.min.js"></script><script type="text/javascript">var endTime;$(function(){// 结束时间，毫秒数endTime = "${timeDiffer}";leftTime(endTime);});/** * 倒计时 */function leftTime(endTime){var t = parseInt(endTime);if(t > 0){var d = parseInt(t / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数 var h = parseInt(t / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时 var m = parseInt(t / 1000 / 60 % 60, 10);//计算剩余的分钟 var s = parseInt(t / 1000 % 60, 10);//计算剩余的秒数 d = checkTime(d);h = checkTime(h);m = checkTime(m);s = checkTime(s);if(parseInt(d) > 0){$("#d").css("display", "");$("#d").text(d);$("#dd").css("display", "");$("#dd").text("天");}$("#h").text(h);$("#hh").text("时");$("#m").text(m);$("#mm").text("分");$("#s").text(s);setTimeout(function(){leftTime(t - 1000)}, 1000);}else{$("#ShowSpec").removeAttr("id");$("#p2").css("display", "none");$("#p3").text("活动已结束");$("#iosDialog1").removeAttr("onclick");$("#shareInfo").css("background", "grey").removeAttr("onclick");}}//将0-9的数字前面加上0，例1变为01 function checkTime(i){if(i < 10){ i = "0" + i; } return i; }//格式化时间function formatTime (time){var format = "yyyy-MM-dd HH:mm:ss";var t = new Date(time);var tf = function(i){return (i < 10 ? '0' : '') + i};return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){switch(a){case 'yyyy':return tf(t.getFullYear());break;case 'MM':return tf(t.getMonth() + 1);break;case 'mm':return tf(t.getMinutes());break;case 'dd':return tf(t.getDate());break;case 'HH':return tf(t.getHours());break;case 'ss':return tf(t.getSeconds());break;}})}</script></head><body><div>        <p id="p2">剩余        <span class="time" id="d" style="display: none;"></span>        <span id="dd" style="display: none;"></span>        <span class="time" id="h"></span><span id="hh"></span>        <span class="time" id="m"></span><span id="mm"></span>        <span class="time" id="s"></span>秒自动结束        </p>    </div></body></html>
阅读全文
0 0