数字时钟

最新推荐文章于 2024-08-18 22:21:01 发布

cxz999555888

最新推荐文章于 2024-08-18 22:21:01 发布

阅读量73

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/cxzqqq/article/details/133817481

版权

显早制作----数字时钟

数字时钟HTML

html>
	<head>
		<meta charset="utf-8">
		<title>数字时钟</title>
	</head>
	<link rel="stylesheet" href="style.css" />
	<body>
	<div id="clock">
	<!-- //标题 -->
	<h2>the time is now</h2>
		
		<div id="time">
		<!-- //小时 -->
			<div><span id="hour">00</span><span>Hours</span></div>
		<!-- //分钟	 -->
			<div><span id="minutes">00</span><span>Minutes</span></div>
		<!-- //秒 -->
			<div><span id="seconds">00</span><span>Seconds</span></div>
		</div>
	</div>		
	</body>
</html>

数字时钟CSS

@charset "utf-8";
/* CSS Document */
{
     margin: 0;
	 padding: 0;
	 box-sizing: border-box;
	 font-family: 'Open Sans',sans-serif;
}
body
{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #060a1f;
}
#clock h2
{
	position: relative;
	display: block;
	color: #fff;
	text-align: center;
	margin: 10px 0;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4em;
	font-size: 0.7em;
}
#clock #time
{
	display: flex;
}
#clock #time div
{
	position: relative;
	margin: 0 5px;
	-webkit-box-reflect: below 1px linear-gradient(
	transparent,#0004);
}
#clock #time div span
{
	position: relative;
	display: block;
	width: 100px;
	height: 80px;
	background: #2196f3;
	color: #fff;
	font-weight: 300;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3em;
	z-index: 10;
	box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}
#clock #time div span:nth-child(2)
{
	height: 30px;
	font-size: 0.7em;
	letter-spacing: 0.2em;
	font-weight: 500;
	z-index: 9;
	box-shadow: none;
	background:  #127fd6;
	text-transform: uppercase;
}
#clock #time div:last-child span
{
	background: #ff006a;
}
#clock #time div:last-child span:nth-child(2)
{
	background: #ec0062;
}

数字时钟JS

    // 获取系统时间 在进行赋值

		function clock()
		{
			var hours = document.getElementById('hour');
			var minutes = document.getElementById('minutes');
			var seconds = document.getElementById('seconds');
		
		     var h = new Date().getHours();//小时
			 var m = new Date().getMinutes();//分钟
			 var s = new Date().getSeconds();//秒
			 
			 hours.innerHTML = h;
			 minutes.innerHTML = m;
			 seconds.innerHTML = s;
		}
		var  interval = setInterval(clock,1000);