秒殺----js前端時間顯示 毫秒級別

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>毫秒定時器</title>
</head>
<body>
	<div class="time-item" style="text-align: center;margin-top: 10%; font-size: 30px;">
		<span id="day_show">0天</span>
		<strong id="hour_show">0時</strong>
		<strong id="minute_show">0分</strong>
		<strong id="second_show">0秒</strong>
		<strong id="ms_show" style="color: red;">0毫秒</strong>
	</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
	function timer() {

		var iCount = setInterval(function() {
			var myDate = new Date();
			var beginDate = (new Date("2019/07/06 12:00:00")).getTime(); //得到毫秒
			var nowDate	= myDate.getTime()
			// var between = nowDate-beginDate   // 順時增加
			var between = beginDate-nowDate  // 倒計時
			var s = parseInt(between/1000)
			
			if (s > 0) {
				var day = Math.floor(s/3600/24)
				var hours = Math.floor(s/3600) - (day*24)
				var min = Math.floor(s/60) - (day*24*60) - (hours*60)
				var second = Math.floor(s) - (day*24*3600) - (hours*3600) - (min*60)
				var ms = Math.floor(between) - (day*24*3600*1000) - (hours*3600*1000) - (min*60*1000) - (second*1000)

				$('#day_show').html(day + "天");
		        $('#hour_show').html('<s id="h"></s>' + hours + '時');
		        $('#minute_show').html('<s></s>' + min + '分');
		        $('#second_show').html('<s></s>' + second + '秒');
		        $('#ms_show').html('<s></s>' + ms + '毫秒');
			}else{

				$('#day_show').html(0 + "天");
		        $('#hour_show').html('<s id="h"></s>' + 0 + '時');
		        $('#minute_show').html('<s></s>' + 0 + '分');
		        $('#second_show').html('<s></s>' + 0 + '秒');
		        $('#ms_show').html('<s></s>' + 0 + '毫秒');
		        // setTimeout("stop()", 10);
		        clearInterval(iCount)					// 清除定時器 附帶句柄條件
			}

		}, 10)

	}

	$(function() {
		timer()
	})
</script>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章