简单的JavaScript项目

最新推荐文章于 2024-06-05 10:27:28 发布

if－else

最新推荐文章于 2024-06-05 10:27:28 发布

阅读量3.6k

点赞数 17

分类专栏： HTML 初学者 JavaScript 文章标签： javascript css html5 css3 html

本文链接：https://blog.csdn.net/wjfckx/article/details/109017063

版权

HTML 同时被 3 个专栏收录

6 篇文章 3 订阅

订阅专栏

初学者

6 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

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

代码效果图

在这里插入图片描述

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

if－else

关注

17
点赞
踩
76

收藏

觉得还不错? 一键收藏
5
评论
简单的JavaScript项目

JavaScript+HTML——动态数字时钟本代码非常适合学习 js 的新手炫酷又美观HTML部分：<html> <head> <meta charset="utf-8"> <title>数字时钟</title> </head> <link rel="stylesheet" href="style.css" /> <body> <div id="clock"> //标题
复制链接

扫一扫

专栏目录