js实现简洁壁挂式可走动显示时间时钟效果代码-html代码-BFW代码库

js实现简洁壁挂式可走动显示时间时钟效果代码

代码语言：html

所属分类：其他

代码描述：js实现简洁壁挂式可走动显示时间时钟效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  background: #bbb
}
</style>




</head>

<body >
  


  
      <script  >
const createClock = (context, offset = 0) => {

  const numbers = Array(12).
  fill(null).
  map((_, i) => i).
  map(index => {
    const position = index / 12;
    const numberContainer = document.createElement("div");

    const text = document.createElement('div');
    text.textContent = (index + 2) % 12 + 1;

    numberContainer.style.fontFamily = 'Helvetica Neue, sans-serif';
    numberContainer.style.fontWeight = 200;
    numberContainer.style.fontSize = 'min(3vh, 3vw)';
    numberContainer.appendChild(text);
    numberContainer.style.width = '60px';
    numberContainer.style.height = '60px';
    numberContainer.style.display = 'flex';
    numberContainer.style.alignItems = 'center';
    numberContainer.style.justifyContent = 'center';
    numberContainer.style.color = '#444';
    // numberContainer.style.border = '1px solid white'
    numberContainer.style.position = "absolute";
    numberContainer.style.left = "calc(50%)";
    numberContainer.style.top = "calc(50%)";
    //numberContainer.style.transition = '1s';
    numberContainer.style.transform =
    `translate(-30px, -30px)` +
    `rotate(${position}turn) ` +
    `translateX(min(24vh, 24vw)) ` + //;// +
    `rotate(-${position}turn) `;+

    context.appendChild(numberContainer);

    return numberContainer;
  });

  const marks = Array(60).
  fill(null).
  map((_, i) => i).
  map(index => {
    const position = index / 60;
    const mark = document.createElement("div");
    mark.style.width = "8px";
    mark.style.height = "2px";
    mark.style.borderRadius = '2px';
    mark.style.background = index % 5 === 0 ? "white" : "#333";
    mark.style.position = "absolute";
    mark.style.left = "calc(50% - 4px)";
    mark.style.top = "calc(50% - 2px)";
    mark.style.transform = `rotate(${position}turn) translateX(min(20.25vh, 20.25vw))`;
    context.appendChild(mark);
    return mark;
  });

  const hoursDial = document.createElement("div");
  hoursDial.style.width = "min(13.5vh, 13.5vw)";
  hoursDial.style.height = "3px";
  hoursDial.style.background = "#888";
  hoursDial.style.position = "absolute";
  hoursDial.style.left = "calc(50% - min(6.75vh, 6.75vw))";
  hoursDial.style.top = "calc(50% - 2.5px)";
  hoursDial.style.borderRadius = '2px';
  context.appendChild(hoursDial);

  const minutesDial = document.createElement("div");
  minutesDial.style.width = "min(20.25vh, 20.25vw)";
  minutesDial.style.height = "2px";
  minutesDial.style.background = "#444";
  minutesDial.style.position = "absolute";
  minutesDial.style.left = "calc(50% - min(10.125vh, 10.125vw))";
  minutesDial.style.top = "calc(50% - 1.5px)";
  minutesDial.style.borderRadius = '2px';
  context.appendChild(minutesDial);

  const secondsDial = document.createElement("div");
  secondsDial.s.........完整代码请登录后点击上方下载按钮下载查看