好看炫酷时钟

已于 2024-08-19 22:56:05 修改
阅读量362 收藏
点赞数
分类专栏： css 文章标签： js html canvas javascript
于 2020-05-14 17:43:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39668938/article/details/106121390
版权

炫酷时钟

在这里插入图片描述

<!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 id="blogTitle">
		</div>
	</body>
	<script type="text/javascript">
	</script>
	<script>
		// ****************************** 炫酷倒计时 start *********************************
		//可修改位置id
		$("#blogTitle").append("<div></div>");
		
		$("#blogTitle div").css({
			position: "absolute",
			top: 0,
			right: 0
		});
		$("#blogTitle div").attr("id", "pdata");
		$(function() {
			$("#pdata").html('<canvas id="canvas"></canvas>');
			var g = 260;
			var k = 100;
			var j = 1.5;
			var h = 10;
			var n = 0.65;
			var d;
			var b = [];
			const a = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444",
				"#CC0000"
			];
			var l = [];
			var m = [
				[
					[0, 0, 1, 1, 1, 0, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 1, 1, 0],
					[0, 0, 1, 1, 1, 0, 0]
				],
				[
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[1, 1, 1, 1, 1, 1, 1]
				],
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 1, 1, 1, 1, 1]
				],
				[
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				],
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 0],
					[0, 0, 1, 1, 1, 1, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 1, 1, 0],
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 1]
				],
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 1, 1, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				],
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				],
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0]
				],
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				],
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 0, 0, 0, 0]
				],
				[
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0]
				]
			];

			function i(z) {
				var D = [];
				d.fillStyle = "#005eac";
				var r = new Date();
				var u = 70,
					t = 30;
				var B = r.getHours();
				var y = Math.floor(B / 10);
				var w = B % 10;
				D.push({
					num: y
				});
				D.push({
					num: w
				});
				D.push({
					num: 10
				});
				var s = r.getMinutes();
				var y = Math.floor(s / 10);
				var w = s % 10;
				D.push({
					num: y
				});
				D.push({
					num: w
				});
				D.push({
					num: 10
				});
				var C = r.getSeconds();
				var y = Math.floor(C / 10);
				var w = C % 10;
				D.push({
					num: y
				});
				D.push({
					num: w
				});
				for (var A = 0; A < D.length; A++) {
					D[A].offsetX = u;
					u = o(u, t, D[A].num, z);
					if (A < D.length - 1) {
						if ((D[A].num != 10) && (D[A + 1].num != 10)) {
							u += h
						}
					}
				}
				if (l.length == 0) {
					l = D
				} else {
					for (var v = 0; v < l.length; v++) {
						if (l[v].num != D[v].num) {
							f(D[v]);
							l[v].num = D[v].num
						}
					}
				}
				q(z);
				p();
				return r
			}

			function f(u) {
				var t = u.num;
				var s = m[t];
				for (var w = 0; w < s.length; w++) {
					for (var r = 0; r < s[w].length; r++) {
						if (s[w][r] == 1) {
							var v = {
								offsetX: u.offsetX + j + j * 2 * r,
								offsetY: 30 + j + j * 2 * w,
								color: a[Math.floor(Math.random() * a.length)],
								g: 1.5 + Math.random(),
								vx: Math.pow(-1, Math.ceil(Math.random() * 10)) * 4 + Math.random(),
								vy: -5
							};
							b.push(v)
						}
					}
				}
			}

			function q(r) {
				for (var s = 0; s < b.length; s++) {
					r.beginPath();
					r.fillStyle = b[s].color;
					r.arc(b[s].offsetX, b[s].offsetY, j, 0, 2 * Math.PI);
					r.fill()
				}
			}

			function p() {
				var s = 0;
				for (var r = 0; r < b.length; r++) {
					var t = b[r];
					t.offsetX += t.vx;
					t.offsetY += t.vy;
					t.vy += t.g;
					if (t.offsetY > (k - j)) {
						t.offsetY = k - j;
						t.vy = -t.vy * n
					}
					if (t.offsetX > j && t.offsetX < (g - j)) {
						b[s] = b[r];
						s++
					}
				}
				for (; s < b.length; s++) {
					b.pop()
				}
			}

			function o(s, z, v, u) {
				var t = m[v];
				for (var w = 0; w < t.length; w++) {
					for (var r = 0; r < t[w].length; r++) {
						if (t[w][r] == 1) {
							u.beginPath();
							u.arc(s + j + j * 2 * r, z + j + j * 2 * w, j, 0, 2 * Math.PI);
							u.fill()
						}
					}
				}
				u.beginPath();
				s += t[0].length * j * 2;
				return s
			}
			var e = document.getElementById("canvas");
			e.width = g;
			e.height = k;
			d = e.getContext("2d");
			var c = new Date();
			setInterval(function() {
				d.clearRect(0, 0, d.canvas.width, d.canvas.height);
				i(d)
			}, 50)
		});
		// ****************************** 炫酷倒计时 end *********************************
	</script>
</html>
晓Ming_
关注
专栏目录
需要个钟吗？教你制作一个简单又炫酷的时钟
依然的博客
01-26 5208
需要个钟吗？教你制作一个简单又炫酷的时钟 开发工具和关键技术：Adobe Dreamweaver CC 2017；HTML+CSS 作者：金建勇 撰写时间：2019年1月26日 制作时钟之前我们先要去了解一下JaveScript中的Date（日期）对象和计时器。这样我们就可以正确显示时间。然后一些炫酷部分就是HTML+CSS动画了。 话不多说，直接看代码吧。 1、首先把我们要把一个时钟样式做出...
创意炫酷圆盘时钟
12-10
创意炫酷圆盘时钟
炫酷的时钟
weixin_34393428的博客
05-16 235
炫酷的时钟 先啥也不说：来张效果图 我是根据：http://www.imooc.com/learn/133 这里的课程进行学习的。大大的感谢liuyubobobo老师的深入浅出的讲解！！ 我在这里仅仅提供我自己的代码和整体思路。 我的思路： 　　1 我们需要创建一个名为Ball的构造函数，每一个小球都是该构造函数的实例。 　　...
这可能是全网最炫酷的时钟了
欢欢的博客
03-19 158
<!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 {
HTML5 超级炫酷电子时钟
02-01
HTML5 超级炫酷电子时钟， 显示日期，时间和周几，代码简洁
CSS3 炫酷的时钟制作
最爱喝怡宝的博客
11-30 358
时钟制作效果： 首先你要知道时钟的运行规律（虽然大部分人都知道），然后给三个针制作符合自身运动规律的动 画，这里需要用到定时器，但是如果只需要像定时器一样可刷新，用infinit也行。其次是针的摆放需要应用到 transform-origin这一属性 transform-origin: x-axis y-axis z-axis; 值 描述 x-axis 定义视图被置于 X 轴的何处。可能的值： left ...
抖音最火超炫酷旋转时钟
07-12
【抖音最火超炫酷旋转时钟】是一个热门的编程项目，主要在抖音平台上受到了广泛的关注和喜爱。这个项目的重点在于其独特的视觉效果——旋转时钟，它将时间的显示方式变得非常酷炫，吸引了很多用户的注意力。"绝对...
HTML炫酷时钟 动态 js调用
09-04
HTML炫酷时钟是一种利用JavaScript实现的网页动态元素，它能实时显示当前的日期和时间，为网页增添视觉吸引力。这种时钟通过JS调用来更新页面上的时间，以确保显示的时钟始终与实际时间同步，无论是北京时间还是其他...
H5页面时钟特效.zip_N6W_h5 炫酷时钟
09-20
而“炫酷时钟”则强调了这个时钟不仅显示时间，还具有吸引眼球的视觉效果。 压缩包内的"时钟特效"可能是HTML、CSS和JavaScript文件的集合。HTML文件用于构建页面结构，CSS文件负责样式设计，包括初始的颜色设定和...
抖音炫酷时钟前端源码.zip
07-02
【抖音炫酷时钟前端源码.zip】是一个包含有炫酷特效的时钟应用，它以抖音风格设计，能够实时显示当前时间，并且具有动态轮盘式的转动效果，为用户的电脑桌面增添了一份科技感和趣味性。这个项目是前端开发的成果，...
抖音超火的罗马时钟数字时钟
09-23
抖音超火的罗马时钟 下载可看源码，即可运行 抖音超火的罗马时钟 下载可看源码，即可运行 抖音超火的罗马时钟 下载可看源码，即可运行
炫酷动态时钟——canvas
weixin_48833991的博客
06-24 978
今天分享一下用canvas做的动态时钟，原理和代码都很简单，不过还是可以做出很炫酷的效果，想学习canvas的小伙伴可以看一下。 效果图 HTML5的canvas的知识点 看源代码前先看一下canvas的基本知识点： 首先，找到 canvas 元素: var c=document.getElementById(“myCanvas”); 然后，创建 context 对象： var ctx=c.getContext(“2d”); getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路
炫酷的时钟效果
叶已初秋的博客
06-12 9025
前言： 最近在抖音上看到一个炫酷的时钟旋转效果，本人是做Android的，闲来无事搞一下网页，这个时钟可以当壁纸，隔壁的妹子都看呆了，哈哈，这里只是截图不是动态gif 一：效果图 二：实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style&gt...
前端实现炫酷动感时钟特效
君_陌的博客
04-04 3224
主要用到原生态的 JS+CSS3。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html{ backgr...
CSS动画篇之炫酷时钟之时钟墙
南城
05-07 655
通过CSS制作的时钟大家肯定看到的多了，但是像下面这样的时钟是不是很少见，整个时钟是有很多个小的时钟组合而成，每秒通过多个时钟的动画来切换时间，不得不说这个设计是非常的炫酷且有特色。 前言 看到这个动画效果你有什么思路，你会怎么实现呢？可以先想一下你的答案，看看与本文的思路是否一致。本文既然是探讨的CSS动画，那么界面上这么多的时钟是尽可能的不是真的多个时钟，那样操作DOM及JS的逻辑就太复杂了，也没有和此设计理念一样，简洁且优美。 实现过程 HTML 当你仔细看这个动图的时候可以看出我们可以
分享111个JS时钟代码特效，总有一款适合您
最新发布
zy0412326的专栏
02-07 1934
JS
css制作炫酷的罗盘时钟特效（附代码）
z1093541823的博客
04-19 4175
炫酷的罗盘时钟特效； 可以直接使用；
炫酷的时间样式HTML,js动态炫酷数字时钟
weixin_42471590的博客
06-05 1091
这是一款使用js和CSS制作的动态炫酷数字时钟。该js数字时钟采用LED数字时钟样式，效果十分逼真。使用方法HTML结构该js数字时钟的HTML结构如下：CSS样式为该js数字时钟添加下面的css样式。.clock {height:200px;position:absolute;top:50%;left:50%;width:900px;margin-left:-450px;margin-top:-...
炫酷时钟（css3+js）
qq_34659400的博客
07-03 1224
html<body> <ul id='box'></ul> </body>css<style> *{ margin: 0; padding: 0; } body{ background-color: #aaa;
炫酷时钟设计：美化你的屏幕时间显示
本资源中提到的“精美炫酷的看时间”强调了设计美学在现代数字时钟中的重要性。 知识点四：软件与互动性 现代数字时钟不仅限于显示时间，它们可以具备多种软件功能，比如闹钟、计时器、天气预报等。有的时钟还具有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值