需要个钟吗？教你制作一个简单又炫酷的时钟

最新推荐文章于 2022-05-07 23:17:34 发布
最新推荐文章于 2022-05-07 23:17:34 发布
阅读量5.3k 收藏 3
点赞数 4
CC 4.0 BY-SA版权
分类专栏： 课后作品 文章标签： 原创
@JianYong
本文链接：https://blog.youkuaiyun.com/weixin_44540201/article/details/86655439
本文介绍如何利用JavaScript的Date对象和计时器，结合HTML和CSS动画，制作一个炫酷的时钟。从构建时钟样式开始，逐步添加指针，并通过CSS动画让它们动起来。最后，通过JavaScript动态显示时间，并实现一些额外的视觉效果。这是一个适合初学者的实践项目。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

制作时钟之前我们先要去了解一下JaveScript中的Date（日期）对象和计时器。这样我们就可以正确显示时间。然后一些炫酷部分就是HTML+CSS动画了。
话不多说，直接看代码吧。

1、首先把我们要把一个时钟样式做出来，代码见下图：

在这里插入图片描述
在这里插入图片描述

注：图中我们采用了内联样式，所以代码看上去并不很整洁，建议大家还是按规范的代码格式去写。

2、那么看完效果图总觉的还少点什么，没错是还少了几根针，那代码还是见下图：
在这里插入图片描述
在这里插入图片描述

3、好的，那几根针也都有了，一个时钟样式也就差不多这样了，接下来我们要针动起来就需要用到我们的CSS动画了。代码见下图：
在这里插入图片描述
在这里插入图片描述
动画效果还需要到网页上去显示。

4、接下来就是显示时间了。首先就需要一

最低0.47元/天 解锁文章

200万优质内容无限畅学
炫酷动态时钟——canvas
weixin_48833991的博客
06-24 1038
今天分享一下用canvas做的动态时钟，原理和代码都很简单，不过还是可以做出很炫酷的效果，想学习canvas的小伙伴可以看一下。 效果图 HTML5的canvas的知识点 看源代码前先看一下canvas的基本知识点： 首先，找到 canvas 元素: var c=document.getElementById(“myCanvas”); 然后，创建 context 对象： var ctx=c.getContext(“2d”); getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路
10. 实时钟系统设计
SherlockHolmess的博客
02-28 5419
10. 实时钟系统设计 10.1 系统结构 10.2 程序设计 10.2.1 实时钟程序设计 10.2.2 按键和显示程序设计 10.2.3 系统程序设计 10.3 程序实现 10.1 系统结构 实时钟系统包括STM32MCU、实时钟电路DS1302、2个按键、4个LED、LED显示器和UART-USB转换器CP2102 实时钟电路...
HTML5 超级炫酷电子时钟
02-01
HTML5 超级炫酷电子时钟， 显示日期，时间和周几，代码简洁
炫酷的时钟
weixin_34393428的博客
05-16 266
炫酷的时钟 先啥也不说：来张效果图 我是根据：http://www.imooc.com/learn/133 这里的课程进行学习的。大大的感谢liuyubobobo老师的深入浅出的讲解！！ 我在这里仅仅提供我自己的代码和整体思路。 我的思路： 　　1 我们需要创建一个名为Ball的构造函数，每一个小球都是该构造函数的实例。 　　...
好看炫酷时钟
晓Ming的博客
05-14 388
炫酷时钟 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div
这可能是全网最炫酷的时钟了
欢欢的博客
03-19 182
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @font-face {
创意炫酷圆盘时钟
12-10
创意炫酷圆盘时钟
CSS3 炫酷的时钟制作
最爱喝怡宝的博客
11-30 391
时钟制作效果： 首先你要知道时钟的运行规律（虽然大部分人都知道），然后给三个针制作符合自身运动规律的动 画，这里需要用到定时器，但是如果只需要像定时器一样可刷新，用infinit也行。其次是针的摆放需要应用到 transform-origin这一属性 transform-origin: x-axis y-axis z-axis; 值 描述 x-axis 定义视图被置于 X 轴的何处。可能的值： left ...
时钟设计技巧
yundanfengqing_nuc的专栏
11-02 1486
转自：深入浅出玩转FPGA 1、内部逻辑产生的时钟        若使用组合逻辑的输出作为时钟信号或者异步复位信号，必须对有可能出现的问题采取必要的预防措施。在正常的同步设计中，一个时钟一个节拍的数据流控制能够保证系统持续稳定的工作。但是，组合逻辑产生的时钟不可避免地会有毛刺出现，如果此时输入端口的数据正处于变化过程，那么它将违反建立和保持时间要求，从而影响后续电路的输出状态，甚至导致整个系统
桌面工具炫酷时钟
风凌的技术社区
08-08 2016
效果图 功能描述: 实时展示当前时间 开发环境: windows, pycharm, tkinter, threading, datetime, time, ctypes 涉及知识点: GUI界面turtle模块的使用 函数定义与使用 基本语法结构的使用 学习交流，老鸟指导，直播学习可以进我的python学习交流群 1093619026 代码实现 from turtle import * from datetime import * def Skip(step): penup() fo
炫酷的时钟效果
叶已初秋的博客
06-12 9111
前言： 最近在抖音上看到一个炫酷的时钟旋转效果，本人是做Android的，闲来无事搞一下网页，这个时钟可以当壁纸，隔壁的妹子都看呆了，哈哈，这里只是截图不是动态gif 一：效果图 二：实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style&gt...
数字电子时钟设计
03-13
设计的数字电子时钟系统以单片机（AT89C51）为核心，结合相关的元器件，再配以相应的汇编语言源程序，设计出的一个将“时”、“分”、“秒”显示于人的视觉器官的计时装置。根据60秒为1分、60分为1小时的计数周期，构成秒→分→时的计数方式，实现计数功能，能显示清晰直观的数字符号。并且针对数字电子时钟会产生误差的现象，同时具有校准时间的功能。
HTML炫酷时钟 动态 js调用
09-04
HTML炫酷时钟 动态 js调用 做网页可以放在后台的 顶部做在线时间 和北京时间一致，动态一秒一秒的 跳动 看起来非常霸气 分享给大家
图形学绘制时钟
06-14
计算机图形学绘制时钟和五角星的代码，vc实现
抖音超火的罗马时钟数字时钟
09-23
抖音超火的罗马时钟 下载可看源码，即可运行 抖音超火的罗马时钟 下载可看源码，即可运行 抖音超火的罗马时钟 下载可看源码，即可运行
自己做个时钟-html5的canvas
疯狂紫萧
12-25 1053
这个只是用来练习对html5的掌握程度的。 首先，时钟有一个表盘。 表盘包括框、刻度2个 框就是 一个圆，刻度是一个一个小的线段 圆用arc函数可以画出来，刻度只能通过画圆弧来表现。然后用另外一个小的圆把多余的线遮掉 同理，指针也可以这样来完成，通过一个角度为0的圆弧。 然后计算当前时间，通过判断时间来得到角度。 代码如下： var canvas = null;
前端实现炫酷动感时钟特效
君_陌的博客
04-04 3312
主要用到原生态的 JS+CSS3。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html{ backgr...
CSS动画篇之炫酷时钟之时钟墙
南城
05-07 711
通过CSS制作的时钟大家肯定看到的多了，但是像下面这样的时钟是不是很少见，整个时钟是有很多个小的时钟组合而成，每秒通过多个时钟的动画来切换时间，不得不说这个设计是非常的炫酷且有特色。 前言 看到这个动画效果你有什么思路，你会怎么实现呢？可以先想一下你的答案，看看与本文的思路是否一致。本文既然是探讨的CSS动画，那么界面上这么多的时钟是尽可能的不是真的多个时钟，那样操作DOM及JS的逻辑就太复杂了，也没有和此设计理念一样，简洁且优美。 实现过程 HTML 当你仔细看这个动图的时候可以看出我们可以
JS小练习之实现一个酷炫时钟
weixin_41586886的博客
06-07 1300
&lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;超酷炫时钟&lt;/title&gt; &lt;style&gt; .wrapper
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值