简单的JavaScript项目

JavaScript+HTML——动态数字时钟



本代码非常适合学习 js 的新手炫酷又美观

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>		
	</script>
	</body>
</html>


JavaScript:

*** setInterval() ***方法的定义和用法:
此方法可以按照指定的周期执行来执行一段程序,周期是以毫秒为单位的。

    // 获取系统时间 在进行赋值
<script type="text/javascript">
		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);
	</script>


CSS:

倒映:可以把数字钟显示的更佳的美观

-webkit-box-reflect: below 1px linear-gradient(transparent,#0004);
display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的;
display: flex; :弹性布局

flex布局以后,子元素的float、clear和vertical-align属性将失效

@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;
}

代码效果图

简单的JavaScript项目_第1张图片

本代码有借鉴B站视频的代码如有异议可联系作者

你可能感兴趣的:(HTML,初学者,JavaScript,javascript,css,html5,css3,html)