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

代码语言:html

所属分类:其他

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

代码标签: 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 =.........完整代码请登录后点击上方下载按钮下载查看

网友评论0