Javascript实现电子时钟走动

最新推荐文章于 2023-12-09 11:08:42 发布
最新推荐文章于 2023-12-09 11:08:42 发布
阅读量2.2k 收藏 17
点赞数 3
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H_W_1212/article/details/110477186
版权
本文介绍如何使用JavaScript创建一个实时更新的电子时钟。通过解析提供的CSS样式、JavaScript脚本和HTML页面，读者可以了解实现动态时钟的原理和步骤。同时，提供了图片素材的下载链接以供参考。
摘要由CSDN通过智能技术生成

关注重工黑大帅，学习不迷路

先看效果图：
在这里插入图片描述
style.css:

/* CSS Document */
*{
   
	margin: 0;
	padding: 0;
}
ul,li,ol{
   
	list-style: none;
}
body{
   
	font-family: Arial,"Microsoft YaHei","SimSun";
}
.clears{
   
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
}
a{
   
	text-decoration: none;
}
.ele_clock{
   
	text-align: center;
	margin-left:auto;
	margin-right:auto;
    margin-top:200px ;
	border: 5px solid aqua;
	border-radius: 50px;
	width: 340px;
	height: 100px;
	padding-top: 40px;
	padding-right: 20px;
	animation:Ani 0.5s  infinite  alternate both;
	overflow: hidden;
}
@keyframes Ani{
   
	0%{
   
		opacity: 0;
		transform:   rotateZ(360deg);
	}
	50%{
   
		opacity: 1;
		transform:  rotateZ(0);
	}
	100%{
   
		opacity: 1;
		transform:  rotateZ(0);
	}
}
.dot{
   
		animation:shan 0.5s  infinite  alternate both;
	}
	@keyframes shan{
   
		0%{
   
			 opacity:1;
			}
		100%{
   
			 opacity:0;
			}
最低0.47元/天 解锁文章
bkLion
关注
专栏目录
基于javascript实现动态时钟效果
10-22
在实现动态时钟效果时，JavaScript中的Date对象是必不可少的，它提供了获取和操作日期和时间的方法。 在提供的代码中，首先通过`<script>`标签引入了JavaScript代码。在其中定义了一个`start`函数，该函数的主要...
使用javaScript或jquery实现页面时钟走动效果(包含秒表计时), 和系统时间同步
04-03
使用简单的十行左右代码就可以实现html页面计时效果, 同系统时间同步, 并带有秒表实时走动效果哦,感谢大家的支持
JS实现电子时钟
weixin_33853827的博客
02-29 868
      目前有个小项目，在首页头部导航栏里需要一个电子时钟的效果，于是我就采用如下代码实现了一个电子时钟的效果。不过不完美，第一种方式容易导致网页莫名其妙的异常，后来觉得可能是做的操作太多了，然后又编写了如2所示的代码。代码比较简单，思路也比较简单就不多介绍了，在此做个记录，以备以后的项目中也会使用的到。 1：存在导致网页异常的现象，猜测是做的操作太多了，不过这种方式只要网页加载，就能够保证...
js实现简单的秒表走动的时钟特效
10-23
主要介绍了js实现简单的秒表走动的时钟特效,感兴趣的小伙伴们可以参考一下
将 JavaScript 与 ASP.NET 2.0 配合使用 Z
ASP.NET 2.0
06-15 1385
适用于：ASP.NET 2.0Visual Web Developer 2005 Express Edition摘要：学习如何将 JavaScript 与 ASP.NET 2.0 应用程序配合使用。本页内容 简介
JS实现电子时钟效果
热门推荐
这是一条不归路
08-15 1万+
html/css+js实现电子时钟效果
js+css3实现扁平化时钟走动动画效果
09-13
在本文中，我们将深入探讨如何使用JavaScript（JS）和CSS3技术来实现一个扁平化的时钟走动动画效果。这种效果通常用于增强网站的用户体验，提供实时的时间信息，并且可以作为网页设计中的一个视觉焦点。 首先，让...
CSS3实现指针时钟走动特效特效代码
03-20
总结，这个“CSS3实现指针时钟走动特效”项目展示了CSS3的`transform`和`transition`属性如何与JavaScript协同工作，实现动态的网页元素。通过这样的实践，开发者可以提升对CSS3动画的理解，并且能够创建更多吸引...
CSS3实现指针时钟走动特效.zip
11-17
在本项目中，"CSS3实现指针时钟走动特效.zip"是一个包含前端技术的实践案例，主要涉及CSS3、JavaScript、jQuery以及HTML5。这个压缩包文件提供了一个使用纯CSS3和JavaScript来创建一个动态模拟时钟的示例。下面我们...
纯js实现电子时钟特效
12-11
这是一款使用纯js实现电子时钟特效。该电子时钟可以显示时间，星期几，以及是上午还是下午。它使用简单，非常容易集成到项目中。
js写的电子时钟。。。。
09-16
菜鸟，请多关照！ 。。。。。。。。。。。。。。。。。。。。。 。。。。。。。。。。。。。
用JS实现的时钟和倒计时程序
07-01
使用javascript代码写的一个时钟和倒计时程序
《如何使用js实现电子时钟功能》三个效果完整代码
03-28
本文件属于文章《如何使用js实现电子时钟功能》的完整代码，在读完原创文章之后可以下载查看代码。代码中包括基本，图片和滚动动画的三种时钟效果，html、css、js代码都在同一个文件中。也可以供有需要的朋友在开发中直接使用。
javascript用js简单的实现电子时钟
qq_43502384的博客
08-06 3965
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> <!--给div一个简单样式--> &lt...
js电子时钟
weixin_45934659的博客
05-14 331
今天给大家看一下一个电子时钟，代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery电子时钟-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> body { ba
JS电子时钟
flame的博客
06-09 6549
开发工具与关键技术：VS2015，Javascript 撰写时间：2019年6月1日 用JS来写个简单的电子时钟 思路： 先获取计算机的当前时间，然后通过计时器不断的获取当前时间，从而达到电子时钟的效果 样式必不可少的，先把电子时钟的样式设计好 样式： <div class="row"> <div class="col mt-5"> ...
JavaScript完成电子时钟
最新发布
qiuqiule6的博客
12-09 1586
在该段代码中首先使用了JavaScript中的Date对象获取当前时间的时分秒具体数值，为确保每次均显示成两位数的效果，分别判断当前时分秒是否小于10，如果比10小则在前面加一个数字0，然后将修改后的数值使用innerHTML属性显示到对应的时间显示框中。由图1-3可见，时钟显示的内容动态变化的功能已实现，图(a)和图(b)已经把电子时钟的样式动态变化展示出来了。至此，电子时钟的制作已经全部完成。该段代码为3个显示框定义了相同的类名称box1，以便在css样式表中可以使用类选择器为其设置统一样式。
js编写程序电子时钟自动走动
06-07
可以使用JavaScript的Date对象来实现电子时钟的自动走动。首先创建一个HTML页面，用于显示当前时间，然后使用JavaScript编写一个函数，该函数每秒钟更新一次时间，从而实现电子时钟的自动走动。以下是一个示例代码： HTML部分： ``` <!DOCTYPE html> <html> <head> <title>电子时钟</title> </head> <body onload="startTime()"> <h1 id="clock"></h1> <script src="clock.js"></script> </body> </html> ``` JavaScript部分： ``` function startTime() { var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); m = checkTime(m); s = checkTime(s); document.getElementById('clock').innerHTML = h + ":" + m + ":" + s; var t = setTimeout(startTime, 1000); } function checkTime(i) { if (i < 10) {i = "0" + i}; // 在数字前面补零 return i; } ``` 在以上示例代码中，`startTime`函数用于获取当前时间，并将其显示在HTML页面上。`checkTime`函数用于在数字前面补零，以保证时钟显示的格式一致。最后，使用`setTimeout`函数每秒钟调用一次`startTime`函数，从而实现电子时钟的自动走动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值