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

最新推荐文章于 2022-08-09 19:28:44 发布

戴璟昊

最新推荐文章于 2022-08-09 19:28:44 发布

阅读量5.3k

点赞数 1

分类专栏： JavaScript 微信公众号文章标签：工作需求微信公众号

本文链接：https://blog.csdn.net/dairongliang123/article/details/78354867

版权

JavaScript 同时被 2 个专栏收录

8 篇文章 1 订阅

订阅专栏

微信公众号

4 篇文章 0 订阅

订阅专栏

效果图：

页面代码：

<%@ 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>