JavaScript实现动态时钟显示

luckyboy!

已于 2022-11-12 21:23:17 修改

阅读量4.8k

点赞数 6

分类专栏：前端文章标签： javascript html css 前端开发语言

于 2022-11-11 12:11:17 首次发布

本文链接：https://blog.youkuaiyun.com/m0_57051895/article/details/127803400

版权

动态时钟显示效果

代码实现

1.创建html文件（时钟显示.html）

2）获取date变量中的年、月、日，拼接成日期

3）获取date变量中的小时、分钟、秒和日期，拼接成时间

4）获取节点并向节点中添加日期和时间

5）调用自定义函数dateTime和setInterval函数，实现动态时钟显示效果

动态时钟显示效果

代码实现

1.创建html文件（时钟显示.html）

2.设置html标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态时钟显示</title>
	</head>
	<body>
		<div class="div">
			<div class="firstDiv"></div>
			<div class="lastDiv"></div>
		</div>
	</body>
</html>

3.设置html标签的CSS样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态时钟显示</title>
        <style>
			.div{
				/* 宽度400 */
				width: 400px;
				/*高度400  */
				height: 400px;
				/* 设置背景色 */
				background-color: cornflowerblue;
				/* 设置边框圆角200 */
				border-radius: 200px;
				/* 设置字体粗细700 */
				font-weight: 700;
				/* 设置文本颜色白色 */
				color: white;
				/* 设置外边距：上下100px，左右剧中  */
				margin: 100px auto;
			}
			.firstDiv{
				/* 设置宽度300 */
				width: 300px;
				/* 设置高度100 */
				height: 100px;
				/* 设置行高100 */
				line-height: 100px;
				/* 设置内容剧中显示 */
				text-align: center;
				/* 设置字体大小30 */
				font-size: 30px;
				/* 设置相对定位 */
				position: relative;
				/* 设置顶端移动100 */
				top: 100px;
				/* 设置左移动50 */
				left: 50px;
			}
			.lastDiv{
				/* 设置宽度300 */
				width: 300px;
				/* 设置高度100 */
				height: 100px;
				/* 设置内容剧中显示 */
				text-align: center;
				/* 设置字体大小30 */
				font-size: 30px;
				/* 设置相对定位 */
				position: relative;
				/* 设置顶端移动100 */
				top: 100px;
				/* 设置左移动50 */
				left: 50px;
			}
		</style>
	</head>
	<body>
		<div class="div">
			<div class="firstDiv"></div>
			<div class="lastDiv"></div>
		</div>
	</body>
</html>

4.设置JavaScript

1)创建函数和Date

Date返回的是中国标准时间：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态时钟显示</title>
        <style>
			.div{
				/* 宽度400 */
				width: 400px;
				/*高度400  */
				height: 400px;
				/* 设置背景色 */
				background-color: cornflowerblue;
				/* 设置边框圆角200 */
				border-radius: 200px;
				/* 设置字体粗细700 */
				font-weight: 700;
				/* 设置文本颜色白色 */
				color: white;
				/* 设置外边距：上下100px，左右剧中  */
				margin: 100px auto;
			}
			.firstDiv{
				/* 设置宽度300 */
				width: 300px;
				/* 设置高度100 */
				height: 100px;
				/* 设置行高100 */
				line-height: 100px;
				/* 设置内容剧中显示 */
				text-align: center;
				/* 设置字体大小30 */
				font-size: 30px;
				/* 设置相对定位 */
				position: relative;
				/* 设置顶端移动100 */
				top: 100px;
				/* 设置左移动50 */
				left: 50px;
			}
			.lastDiv{
				/* 设置宽度300 */
				width: 300px;
				/* 设置高度100 */
				height: 100px;
				/* 设置内容剧中显示 */
				text-align: center;
				/* 设置字体大小30

最低0.47元/天解锁文章