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

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

代码语言：html

所属分类：其他

代码描述：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 : 130;
  let showGlow = c.glow ? `<use href="#fullClock" filter="url(#glow)"/>` : '';
  let showGlowBlur = c.glow ? `<filter id="glow" x="-200%" y="-200%" width="1000%" height="1000%"><feGaussianBlur in="SourceGraphic" stdDeviation="1.4" /></filter>` : '';
  let hrDur = c.militaryTime ? '86400' : '43200';
  let hr1Offsets = c.militaryTime ? `0 0; 0 -30; 0 -60; 0 -90; 0 -120; 0 -150; 0 -180; 0 -210; 0 -240; 0 -270; 0 0; 0 -30; 0 -60; 0 -90; 0 -120; 0 -150; 0 -180; 0 -210; 0 -240; 0 -270; 0 0; 0 -30; 0 -60; 0 -90` : `0 -60; 0 -30; 0 -60; 0 -90; 0 -120; 0 -150; 0 -180; 0 -210; 0 -240; 0 -270; 0 0; 0 -30`;
  let hr10Offsets = c.militaryTime ? `0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 -30; 0 -30; 0 -30; 0 -30; 0 -30; 0 -30; 0 -30; 0 -30; 0 -30; 0 -30; 0 -60; 0 -60; 0 -60; 0 -60` : `0 -30; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 -30; 0 -30`;
  let msDots = c.showMs ? `M 132.5 10 v0 m0 10 v0` : '';
  let milliseconds = c.showMs ? `<g class="ms10"><use href="#nums" transform="translate(135)" />&l.........完整代码请登录后点击上方下载按钮下载查看