商城倒數計時

Bright2017發表於2018-12-04

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>商城倒數計時</title>
		<style type="text/css">
			.demo{width: 100%;text-align: center;}
			.demo>div{display: inline-block;}
		</style>
	</head>
	<body>
		<div class="demo">
			<div>還剩</div>
			<div class="demo-one">22</div>
			<div>小時</div>
			<div class="demo-two">42</div>
			<div>分鐘</div>
			<div class="demo-three">36</div>
			<div>秒結束</div>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var Time=1232556465;
				var aa = setInterval(bb, 1000);
				function bb() {
					if (Time <= 0) {
						console.log("倒數計時結束");
						clearInterval(aa);
						$(".demo-one").text("0");
						$(".demo-two").text("0");
						$(".demo-three").text("0");
					}else{
						formatSeconds(Time);
					}
					Time--;
				}
				function formatSeconds(value) {
					var secondTime = parseInt(value);// 秒
					var minuteTime = 0;// 分
					var hourTime = 0;// 小時
					if(secondTime > 60) {
						//如果秒數大於60，將秒數轉換成整數
						//獲取分鐘，除以60取整數，得到整數分鐘
						minuteTime = parseInt(secondTime / 60);
						//獲取秒數，秒數取佘，得到整數秒數
						secondTime = parseInt(secondTime % 60);
						//如果分鐘大於60，將分鐘轉換成小時
						if(minuteTime > 60) {
							//獲取小時，獲取分鐘除以60，得到整數小時
							hourTime = parseInt(minuteTime / 60);
							//獲取小時後取佘的分，獲取分鐘除以60取佘的分
							minuteTime = parseInt(minuteTime % 60);
						}
					}
					var result = "" + parseInt(secondTime) + "秒";
		 
					if(minuteTime > 0) {
						result = "" + parseInt(minuteTime) + "分" + result;
					}
					if(hourTime > 0) {
						result = "" + parseInt(hourTime) + "小時" + result;
					}
					$(".demo-one").text(parseInt(hourTime));
					$(".demo-two").text(parseInt(minuteTime));
					$(".demo-three").text(parseInt(secondTime));
				}
			});
		</script>
	</body>
</html>

 

相關文章