JavaScript经典动态流光时钟

朴灿烈づ我的快乐病毒、 2022-11-20 01:53 196阅读 0赞

原文链接：[你真的会前端css吗？用css做的非常炫酷的时间显示表][css_css]

效果展示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTY1Mzkz_size_16_color_FFFFFF_t_70_pic_center]

CSS代码：

<style type="text/css">
    	* {
    		margin: 0;
    		padding: 0;
    		font-family: 'Poppins', sans-serif;
    	}
    
    	html,
    	body {
    		display: grid;
    		height: 100%;
    		place-items: center;
    		background: #000;
    	}
    
    	.wrapper {
    		height: 100px;
    		width: 360px;
    		cursor: default;
    		background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
    		border-radius: 10px;
    		animation: animate 1.5s linear infinite;
    	}
    
    	.wrapper .display,
    	.wrapper span {
    		position: absolute;
    		top: 50%;
    		left: 50%;
    		transform: translate(-50%, -50%);
    	}
    
    	.wrapper .display {
    		position: absolute;
    		top: 50%;
    		left: 50%;
    		transform: translate(-50%, -50%);
    		z-index: 999;
    		background: #1b1b1b;
    		height: 85px;
    		width: 345px;
    		border-radius: 6px;
    		text-align: center;
    	}
    
    	.wrapper .display #time {
    		line-height: 85px;
    		font-size: 50px;
    		font-weight: 600;
    		letter-spacing: 1px;
    		background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
    		-webkit-background-clip: text;
    		-webkit-text-fill-color: transparent;
    		animation: animate 1.5s linear infinite;
    	}
    
    	@keyframes animate {
    		100% {
    			filter: hue-rotate(360deg);
    		}
    	}
    
    	.wrapper span {
    		height: 100%;
    		width: 100%;
    		background: inherit;
    		border-radius: 10px;
    	}
    
    	.wrapper span:first-child {
    		filter: blur(10px)
    	}
    
    	.wrapper span:last-child {
    		filter: blur(20px)
    	}
    </style>

HTML代码：

<div class="wrapper">
    	<div class="display">
    		<div id="time">
    			
    		</div>
    	</div>
    	<span></span>
    	<span></span>
    </div>

JavaScript代码：

<script type="text/javascript">
    	setInterval(() => {
    		const currentTime = document.querySelector("#time");
    		let date = new Date();
    		let timeFrame = "AM"; // 时段
    		let hours = date.getHours();
    		if (hours > 12) {
    			timeFrame = "PM";
    			hours = hours - 12;
    		}
    		if (hours < 10) {
    			hours = "0" + hours;
    		}
    		let minutes = date.getMinutes();
    		if (minutes < 10) {
    			minutes = "0" + minutes;
    		}
    		let seconds = date.getSeconds();
    		if (seconds < 10) {
    			seconds = "0" + seconds;
    		}
    		time.textContent = hours + ":" + minutes + ":" + seconds + " " + timeFrame;
    	});
    </script>

[css_css]: https://www.bilibili.com/video/BV1rK4y1Z7sX?t=552
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTY1Mzkz_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/ac7689ad6d0b458aa0e90c09e5aa85aa.png

发表评论取消回复

表情：

评论列表（有 0 条评论，196人围观）

还没有评论，来说两句吧...

相关阅读

相关经典光流计算方法（HS光流法、Lucas-Kanada方法、Pyramidal LK方法）

光流法介绍参看：[光流法—光流场估计概念][Link 1] 预备知识：梯度法最早的基于梯度的光流计算方法是于1980年发表的。这个算法的基本原理如下所述：假定 (

野性酷女/ 2022年12月19日 13:26/ 0 赞/ 154 阅读

相关光流法—光流场估计概念

目录 1. 图像的产生 2. 光流的概念 3. 光流场和运动场之间的关系 -------------------- 光流算法参看：[经典光流计算方法（HS光流法、Lu

╰+哭是因爲堅強的太久メ/ 2022年12月19日 13:23/ 0 赞/ 331 阅读

相关 JavaScript经典动态流光时钟

原文链接：[你真的会前端css吗？用css做的非常炫酷的时间显示表][css_css] 效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3po

朴灿烈づ我的快乐病毒、/ 2022年11月20日 01:53/ 0 赞/ 197 阅读

相关 javascript时钟

<html> <head> <script type="text/javascript"> function startTime() \{ var toda

﹏ヽ暗。殇╰゛Y/ 2022年09月18日 10:53/ 0 赞/ 230 阅读

相关光流算法

[ ][Link 1] 光流的概念是Gibson在1950年首先提出来的。它是空间运动物体在观察成像平面上的像素运动的瞬时速度，是利用图像序列中像素在时间域上的变化以

绝地灬酷狼/ 2022年07月17日 02:25/ 0 赞/ 270 阅读

相关光流简介

光流简介参考维基百科：[光流简介][Link 1] 光流(Optical flow or optic flow)是关于视域中的物体[运动检测][Link 2]中

「爱情、让人受尽委屈。」/ 2022年07月15日 13:39/ 0 赞/ 594 阅读

相关光流简介

光流简介参考维基百科：[光流简介][Link 1] 光流(Optical flow or optic flow)是关于视域中的物体[运动检测][Link 2]中

淩亂°似流年/ 2022年07月15日 13:29/ 0 赞/ 243 阅读

相关光流简介

光流简介参考维基百科：[光流简介][Link 1] 光流(Optical flow or optic flow)是关于视域中的物体[运动检测][Link 2]中

以你之姓@/ 2022年07月15日 13:27/ 0 赞/ 369 阅读

相关光流简介

光流简介参考维基百科：[光流简介][Link 1] 光流(Optical flow or optic flow)是关于视域中的物体[运动检测][Link 2]中

刺骨的言语ヽ痛彻心扉/ 2022年07月15日 13:14/ 0 赞/ 270 阅读

相关光流简介

光流简介参考维基百科：[光流简介][Link 1] 光流(Optical flow or optic flow)是关于视域中的物体[运动检测][Link 2]中

╰+攻爆jí腚メ/ 2022年07月15日 13:12/ 0 赞/ 228 阅读