javascript实现动态时钟

最新推荐文章于 2023-11-16 10:35:40 发布
最新推荐文章于 2023-11-16 10:35:40 发布
阅读量790 收藏 1
点赞数
分类专栏： Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zizhuo_xiaoyu/article/details/9720163
版权 
<script language="javascript">
function disptime(){
	var today = new Date();
	
	var year = today.getYear();
	var month = today.getMonth();
	var date = today.getDate();

	var hh = today.getHours();
	var mm = today.getMinutes();
	var ss = today.getSeconds();
	
	/*设置div的内容为当前时间*/				
	document.getElementById("myclock").innerHTML ="<h1>现在是： "+year+"年"+month+"月"+date+"日"+hh+":"+mm+":" +ss+ "</h1>";
	
}	

	setInterval("disptime()",1000);
</script>

<body>
	<div id="myclock">
	</div>
</body>

dongzaiqq
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于javascript实现动态时钟效果
10-22
在实现动态时钟效果时，JavaScript中的Date对象是必不可少的，它提供了获取和操作日期和时间的方法。 在提供的代码中，首先通过`<script>`标签引入了JavaScript代码。在其中定义了一个`start`函数，该函数的主要...
JavaScript实现动态时钟显示
luckyboy!的博客
11-11 4692
1.创建html文件（时钟显示.html）；2.设置html标签；3.设置html标签的CSS样式；4.设置JavaScript；1)创建函数和Date；2）获取date变量中的年、月、日，拼接成日期；3）获取date变量中的小时、分钟、秒和日期，拼接成时间；4）获取节点并向节点中添加日期和时间；5）调用自定义函数dateTime和setInterval函数，实现动态时钟显示效果
JavaScript 制作实时电子时钟 ，点赞加关注经典案例持续更新~
最新发布
小十七的个人分享博客
11-16 2451
效果动图，此动图时间仅为当时录制的时间，实际运行时间为实时时间。
JavaScript——在页面上实现一个显示当前时间的动态时钟
weixin_67658096的博客
09-24 2028
js 动态时钟
使用Javascript(js)技术实现动态时钟效果—北大青鸟
kkkliao1的博客
06-09 2766
使用Javascript(js)技术实现动态时钟效果—北大青鸟
javascript之动态时钟
m7k7k999的博客
11-24 377
javascript之动态时钟,定时器,时间对象
Javascript实现动态时钟效果
12-03
在本文中，我们将探讨如何使用JavaScript实现一个动态时钟的效果，这涉及到DOM操作、时间戳处理以及定时器的概念。 首先，CSS部分用于设置时钟的样式。`#box` 是一个CSS选择器，它指向具有ID为"box"的HTML元素。在...
JavaScript动态时钟两种方法的简单实现
与其终的知识小窝
11-07 1746
JS动态时钟 第一种方法： 优点：代码量少 缺点：需要一定基础才能理解，不过好在我很贴心的写了很多注释啦 效果图： 实现代码块: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>与其终——动态时钟</title> <script ty...
用JavaScript的setInterval（）实现动态时钟效果
小灰狼与大白兔的博客
01-25 7893
setInterval（）可按照指定的周期（以毫秒计）来调用函数或计算表达式， 语法格式： setInterval("调用的函数名称"，周期性调用函数之间间隔的毫秒数) setInterval()会不停调用函数，直到窗口被关闭或被其他方法强制停止 示例： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8...
通过JavaScript实现一个动态时钟
07-31
NULL 博文链接：https://liangq.iteye.com/blog/1053918
原生js实现动态指针时钟效果
09-25
原生js实现动态指针时钟效果,简单又直接的效果，css3+js实现
JavaScript动态时钟.zip
05-14
使用JavaScript获取系统当前时间，编写图形化动态时间，有两种不同的哦！
javascript 控制 html元素 显示/隐藏实现代码
10-29
javascript 控制 html元素 显示/隐藏，下面是一些逐步的实现原理。
html模拟时钟
09-23
原始资源地址（如有侵权，请联系删除）： https://download.csdn.net/download/leftmemory/6465749 在原有基础上修复Bugs: 1. 12~1点，指针乱跳 2. 此后每到*:59:00~*:00:00（每个小时的59~00分钟），指针都会乱跳 第三方js库raphael网址： http://dmitrybaranovskiy.github.io/raphael/
JS-动态时钟
gezongbo的博客
03-16 1786
动态时钟 <!DOCTYPE html> <html lang="en"> <head> <title>动态时钟</title> <script> //显示时间的函数 function showTime(){ //创建当前系统时间 var now=new Date(); var nowStr=now.toLocaleString(); //alert(nowStr) //将获得的时间显示
JavaScript实现页面动态时钟模型
吉帅振博客
06-29 2492
写在前面：实现动态时钟效果可以使用setTimeout()或setInterval()函数。setTimeout(showTime,1000);//在指定的时间(1秒)后,执行showTimesetInterval(showTime,1000);//在指定的时间(1秒)后,调用showTime函数主要代码：//显示时间 定义一个函数(功能) function showTime(){ var ...
js实现动态时钟
sophie1314的博客
03-31 8071
展示一个动态时钟，需要获得年-月-日，时：分：秒，分别都有对应的方法来获取，如下代码中就可以看到； 其中需要注意的是： （1）getDate（）和getDay（）： getDate（）：返回一月中的某一天（1-31） getDay（）：返回一周中的星期几（0-6）（0代表星期天） （2）document.getElementById...
关于Javascript中页面动态钟表的简单实现
weixin_30814319的博客
12-12 770
1、问题并不繁琐，在于HTML中 DOM（文档对象模型）方法的掌握，我的钟表实现重点用到了三个函数和一个事件 A）setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval()...
用javascript实现动态时钟
04-07
以下是JavaScript实现动态时钟的代码： HTML： ```html <!DOCTYPE html> <html> <head> <title>动态时钟</title> <style> body { background-color: #f1f1f1; } .clock { margin: 50px auto; width: 200px; height: 200px; border-radius: 50%; background-color: white; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); position: relative; } .hour-hand { position: absolute; top: 50%; left: 50%; width: 6px; height: 50px; background-color: black; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); animation: hourAnim 43200s linear infinite; } .minute-hand { position: absolute; top: 50%; left: 50%; width: 4px; height: 80px; background-color: black; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); animation: minuteAnim 3600s linear infinite; } .second-hand { position: absolute; top: 50%; left: 50%; width: 2px; height: 100px; background-color: red; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); animation: secondAnim 60s linear infinite; } @keyframes hourAnim { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } } @keyframes minuteAnim { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } } @keyframes secondAnim { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } } .clock-center { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background-color: black; border-radius: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <div class="clock"> <div class="hour-hand"></div> <div class="minute-hand"></div> <div class="second-hand"></div> <div class="clock-center"></div> </div> <script src="clock.js"></script> </body> </html> ``` JavaScript： ```javascript function updateClock() { const now = new Date(); const hour = now.getHours(); const minute = now.getMinutes(); const second = now.getSeconds(); const hourDegree = (hour % 12) * 30 + (minute / 60) * 30; const minuteDegree = minute * 6; const secondDegree = second * 6; document.querySelector(".hour-hand").style.transform = `translateX(-50%) rotate(${hourDegree}deg)`; document.querySelector(".minute-hand").style.transform = `translateX(-50%) rotate(${minuteDegree}deg)`; document.querySelector(".second-hand").style.transform = `translateX(-50%) rotate(${secondDegree}deg)`; } setInterval(updateClock, 1000); ``` 这个代码通过 `setInterval` 方法每秒更新一次时钟， `updateClock` 函数获取当前时间并计算出每个指针应该旋转的角度，然后通过设置 `transform` 属性来旋转指针。其中，时针每小时旋转30度，分针每分钟旋转6度，秒针每秒钟旋转6度。 在HTML文件中，我们定义了一个时钟的容器 `.clock`，并在其中添加了时针、分针、秒针和中心点。每个指针都有自己的类名和CSS样式，也有自己的动画效果。其中，时针的动画总时长为43200秒（12小时），分针的动画总时长为3600秒（1小时），秒针的动画总时长为60秒（1分钟）。这样可以让指针在一定的时间内完成一圈的旋转。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值