动态时钟的实现

最新推荐文章于 2024-01-15 14:56:27 发布
最新推荐文章于 2024-01-15 14:56:27 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： 前端
原文链接：https://www.mk2048.com/blog/blog.php?id=hjhk0cj02a1j&title=%E5%8A%A8%E6%80%81%E6%97%B6%E9%92%9F%E7%9A%84%E5%AE%9E%E7%8E%B0
版权

下面是动态时钟的效果图（ps:不过好像看不出动态效果来）：

810514-20160225122642333-2001243250.jpg

下面是具体的代码：

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>动态时钟</title>
<script type="text/javascript">
//在网页上输出：今天的日期、星期、现在的时间（动态时钟）
function start()
{
	var today=new Date();
	var year=today.getFullYear();
	var month=today.getMonth()+1;
	var day=today.getDate();
	var hours=today.getHours();
	var minutes=today.getMinutes();
	var seconds=today.getSeconds();
	//如果是单位数字，前面补0
	month=month<10? "0"+month :month;
	day=day<10? "0"+day :day;
	hours=hours<10? "0"+hours :hours;
	minutes=minutes<10? "0"+minutes :minutes;
	seconds=seconds<10? "0"+seconds :seconds;
	//时间信息连成字符串
	var str="今天是"+year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds;
	//获取id=result的内容
	var obj=document.getElementById("result");
	obj.innerHTML=str;
	//延时器
	window.setTimeout("start()",1000);
}
</script>
</head>

<body onload="start()">
<div id="result"></div>
</body>
</html>

 

会做饭的技术男
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Html动态时钟实例
诗雨远方的博客
08-26 1万+
Html动态时钟实例         时间已经成为我们每天必不可少的一个元素，我们是否想过用html来实现一款动态的实时时钟呢？今天我就与大家分享一下html动态时钟的实现过程，项目用Hbuilder构建。 一、代码目录结构如图所示 二、dynamictime.html html动态时钟 body {
js获取当前日期
woderuiggya的博客
03-25 100
let timestamp = Date.parse(new Date()); let date = new Date(timestamp); let Y =date.getFullYear(); let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1); let D = date.getDate() < 10 ? '0' + date.getDate()
基于HBuilder的xml网页钟表
09-30
基于HBuilde平台，用xml编写的网页钟表，有秒针、分针、时针，一款基础的网页钟表显示
旋转的秒针程序,摸拟钟表秒针(C#源代码编写)
12-12
旋转的秒针程序,摸拟钟表秒针(C#源代码编写)
HBuilderX里面实现HYML计时器
12-02
在浏览器页面实现简单的计时器，记录自己刚学代码的过程，想要的自己拿去看看 后面水字数（披绣闼，俯雕甍23，山原旷其盈视，川泽纡其骇瞩24。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳25。云销雨霁，彩彻区明26。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨27，雁阵惊寒，声断衡阳之浦28）
Hbuilder MUI 下拉选择与时间选择器
JoBo的博客
01-26 3788
1、引用 &amp;lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mui.picker.min.css&quot; /&amp;gt; &amp;lt;script type=&quot;text/javascript&quot; src=&quot;../js/mui.picker.min.js&quot;&amp;gt;&amp;lt;/sc
制作手机gif动画
u013265024的专栏
02-18 532
以前看 泡在网上的日子 里面好多demo，而且全是gif动画，感觉特别的好，效果都能呈现出来。 偶尔看到一款gif制作的软件，GifCam，  能够像录视频那样制作gif，觉得特别的好，然后就可以自己做一些发qq表情了， 开始在想怎么弄手机app的动画呢，想到了用豌豆夹，但是效果太差了， 发现电脑上有Genymotion，就是它了，效果相当的好。
js实现动态时钟
11-21
在本文中，我们将探讨如何使用JavaScript实现一个动态时钟。动态时钟是指能够实时显示当前时间（小时、分钟和秒）的时钟。 首先，让我们分析给出的代码片段。这段代码是一个简单的HTML文件，包含JavaScript代码来...
Javascript实现动态时钟效果
10-17
在这个示例中，我们将探讨如何使用JavaScript实现一个动态时钟效果。 首先，我们看到一个CSS部分，用于设置时钟的样式。这段代码创建了一个id为"box"的元素，设置其为圆形，背景色为粉色，且有阴影效果。`width`和`...
python实现简易动态时钟
09-19
主要为大家详细介绍了python实现简易动态时钟，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
QT实现动态时钟
08-18
QT实现动态时钟 在本文中，我们将详细介绍如何使用QT实现动态时钟。QT是一个功能强大且灵活的跨平台应用程序开发框架，它提供了许多有用的类和函数来帮助开发者快速创建 GUI 应用程序。 首先，我们需要创建一个...
Hbuilder-时间线
小屁孩大帅-保密的博客
10-09 730
<template> <view> <view class="cu-bar bg-white"> <view class="action"> <text class="cuIcon-titles text-blue"></text> <text class="text-xl text-bold">2020年12月</text> </view> </vi...
如何查看代码的执行时间
最新发布
每天学一点，迟早迈进殿堂。
01-15 601
1、获取当前时间（开始代码执行的时间）2、获取当前时间（结束代码执行的时间）3、计算代码运行的时间差（毫秒）4、输出代码运行时间（秒）
libgdx 退出，及获取系统时间与显示，及接口的使用
技术成就梦想
01-26 1361
libgdx 代码工程： package com.test; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; import com.badlogic.gdx.ApplicationListener; import com.badlogic.gdx.G
HBuilder-初步尝试简易动画效果
nikezhenhaokan的博客
03-02 640
其会进行设定好的动画进行运动。素材仅展示，自行修改。
使用JavaScript获取当前时间方法（AM、PM）
m0_66599010的博客
09-29 4017
开发工具：HBuilder作者：喜雏田撰写时间：2020年9月29日环境：需要导入JavaScript的jar包。
Web前端开发笔记——第二章 HTML语言 第八节 表单标签
小宇y的博客
08-24 1555
目录一、表单的定义二、输入标签（一）文本框和密码框三、四、结语 一、表单的定义 表单用于收集用户的输入信息，它是一个区域，在这个区域里添加表单元素即可收集用户的信息，表单元素可以是文本、单选框、复选框、按钮、下拉菜单等等。 比如下面的qq登录页面，它就是一个表单： 表单用from标签表示，它有个重要的属性为action属性，action后跟数据处理网页的URL，表示收集用户的数据交由该页面进行处理，它表示为<from action="">表单元素</from>；也可以跟metho
html用div布局显示时间，并且实时刷新
背着饭碗的小猿
08-17 2447
完整代码如下 <!DOCTYPE html> <meta charset="UTF-8"> <!--中午乱码解决方式--> <html lang="en"> <title>定时刷新时间</title> <div class="showTime">当前时间：2021年3月12-23时34分15秒</div> <script> var date = null; date = setTim
hbuilder怎么使用自定义注释更新时间_Power BI 7月功能更新浅译
weixin_39900582的博客
12-25 711
一、报表更新1.渐变图例在本月更新中，我们可以为已按色标条件格式化的数据颜色添加图例。此图例可以帮助阐明视觉效果中颜色的含义，以向用户报告。我们可以在格式化窗格的数据颜色卡中找到条件格式对话框。然后进行设置新规则通过打开图例选项，来启用渐变图例，我们还可以进行图例样式的设置。开启此功能的有以下图形：堆积条形图堆积柱形图集群条形图聚集柱形图100％堆叠的条形图100％堆积柱形图散点图注意：...
用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分钟）。这样可以让指针在一定的时间内完成一圈的旋转。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值