首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js圆形走动数字时钟代码

以下是一个使用 JavaScript 实现的圆形走动数字时钟的示例代码:

代码语言:txt
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圆形走动数字时钟</title>
  <style>
    #clock {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-color: #f0f0f0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      font-family: 'Arial', sans-serif;
    }
  </style>
</head>

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

  <script>
    function updateClock() {
      const now = new Date();
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      const seconds = now.getSeconds().toString().padStart(2, '0');
      const timeString = `${hours}:${minutes}:${seconds}`;

      const clockElement = document.getElementById('clock');
      clockElement.textContent = timeString;

      // 计算角度并旋转数字
      const angle = (new Date().getSeconds() / 60) * 360;
      clockElement.style.transform = `rotate(${angle}deg)`;
    }

    setInterval(updateClock, 1000);
    updateClock(); // 初始化时钟
  </script>
</body>

</html>

基础概念:

  • Date 对象用于获取当前的时间。
  • setInterval 函数用于每隔一定时间执行指定的函数。

优势:

  • 可以直观地展示时间的流逝。
  • 圆形的设计更具吸引力。

类型:

  • 这属于基于网页的前端动态时钟展示。

应用场景:

  • 可用于网站首页、个人博客等页面,增加趣味性和个性化。

常见问题及解决方法:

  • 若时钟显示不准确,可能是由于时区设置问题,可以通过获取本地时间并正确处理时区来解决。
  • 如果页面加载时时钟未立即显示正确时间,可以在脚本开始处调用一次 updateClock 函数进行初始化。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 教你用 JavaScript 设计一个 Neumorphism 风格的数字时钟 (代码详解)

    时钟是我们用来测量时间的装置。如果使用得当,时钟对于任何 UI 都是有用的元素。时钟可用于以时间为主要关注点的网站,例如一些预订网站或一些显示火车、公共汽车、航班等到达时间的应用程序。...时钟基本上有两种类型,模拟和数字。在这里,我们将设计数字时钟并添加一些样式以使其更具吸引力。...HTML & CSS 代码 在本节中,我们将“HH:MM:SS”格式的虚拟时间包裹在“div”标签中,并且我们在外部包含了 CSS 和 JavaScript 文件。 HTML <!...

    抖音超火的罗盘时钟效果

    抖音超火的罗盘时钟 利用原生js,实现的罗盘时钟效果 实现效果 ?...因为数字的量太大,采用js动态生成数字 js生成数字 这个函数是我用来生成日期,时间数字的,传入了5个参数确实有点多了 第一个参数num:传入循环的终点 第二个参数date:传入要生成的标签加在哪里,也就是是谁下的标签 第三个参数target...展示表盘,也就是生成圆形的效果 通过定位将全部span盒子定位在一起,通过transfromX将盒子一开,作为半径,再通过给每个盒子旋转一份角度,使得盒子均匀的散开 function rot(target...由于页面加载需要一定时间,会导致js代码未能立即执行,页面会有一段空白阶段,所以添加一个立即执行函数让页面一加载就有效果呈现 实现代码 <!

    64220

    ❤️使用 HTML、CSS 和 JavaScript 的简单模拟时钟❤️

    如果你想使用 JavaScript 制作一个模拟时钟,那么本文将对你有所帮助。我们都知道时钟有两种,一种是模拟的,一种是数字的。虽然数字时钟被广泛使用,但模拟时钟也被很多人所喜爱。...使用 HTML、CSS 和 JavaScript制作模拟时钟(初学者教程) JavaScript 设计一个 Neumorphism风格的数字时钟 众所周知,模拟时钟表壳有三个指针和从 1 到 12...JavaScript 模拟时钟 [现场演示] 如果你想了解这个模拟时钟是如何工作的,那么你可以观看下面的演示。在这里,我提供了所需的源代码,以便你可以复制代码并在你自己的工作中使用它。...我们都知道手表有两种,一种是模拟的,一种是数字的。虽然数字手表被广泛使用,但模拟手表也在许多地方使用。 使用 HTML、CSS 和 JavaScript 的简单模拟时钟 希望你喜欢这个设计。...border-radius 50%使这款手表呈圆形。我还使用了高度和宽度 30 rem。如果你想让这款手表更大,你可以增加它的尺寸。

    2.7K21

    又进化了!全志T113智能家居86盒圆屏版(圆屏加一体化驱动板+CNC外壳+炫酷LVGL UI)

    萨纳兰的黄昏在86盒的原作者FanHuaCloud大佬加持下,又给86盒挖了个新坑,为了解决之前ESP32所驱动圆屏只能播放MJPEG并且帧率较低的尴尬问题,集圆屏加一体化驱动板+外壳+炫酷LVGL UI于一身的圆形...软件系统及UI界面适配 APP是设备的灵魂,肯定不能只跑个lvgl demo看看那些图形蹦来蹦去最后得个数字。前面做的这一切,都是为了将之前的代码移植过来。本APP使用LVGL 8.3.11编写。...音乐频谱节拍器 同样针对方屏和圆屏做了两套不同的UI,不但UI不同,而且频谱样式也不同,方屏是条形频谱,圆形是放射形渐变频谱。...圆形版本的拾音频谱叠加了视频背景(视频背景由b站up主渣渣一块钱4个制作)。 动态天气时钟 以之前HTC手机的那个动态天气动画作为背景的时钟,根据不同的天气加载不同的动态背景,使用了高德天气API。...神之眼/符玄个性时钟 移植了之前做的一些个性主题时钟,比如随机星座时钟等,比较二次元,结合全志硬解视频功能,支持mp4视频播放作为动态背景 有兴趣的可以看我相关的视频展示。

    35610

    Qt编写自定义控件19-图片背景时钟

    一、前言 图片背景时钟控件,是全套控件(目前共145个)中唯一的几个贴图的控件,这个背景要是不贴图,会画到猝死,必须用美工做好的图贴图作为背景,此控件以前学C#的时候写过,后面在写Qt控件的过程中把他移植过来了...,其实画法完全一模一样,我能说连代码我都是直接复制粘贴过来改改的吗?...贴图的控件都很简单,直接drawimage完事,本控件除了支持多种背景风格样式以外,还特意增加了指针走动风格样式,直接鼠标右键切换风格等。...二、实现的功能 1:支持鼠标右键切换风格 2:支持设置四种背景风格样式 3:支持四种秒针走动风格样式 4:增加设置时间接口 三、效果图 [在这里插入图片描述] 四、头文件代码 #ifndef IMAGECLOCK_H...qwt的控件类环环相扣,高度耦合,想要使用其中一个控件,必须包含所有的代码。

    1.1K00

    Qt编写自定义控件54-时钟仪表盘

    一、前言 这个控件没有太多的应用场景,主要就是练手,论美观的话比不上之前发过的一个图片时钟控件,所以此控件也是作为一个基础的绘制demo出现在Qt源码中,我们可以在Qt的安装目录下找到一个时钟控件的绘制...,甚至还有qml版本,本控件无非就是一个仪表边框加上时钟分钟刻度再加上时分秒指针,打完收工,我是在此基础上增加了可以设置各种颜色,然后鼠标右键可设置四种效果 普通效果/弹簧效果/连续效果/隐藏效果,弹簧效果的意思是秒钟走动的时候...,支持任意操作系统 三、效果图 [在这里插入图片描述] 四、头文件代码 #ifndef GAUGECLOCK_H #define GAUGECLOCK_H /** * 时钟仪表盘控件 作者:feiyangqingyun...每个类都可以独立成一个单独的控件,零耦合,每个控件一个头文件和一个实现文件,不依赖其他文件,方便单个控件以源码形式集成到项目中,较少代码量。...qwt的控件类环环相扣,高度耦合,想要使用其中一个控件,必须包含所有的代码。

    1.5K20

    html + js + css 实现漂亮的无图实时时钟

    前言原生 javascript + css + html 实现实时时钟以前做过很多在线时钟,一般都是用背景图和 js 文件生成的。...定义了一个时钟 div,其中包含原点、小时、分钟、秒针、日期和时间。至于时钟上的刻度、数字等元素,因为量比较大,是用 javascript 生成的。代码之前,有一些 CSS 属性需要了解,例如 position、border-radius、transform 等。...在这个例子中,使用该属性将时钟元素设置为圆形,这里写一个例子:4 个 div 元素,每个元素的宽高为100px,不同 border-radius 的效果:2.3 transform 属性transform...JavaScript 介绍js 部分没什么好说的,简单的 dom 操作,setInterval 函数每秒执行一次,可以修改指针的角度和显示时间。

    30032

    【Html.js——功能实现】让时钟转起来(蓝桥杯真题-2156)【合集】

    例如,有时候我们需要将时间从枯燥的数字转化为更能吸引用户眼球的动态时钟。我们该如何实现呢?...在本节挑战中,我们就遇到了类似情况:: 上图中的动态时钟效果,是通过 HTML 和 CSS 结合 JS 中的 Date 对象来实现的。 本节挑战的代码中,还未实现秒针转动的效果。...:可能是用于显示时钟上的数字的容器。...包含多个 X:其中 X 是从 1 到 12 的数字,这些元素可能是时钟的数字标记。...三、工作流程 ▶️ 在 HTML 中,构建了一个时钟的基本结构,包括数字和一个用于放置指针的容器。 在 JavaScript 中,首先对时钟的数字进行旋转布局,将它们放置在正确的位置。

    3000

    使用 HTML、CSS 和 JavaScript 制作模拟时钟(初学者教程)

    文章目录 步骤1:创建制作此时钟的基本结构 步骤2:使用 CSS 代码设计背景 步骤3:使用 CSS 代码设计背景 步骤4:根据特定距离对数字进行排序 步骤5:在时钟上添加三个指针(小时、分钟、秒)...步骤6:把每只手都摆好 步骤7:添加 JavaScript 代码以激活时钟 步骤8:确定手动时钟的旋转 代码下载 联系作者 在本文中,您将学习如何使用 HTML、CSS 和 JavaScript 编程代码制作模拟时钟...--时钟编号(1,2,....,12)--> 时钟指针()--> ---- 步骤2:使用 CSS 代码设计背景 以下 CSS 代码已用于设计上述 HTML 代码。...正如您在上面看到的,HTML 代码会写入这些数字。...这意味着如果您将每个数字放置在30 度的距离处,数字 12 将在圆形框架中以完全固定的距离找到它的位置。如下所示,我使用第一个数字旋转 30 度。我们通过以 60 度角旋转它来使用相同的数字2。

    5.6K34

    「Web Animation API 专题」纯手工撸一个图片随机移动的动画

    API有个清晰的认识,笔者在接下来的系列文章里,用五六个例子让大家理解这个API,今天笔者将用此API实现一个随机移动的图片开始进行介绍,比如用这个效果我们可以制作一个随机飘浮移动的广告位,游戏里随机走动的怪物等等...rgba(0,0,0,0.5)); } 脚本部分 获取容器 var container = document.getElementById("container"); 加载动画 为了更加直观性,我选择一个走动的...最终完成的代码 <!...结束语 好了今天的代码撸完了,js代码还不到50行(注:为了在手机端运行,引入了web-animations.min.js),您可以点击"https://www.qianduandaren.com/demo...下一篇文章我们用不到20行的原生js代码纯手工撸一个漂亮的时钟,敬请期待。 更多精彩内容,请微信关注“前端达人”公众号!

    1.7K30

    【python游戏编程之旅】第七篇---pygame中的冲突检测技术

    pygame.sprite.collide_rect_ratio( 0.5 )(sprite_1,sprite_2) 2.两个精灵之间的圆检测 矩形冲突检测并不适用于所有形状的精灵,因此pygame中还有个圆形冲突检测...3.两个精灵之间的像素遮罩检测 如果矩形检测和圆形检测都不能满足我们的需求怎么办?别担心,pygame还为我们提供了一个更加精确的检测:pygame.sprite.collide_mask()。...只要将类的实现代码放进一个单独的py,然后在使用的时候引入他就可以了。...但是这样看起来也不是很方便的说,因此我们使用import的变体: from MyLibrary import * #将文件中的所有内容引入 2.高级行走动画 通过效果图,我们可以看到程序里面用到了高级的行走动画...,人物一共有上下左右四个方向的行走动画。

    1.8K10
    领券