svg+js实现可拨号日期选择器代码-html代码-BFW代码库

代码语言：html

所属分类：选择器

代码描述：svg+js实现可拨号日期选择器代码

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

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

<head>
  <meta charset="UTF-8">
  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Noto+Sans&amp;display=swap'>
  
<style>
body {
  background: #fffcf3;
  margin: 0;
  height: max(100vh, 380px);
}
#picker {
  position: absolute;
  left: 150px;
  top: 150px;
  width: 300px;
  height: 80px;
}
#picker::before {
  display: block;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 12px;
  filter: drop-shadow(black 1px 1px 6px);
}
svg {
  position: absolute;
  border-radius: 12px;
  overflow: visible;
  background: #fda;
}
.label {
  fill: #060;
  font-size: 6px;
  font-family: "Noto Sans", sans-serif;
}
.turn {
  transition: transform 0.3s ease-in-out;
  pointer-events: none;
}
.choose .turn {
  transition: none;
}
.turn > path {
  fill: none;
  stroke: #060;
  stroke-linecap: square;
}
circle {
  fill: none;
  stroke: white;
  cursor: grab;
}
circle.day {
  stroke-width: 22;
  clip-path: url(#clipD);
}
circle.day.choose {
  clip-path: none;
  filter: drop-shadow(#0086 0 0 1px);
  cursor: grabbing;
}
.wheel.day {
  mask: none;
  clip-path: url(#clipD);
}
.wheel.choose.day {
  mask: url(#windowD);
  clip-path: none;
}
svg:has(choose) .wheel.day .turn {
  transition: none;
}
circle.month {
  stroke-width: 22;
  clip-path: url(#clipM);
}
circle.month.choose {
  clip-path: none;
  filter: drop-shadow(#0086 0 0 1px);
  cursor: grabbing;
}
.wheel.month {
  mask: none;
  clip-path: url(#clipM);
}
.wheel.choose.month {
  mask: url(#windowM);
  clip-path: none;
}
g:has(use.year) {
  clip-path: url(#clipY);
}
use.year {
  fill: none;
  stroke-width: 15;
}
g:has(use.year.choose) {
  clip-path: none;
  filter: drop-shadow(#0086 0 0 1px);
  cursor: grabbing;
}
.wheel.year {
  mask: none;
  clip-path: url(#clipY);
}
.wheel.choose.year {
  mask: url(#windowY);
  clip-path: none;
}
.dial use {
  fill: none;
  stroke: #060;
}
.dial text {
  fill: #060;
  font-size: 12px;
  font-family: "Noto Sans", sans-serif;
  text-anchor: end;
  user-select: none;
}
.frame {
  fill: none;
  stroke: #008;
  pointer-events: none:
}
.frame path {
  stroke-width: 0.5px;
  stroke-dasharray: 1;
  stroke-dashoffset: -.5;
}
</style>


  
</head>

<body translate="no">
  <div id="picker">
  <svg viewBox="-75 -16 100 27">
    <defs>
      <path id="dialD" d="M -48,0 H -51"></path>
      <path id="dialM" d="M -23,0 H -26"></path>
      <path id="dialY" d="M -14,0 H -17"></path>
      <rect id="frameD" x="-68" y="-6.5" width="17" height="13" rx="2"></rect>
      <rect id="frameM" x="-43" y="-6.5" width="17" height="13" rx="2"></rect>
      <circle class="year" id="digitC" r="19.5"></circle>
      <g class="turn" id="digitT" style="transform:rotate(0deg)">
        <path d="M -14,0 A14,14 0 1 1 -11.3262,8.22899"></path>
        <g class="dial" transform="rotate(0)">
          <use href="#dialY"></use>
          <text x="-18.5" y="0.35em">0</text>
        </g>
        <g class="dial" transform="rotate(36)">
          <use href="#dialY"></use>
          <text x="-18.5" y="0.35em">1</text>
        </g>
        <g class="dial" transform="rotate(72)">
          <use href="#dialY"></use>
          <text x="-18.5" y="0.35em">2</text>
        </g>
        <g class="dial" transform="rotate(108)">
          <use href="#dialY"></use>
          <text x="-18.5" y="0.35em">3</text>
        </g>
        <g class="dial" transform="rotate(144)">
          <use href="#dialY"></use>
          <text x="-18.5" y="0.35em">4</text>
        </g>
        <g class="dial" transform="rotate(180)">
          <use href="#dialY"></use>
          <text x="-18.5" y="0.35em">5</text>
        </g>
        <g class="dial" transform="rotate(216)">
          <use href="#dialY"></use>
          <text x="-18.5" y="0.35em">6</text>
        </g>
        <g class="dial" transform="r.........完整代码请登录后点击上方下载按钮下载查看