时间倒计时、获取当前时间 JavaScript

最新推荐文章于 2024-07-05 16:41:23 发布

xiaobatest

最新推荐文章于 2024-07-05 16:41:23 发布

阅读量480

点赞数 1

本文链接：https://blog.csdn.net/weixin_42286603/article/details/103538235

版权

获取当前时间和倒计时
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时间倒计时</title>
		<style>
			#tou{
				
				 width: 500px;
				 height: 60px; 
				margin: 50px auto;
				border: 10px solid burlywood;
				padding: 20px 20px;
				background: yellowgreen;
			}
		.t1{
			/* float: left; */
			/* margin: 0 10px; */
			/* border: 2px solid red; */
		}
		.t2{
			/* border: 2px solid rosybrown; */
			
			/* float: left; */
		}	
		</style>
	</head>
	<body>
		<div id="tou">
			<div class="t1">
				<script>
				var time = new Date();
				a = time.getFullYear();
				b = time.getMonth();
				c = time.getDate();
				d = time.getHours();
				e = time.getMinutes();
				f = time.getSeconds();
				document.write("当前时间为： "+a+"年"+b+"月"+c+"日"+d+"时"+e+"分"+f+"秒");
			</script>
			</div>
			<br />
			<div class="t2">
		<form id="form1" runat="server">
			<div id="show">
			</div>
		
			<script type="text/javascript">
				/*
			时间倒计时插件
			TimeDown.js
			*/
				function TimeDown(id, endDateStr) {
					//结束时间
					var endDate = new Date(endDateStr);
					//当前时间
					var nowDate = new Date();
					//相差的总秒数
					var totalSeconds = parseInt((endDate - nowDate) / 1000);
					//天数
					var days = Math.floor(totalSeconds / (60 * 60 * 24));
					//取模（余数）
					var modulo = totalSeconds % (60 * 60 * 24);
					//小时数
					var hours = Math.floor(modulo / (60 * 60));
					modulo = modulo % (60 * 60);
					//分钟
					var minutes = Math.floor(modulo / 60);
					//秒
					var seconds = modulo % 60;
					//输出到页面
					document.getElementById(id).innerHTML = "距离放假还剩 : " + days + " 天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
					//延迟一秒执行自己
					setTimeout(function() {
						TimeDown(id, endDateStr);
					}, 1000)
				}
		
				TimeDown("show", "2022-1-4 10:05:00");
			</script>
		</form>
		</div>
		</div>
		
	</body>
</html>

xiaobatest

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
时间倒计时、获取当前时间 JavaScript

获取当前时间和倒计时<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>时间倒计时</title> <style> #tou{ width: 500px; height: 60px; ...
复制链接

扫一扫