svg+js实现毫秒级微妙数字时钟显示时间代码

代码语言:html

所属分类:其他

代码描述:svg+js实现毫秒级微妙数字时钟显示时间代码

代码标签: svg js实 毫秒级 微妙 数字 时钟 显示 时间 代码

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

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

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

  
  
  
<style>
body {
	background: #2B55DD;
}
#clock {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100vw - 4px);
	height: auto;
	max-width: 300px;
}
</style>


  
  
</head>

<body>
  <div id="clock"></div>
  
      <script  >
function initClock(elt, opt_properties) {
  const defaultProperties = { color: '#0ff', date: new Date(), glow: true, militaryTime: false, showMs: true };
  const c = Object.assign(defaultProperties, opt_properties);
  !c.dotColor ? c.dotColor = defaultProperties.color : false;
  const getSecondsPassed = (now = c.date, militaryTime = c.militaryTime) => {
    const s10 = Math.floor(now.getSeconds());
    const m10 = Math.floor(now.getMinutes() * 60 + s10);
    const h = Math.floor(now.getHours() * 3600 + m10);
    return { hour: h, minute10: m10, minute1: Math.floor(now.getMinutes() % 10 * 60 + s10), second10: s10, second1: Math.floor(now.getSeconds() % 10) };
  };
  let td = getSecondsPassed();
  let vxEnd = c.showMs ? 175.........完整代码请登录后点击上方下载按钮下载查看

网友评论0