css+js实现纯指针显示时间时钟效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：css+js实现纯指针显示时间时钟效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">



    <style>
        html,
        body {
          height: 100%;
          padding: 0;
          margin: 0;
          box-sizing: border-box;
        }
        
        body {
          background-color: #F2F3EB;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 32px;
        }
        
        .clock {
          height: 90vh;
          width: 90vh;
          position: relative;
        }
        
        .ibm {
          width: 25%;
          max-width: 96px;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          fill: #323232;
        }
        
        .flower-clock,
        .flower-clock svg {
          width: 100%;
          height: 100%;
        }
        .flower-clock svg {
          display: block;
          transform: rotate(180deg);
          transition-property: transform;
          transition-timing-function: ease-in-out;
        }
        .flower-clock svg.enter {
          transform: rotate(-180deg);
        }
        
        .pins {
          transform-origin: center center;
        }
        
        .pin-head {
          fill: #323232;
        }
        .pin-line {
          stroke: #323232;
        }
        
        .petals {
          isolation: isolate;
          transform-origin: center center;
        }
        
        .petal {
          mix-blend-mode: multiply;
        }
        .petal:nth-child(2) {
          fill: #FF5C49;
        }
        .petal:nth-child(1) {
          fill: #00B6CB;
        }
    </style>



</head>

<body translate="no">
    <div class="clock">
        <svg class="ibm" viewBox="0 0 157 65">
        <title>IBM</title>
        <path d="M111.357,0.957480774 L121.787,31.238 L132.219,0.957480774 L156.6,0.957480774 L156.6,13.4574808 L147.89,13.4574808 L147.89,51.7444808 L156.593,51.745101 L156.593,64.242 L134.84,64.242 L134.84,51.745101 L134.84,51.7444808 L134.84,26.4574808 L134.802,26.4574808 L121.787,64.238 L108.773,26.4574808 L108.734,26.4574808 L108.734,51.7524808 L108.753,51.753101 L108.753,64.25 L87,64.25 L87,51.753101 L95.683,51.7524808 L95.683,13.4574808 L87,13.4574808 L87,0.957480774 L111.357,0.957480774 Z M66.5,1 C75.8888407,1 83.5,8.61115925 83.5,18 C83.5,24.1188498 80.2672922,29.4826603 75.4166106,32.4766973 C80.5438534,35.4036689 84,40.9232213 84,47.25 C84,56.6388407 76.3888407,64.25 67,64.25 C66.5967464,64.25 66.1967721,64.2359595 65.8005393,64.2083406 L65.8,64.25 L34.8,64.25 L34.8,51.753101 L43.49,51.753 L43.49,13.25 L34.8,13.25 L34.8,1.00303895 L65.8,1.00303895 L65.800263,1.01413919 C66.0323403,1.00474331 66.2656162,1 66.5,1 Z M30.5,1.00303895 L30.5,13.25 L21.745,13.2490389 L21.745,52.0030389 L30.5,52.0030389 L30.5,64.25 L0,64.25 L0,52.0030389 L8.698,52.0030389 L8.698,13.2490389 L0,13.25 L0,1.00303895 L30.5,1.00303895 Z M68.8,38.85 L56.5,38.85 L56.5,51.75 L68.8,51.75 L68.8,38.85 Z M68.8,13.45 L56.5,13.45 L56.5,26.35 L68.8,26.35 L68.8,13.45 Z"></path>
    </svg>
        <div class="flower-clock"></div>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.v5.js"></script>
    <script>
        class FlowerClock {// dependency on d3
          constructor(data, options) {
            const minRadius = 270;
            const maxRadius = 1000;
        
            // options
            this.options = {
              selector: '.flower-clock',
              radius: Math.min(Math.max(Math.min(window.innerWidth, window.innerHeight), minRadius), maxRadius) * .4, // radius = max
              pinHeadRadius: 3, // pinHeadRadius * 2 = min
              duration: 1250,
              padding: 10,
              petalWidth: 15,
              entranceDelay: 0, // [0, 0],
              easingIn: d3.easeBackOut.overshoot(1) };
        
        
            // additional options
            this.options.reducedDuration = this.options.duration / 3;
            this.updateData();
        
            // initialize the chart
            this.initChart();
          }
        
          updateChart() {
            this.updateData();
            this.managePetals();
            this.managePins();
          }
        
          updateData() {
            this.data = this.getDateTime();
            this.options.delayInc = this.options.duration * .6 / this.data.length;
          }
        
          initChart() {
            const { selector, radius, duration, padding } = this.options;
            const measurements = (radius + padding) * 2;
            const viewBox = `0 0 ${measurements} ${measurements}`;
        
            const container = d3.select(selector);
        
            container.selectAll('svg').remove(); // incase any exist remove them
        
            // create the svg
            this.chart = container.append('svg').
            attr('viewBox', viewBox).
            attr('style', `transition-duration: ${duration}ms;`);
        
            this.initPetals();
            this.initPins();
        
            setTimeout(() => this.enterRotation(), 0); // entry animation
          }
        
          initPetals() {// create a group to contain the "flower petals"
            const { radius, petalWidth, padding } = this.options;
        
            t.........完整代码请登录后点击上方下载按钮下载查看