js+css实现火车轨道行驶时分秒走动时钟效果代码-html代码-BFW代码库

js+css实现火车轨道行驶时分秒走动时钟效果代码

代码语言：html

所属分类：其他

代码描述：js+css实现火车轨道行驶时分秒走动时钟效果代码，三列火车三条轨道围成圆圈，三列火车分别代表时分秒指针的走动显示当前的时间。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
body {
	background: radial-gradient(circle, grey, #030);
	margin: 0 auto;
	height: 100vh;
}
#trainClockArea {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 95%;
	max-width: 400px;
	height: 95%;
	max-height: 400px;
}
#trainClockArea > #trainClock {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	height: 100%;
	width: 100%;
}
</style>


  
  
</head>

<body translate="no">
  <div id="trainClockArea"></div>
  
      <script  >
function createTrainClock() {
  // Get the current time
  const now = new Date();
  // Seconds passed in the current day
  const secondsInDay = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
  // Seconds passed in the current hour
  const secondsInHour = now.getMinutes() * 60 + now.getSeconds();
  // Seconds passed in the current minute
  const secondsInMinute = now.getSeconds();
  // 	console.log(`Seconds passed in the current day: ${secondsInDay}`);
  // 	console.log(`Seconds passed in the current hour: ${secondsInHour}`);
  // 	console.log(`Seconds passed in the current minute: ${secondsInMinute}`);

  const svg = `<svg id="trainClock" viewBox="0 0 100 100">
	<defs>
		<path id="trackSec" fill="none" d="M 50 7.5 A 1 1 0 0 1 50 92.5 A 1 1 0 0 1 50 7.5" />
		<path id="trackMin" fill="none" d="M 50 20 A 1 1 0 0 1 50 80 A 1 1 0 0 1 50 20" />
		<path id="trackHour" fill="none" d="M 50 32.5 A 1 1 0 0 1 50 68.5 A 1 1 0 0 1 50 32.5" />
		<filter id="blur" x="-100%" y="-100%" width="300%" height="300%">
      <feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="9" result="turbulence" seed="69" />
      <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" />
    </filter>
		<filter id="blur1" x="-100%" y="-100%" width="300%" height="300%">
			<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
		</filter>
		<filter id="blur2" x="-100%" y="-100%" width="300%" height="300%">
			<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
		</filter>
		<radialGradient id="grassGrad1" gradientUnits="userSpaceOnUse">
			<stop offset="50%" stop-color="#0b0" />
			<stop offset="75%" stop-color="forestgreen" />
			<stop offset="100%" stop-color="darkgreen" />
		</radialGradient>
	</defs>
	<circle cx="50" cy="50" r="50" fill="url(#grassGrad1)" />
	<circle cx="50" cy="50" r="30" fill="none" stroke="url(#grassGrad2)" stroke-width="13" />
	<circle cx="50" cy="50" r="17.5" fill="none" stroke="url(#grassGrad3)" stroke-width="13" />
	<circle cx="50" cy="50" r="42.5" fill="none" str.........完整代码请登录后点击上方下载按钮下载查看