JavaScript实现动态时钟显示

已于 2022-11-12 21:23:17 修改
阅读量4.6k 收藏 40
点赞数 6
分类专栏： 前端 文章标签： javascript html css 前端 开发语言
于 2022-11-11 12:11:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57051895/article/details/127803400
版权

目录

动态时钟显示效果

 代码实现

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

2.设置html标签

3.设置html标签的CSS样式

4.设置JavaScript

1)创建函数和Date

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 */
				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>
    <script>
		function dateTime(){
            //获取时间保存到date变量
			var date = new Date();
        }
    </script>
</html>

2）获取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 */
				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>
    <script>
		function dateTime(){
            //获取时间保存到date变量
			var date = new Date();
			console.log(date);
			//获取date中的年、月、日
			var dates = date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日';
        }
    </script>
</html>

3）获取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 */
				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>
    <script>
		function dateTime(){
            //获取时间保存到date变量
			var date = new Date();
			console.log(date);
			//获取date中的年、月、日
			var dates = date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日';

			//将星期日~星期一保存到数组
			var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
			//获取date中的小时，如果小于9，则在前面拼接一个0
			var hours = date.getHours()>9?date.getHours():'0'+date.getHours();
			//获取date中的分钟，如果小于9，则在前面拼接一个0
			var minutes = date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes();
			//获取date中的秒，如果小于9，则在前面拼接一个0
			var seconds = date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds();
			
			//拼接时分秒和星期
			var times = hours+'：'+minutes+'：'+seconds+' '+week[date.getDay()];
        }
    </script>
</html>

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

<!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>
    <script>
		function dateTime(){
            //获取时间保存到date变量
			var date = new Date();
			console.log(date);
			//获取date中的年、月、日
			var dates = date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日';

			//将星期日~星期一保存到数组
			var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
			//获取date中的小时，如果小于9，则在前面拼接一个0
			var hours = date.getHours()>9?date.getHours():'0'+date.getHours();
			//获取date中的分钟，如果小于9，则在前面拼接一个0
			var minutes = date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes();
			//获取date中的秒，如果小于9，则在前面拼接一个0
			var seconds = date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds();
			
			//拼接时分秒和星期
			var times = hours+'：'+minutes+'：'+seconds+' '+week[date.getDay()];

            //获取firstDiv节点
			var firstDivEle = document.querySelector('.firstDiv');
			//获取lastDiv节点
			var lastDivEle = document.querySelector('.lastDiv');
			

			//向.firstDiv节点添加dates(年、月、日)
			firstDivEle.innerText=dates;
			//向.firstDiv节点添加timess(年、月、日)
			lastDivEle.innerText=times;
        }
    </script>
</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态时钟显示</title>
        <style>
			.div{
				/* 宽度400 */
				width: 400px;
				/*高度400  */
				height: 400px;
				/* 设置背景色 */
				background-color: #ccc;
				/* 设置边框圆角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>
	<script>
		function dateTime(){
            //获取时间保存到date变量
			var date = new Date();
			
			//获取date中的年、月、日
			var dates = date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日';

			//将星期日~星期一保存到数组
			var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
			//获取date中的小时，如果小于9，则在前面拼接一个0
			var hours = date.getHours()>9?date.getHours():'0'+date.getHours();
			//获取date中的分钟，如果小于9，则在前面拼接一个0
			var minutes = date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes();
			//获取date中的秒，如果小于9，则在前面拼接一个0
			var seconds = date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds();
			
			//拼接时分秒和星期
			var times = hours+'：'+minutes+'：'+seconds+' '+week[date.getDay()];

			//获取firstDiv节点
			var firstDivEle = document.querySelector('.firstDiv');
			//获取lastDiv节点
			var lastDivEle = document.querySelector('.lastDiv');
			
			//向.firstDiv节点添加dates(年、月、日)
			firstDivEle.innerText=dates;
			//向.lastDiv节点添加timess(时、分、秒、星期)
			lastDivEle.innerText=times;

        }
            //调用函数，执行一次
	    	dateTime();
		    //调用setInterval函数，实现始终计时，
		    setInterval(dateTime,1000);
    </script>
</html>
luckyboy!
关注
  • 6
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
通过JS实现页面动态显示时间
m0_72687687的博客
08-11 1266
【代码】通过JS实现页面动态显示时间。
JavaScript动态时钟两种方法的简单实现
与其终的知识小窝
11-07 1733
JS动态时钟 第一种方法： 优点：代码量少 缺点：需要一定基础才能理解，不过好在我很贴心的写了很多注释啦 效果图： 实现代码块: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>与其终——动态时钟</title> <script ty...
利用JS在网页上动态的显示当前的时间
weixin_75141231的博客
06-03 3239
【代码】利用JS在网页上动态的显示当前的时间。
JavaScript练手小技巧：数字反转时钟
九天翔龙的技术博客
03-17 530
既然可以实现翻转数字了，肯定就可以跟 JS 相结合去完成一些数字展示效果。比如，数字反转时钟。
JavaScript——制作一个页面电子时钟，2024年最新面试过程视频教程
最新发布
m0_60732644的博客
04-10 413
代码：
js动态时间
大坤
01-14 216
<html> <head> <title>网页中动态的显示系统日期时间</title> <script language="JavaScript"> function startTime() { var today=new Date();//定义日期对象 var yyyy = today...
js实现时钟转动
Zhang_wang_yun的博客
04-17 1037
声明一个`间歇函数`来让时钟每秒自动转动，在里面声明三个`变量`来定义` transform: rotate();`，规定三个钟针旋转多少度。
基于javascript实现动态时钟效果
10-22
主要为大家详细介绍了基于javascript实现动态时钟效果的相关资料，动态显示系统当前时间，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Javascript实现动态时钟效果
10-17
在这个示例中，我们将探讨如何使用JavaScript实现一个动态时钟效果。 首先，我们看到一个CSS部分，用于设置时钟的样式。这段代码创建了一个id为"box"的元素，设置其为圆形，背景色为粉色，且有阴影效果。`width`和`...
JavaScript编写开发动态时钟
11-20
本文实例为大家分享了JavaScript编写开发动态时钟的具体代码，供大家参考，具体内容如下 效果图： 实质上就是调用时间库，再添加一个颜色数组，给显示的时间嵌套一个div盒子，再将颜色数组的颜色设置随机变化，...
javascript实现动态时钟
07-14
在JavaScript编程中，动态时钟是一种常见的练习，用于学习时间的获取、处理和显示。这个项目的核心在于利用JavaScript的Date对象来实时获取当前时间，并通过CSS3来展示一个具有动态效果的时钟界面。 首先，...
原生js实现动态指针时钟效果
09-25
原生js实现动态指针时钟效果,简单又直接的效果，css3+js实现
JS动态时钟
06-29
这里是简单的动态时钟，利用CSS和js的完美结合，适合初学JS 的学生
JS动态显示当前时间
09-02
JS动态显示当前时间 动态的显示当前系统时间 非常好用
javascript实现页面的实时时钟显示示例
11-19
时钟实现 实现这个时钟时间需要解决以下三个问题： 获得当前时间，并格式化 如何可以在页面中显示时间 让时间动起来 1、获得当前时间，并格式化 要获得当前时间，可以使用JavaSctipt的Date对象，默认构造函数会返回当前时间。存储日期为自 1970 年 1 月 1 日 00:00:00以来的毫秒数。 setXxx 这些方法用于设置时间和日期值 getXxx 这些方法用于获取时间和日期值 实现代码如下：   function getnow(){ //1、获得当前时间，格式化时间 var now=new Date(); var year=no
javascript实现动态时钟的启动和停止
10-16
总结来说，JavaScript实现动态时钟启动和停止的关键在于`setInterval`和`clearInterval`这两个函数。`setInterval`用于定期执行某个函数，而`clearInterval`则用于取消定时器，停止函数的执行。通过结合HTML和...
原生JS的Canvas写一个实时的时钟效果(含源码)
izl040905的博客
11-16 443
相信学了HTML5新增的Canvas的小伙伴都非常感叹其功能之强大，可以帮助我们做许多关于画布的绘画以及对图形的操作，那么今天就带大家实现一个简单实时的时钟效果，含有源码和注释。
纯JS制作一个网页时钟特效
Byte_Dance的博客
01-05 5185
  主要逻辑 根据JS 的Date属性 求得当前的 时 分 秒 之后,按照 360/(时|分|秒)  来对三个指针元素进行旋转 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title
js动态显示实时时间
热门推荐
赵阳的博客
04-08 2万+
利用js动态显示实时时间<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv
用js写一个时钟显示
05-25
可以使用 JavaScript 来实现一个简单的时钟显示。以下是一个基本的示例： HTML 代码： ```html <!DOCTYPE html> <html> <head> <title>时钟</title> </head> <body> <h1 id="clock"></h1> <script src="clock.js"></script> </body> </html> ``` JavaScript 代码： ```javascript function updateClock() { var now = new Date(); var h = now.getHours(); var m = now.getMinutes(); var s = now.getSeconds(); var time = h + ':' + zeroPad(m) + ':' + zeroPad(s); document.getElementById('clock').textContent = time; } function zeroPad(num) { return (num < 10 ? '0' : '') + num; } setInterval(updateClock, 1000); ``` 这段代码定义了两个函数 `updateClock()` 和 `zeroPad()`，并使用 `setInterval()` 函数每秒钟调用一次 `updateClock()` 函数来更新时钟。`updateClock()` 函数获取当前时间，并将小时、分钟和秒钟拼接成一个字符串，然后将其设置为 `<h1>` 元素的文本内容。 `zeroPad()` 函数接收一个数字，并返回一个两位数的字符串。如果数字小于 10，则在前面添加一个 0。 你可以将这些代码保存到两个文件中：一个是 HTML 文件，另一个是 JavaScript 文件。在 HTML 文件中添加一个 `<h1>` 元素用于显示时间，并在 JavaScript 文件中编写代码来更新它。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值