svg+js实现带日期时钟走动显示时间效果代码-html代码-BFW代码库

svg+js实现带日期时钟走动显示时间效果代码

代码语言：html

代码描述：svg+js实现带日期时钟走动显示时间效果代码

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<style>


html {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
}

svg {
  display: none;margin-top: 45%;
}

body {
  background-color: #7b0828;
  margin: 0;
}

.hour_marker {
  fill: transparent;
  stroke: #f0f0c9;
  stroke-width: 7;
  stroke-dasharray: 0.2, 4.8;
  stroke-dashoffset: 0.1;
}

.minute_marker {
  fill: transparent;
  stroke: #0f0e0e;
  stroke-width: 7;
  stroke-dasharray: 0.2, 0.8;
  stroke-dashoffset: 0.1;
}

.hand {
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
}

.hand--thick {
  stroke-width: 7;
}

.hand--second {
  stroke: yellow;
}

.center {
  fill: #7b0828;
  stroke-width: 2;
  stroke: white;
}

.text {
  fill: #f0f0c9;
  font-family: "Roboto", sans-serif;
  text-anchor: middle;
  cursor: pointer;
  user-select: none;
}
</style>
</head>
<body>
<svg width="200" height="200" viewbox="-100 -100 200 200">
  <circle class="minute_marker" r="90" pathlength="60"></circle>
  <circle class="hour_marker" r="90" pathlength="60"></circle>
  <text id="text" class="text" x="45" y="5"></text>

  <g id="hour_hand">
    <line class="hand" x1="0" y1="0" x2="0" y2="-50"></line>
    <line class="hand hand--thick" x1="0" y1="-12" x2="0" y2="-50"></line>
  </g>

  <g id="minute_hand">
    <line class="hand".........完整代码请登录后点击上方下载按钮下载查看