JS实现倒计时效果

最新推荐文章于 2024-04-28 17:03:19 发布

不一于汝

最新推荐文章于 2024-04-28 17:03:19 发布

阅读量477

点赞数

分类专栏：前端 JavaScript

本文链接：https://blog.csdn.net/wo_921110/article/details/76868531

版权

前端同时被 2 个专栏收录

70 篇文章 0 订阅

订阅专栏

JavaScript

37 篇文章 2 订阅

订阅专栏

1. 显示当前系统时间

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
	<title>当前系统时间</title>
	<script type="text/javascript" language="javascript">
		window.οnlοad=function()
		{
			showTime();
		}
		function checkTime(i)
		{
			if(i<10)
			{
				i="0"+i;
			}
			return i;
		}
		function showTime()
		{
			var myDate = new Date();
			var year = myDate.getFullYear();
			var month = myDate.getMonth();
			var date = myDate.getDate();
			var d = myDate.getDay();
			var h = myDate.getHours();
			var m = myDate.getMinutes();
			var s = myDate.getSeconds(); 
			m = checkTime(m);
			s = checkTime(s);
             var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
			document.getElementById('show').innerHTML = year+'年'+month+'月'+date+'日'+' '+weekday[d]+' '+h+':'+m+':'+s;
			setTimeout(showTime,500);
		}

	</script>
</head>
<body>
    <div class="content1">
    	<div id="show">显示时间的位置</div>
    </div>
</body>
</html>

效果截图：

2. 倒计时(精确到某一天)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
	<title>回校倒计时</title>
</head>
<script type="text/javascript" language="javascript">
	window.onload = function()
	{
		var curtime = new Date();
		var endtime = new Date("2017,8,25")
		var lefttime = Math.ceil((endtime.getTime()-curtime.getTime())/(24*60*60*1000));
		// 1 天= 24小时 1小时= 60分 1分=60秒 1秒=1000毫秒
		document.getElementById('timeShow').innerHTML ="回校倒计时："+" "+lefttime+"天";
	}
</script>
<body>
     <div class="content2">
     	<div class="txtshow"><span id="timeShow"></span></div>
     </div>
</body>
</html>

效果截图：

3. 限时抢购

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>限时抢</title>
</head>
<body>
<div class="content3">
	<div class="time">还剩<span id="LeftTime"></span></div>
</div>
<script type="text/javascript" language="javascript">
	window.onload = function()
	{
		showTime();
		function showTime()
		{
			var curtime = new Date();
			var endtime = new Date("2017/8/10,15:30:12")
			var lefttime = parseInt((endtime.getTime()-curtime.getTime())/1000);
			var d = parseInt(lefttime/(24*60*60));
			var h= parseInt(lefttime/(60*60)%24);
			var m = parseInt(lefttime/60%60);
			var s = parseInt(lefttime%60);
			document.getElementById('LeftTime').innerHTML=d+'天'+h+'小时'+m+'分'+s+'秒';
			if (lefttime<=0) 
				{
		           document.getElementById('LeftTime').innerHTML="团购结束！"
				}
			    setTimeout(showTime,500);
			}
		
	}
</script>
</body>
</html>

效果截图：

不一于汝

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS实现倒计时效果

1. 显示当前系统时间当前系统时间 window.onload=function() { showTime(); } function checkTime(i) { if(i<10) { i="0"+i; } return i; } function showTime() { var myDate = n
复制链接

扫一扫