css+js实现24个小时钟指针走动显示数字时间代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：css+js实现24个小时钟指针走动显示数字时间代码，24个小时钟每一分钟走动一次拼筹显示出当前的时分。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700'>

    <style>
        html {
          width: 100%;
          height: 100%;
        }
        
        body {
          min-height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-family: "Source Sans Pro", sans-serif;
          color: #4a4a4a;
          cursor: default;
        }
        
        .art {
          cursor: zoom-in;
          margin: 5vw 0;
        }
        
        .art--full {
          cursor: zoom-out;
        }
        
        .text {
          margin-bottom: 5vw;
          text-align: center;
        }
        
        a {
          color: #8a8a8a;
          text-decoration: none;
        }
        
        .digit {
          float: left;
        }
        
        .clock {
          --small-hand: -135deg;
          --large-hand: -45deg;
          margin: 0.3vw;
          width: 10vw;
          height: 10vw;
          border-radius: 50%;
          box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
          float: left;
        }
        .clock:nth-of-type(2n+1) {
          clear: left;
        }
        
        .clock-smallHand,
        .clock-largeHand {
          transform-origin: 50px center;
          transition: transform 10s;
        }
        
        .clock-smallHand {
          transform: rotateZ(var(--small-hand));
        }
        
        .clock-largeHand {
          transform: rotateZ(var(--large-hand));
        }
        
        .s-hidden {
          display: none;
        }
        
        .trigger {
          position: fixed;
          bottom: 0;
          width: 25%;
          height: 5vw;
          cursor: help;
        }
        
        .trigger--left {
          left: 0;
        }
        
        .trigger--right {
          right: 0;
        }
    </style>




</head>

<body>
    <div class="art">
        <div class="digit">
            <svg class="clock clock--0" width="100" height="100" viewBox="0 0 100 100">
      <path class="clock-smallHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L95,53 L95,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
      <path class="clock-largeHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L100,53 L100,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
    </svg>
            <svg class="clock clock--1" width="100" height="100" viewBox="0 0 100 100">
      <path class="clock-smallHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L95,53 L95,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
      <path class="clock-largeHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L100,53 L100,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
    </svg>
            <svg class="clock clock--2" width="100" height="100" viewBox="0 0 100 100">
      <path class="clock-smallHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L95,53 L95,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
      <path class="clock-largeHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L100,53 L100,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
    </svg>
            <svg class="clock clock--3" width="100" height="100" viewBox="0 0 100 100">
      <path class="clock-smallHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L95,53 L95,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
      <path class="clock-largeHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L100,53 L100,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
    </svg>
            <svg class="clock clock--4" width="100" height="100" viewBox="0 0 100 100">
      <path class="clock-smallHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L95,53 L95,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
      <path class="clock-largeHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L100,53 L100,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
    </svg>
            <svg class="clock clock--5" width="100" height="100" viewBox="0 0 100 100">
      <path class="clock-smallHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L95,53 L95,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
      <path class="clock-largeHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L100,53 L100,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
    </svg>
        </div>
        <div class="digit">
            <svg class="clock clock--6" width="100" height="100" viewBox="0 0 100 100">
      <path class="clock-smallHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L95,53 L95,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
      <path class="clock-largeHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L100,53 L100,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
    </svg>
            <svg class="clock clock--7" width="100" height="100" viewBox="0 0 100 100">
      <path class="clock-smallHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L95,53 L95,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
      <path class="clock-largeHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L100,53 L100,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
    </svg>
            <svg class="clock clock--8" width="100" height="100" viewBox="0 0 100 100">
      <path class="clock-smallHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L95,53 L95,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
      <path class="clock-largeHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L100,53 L100,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
    </svg>
            <svg class="clock clock--9" width="100" height="100" viewBox="0 0 100 100">
      <path class="clock-smallHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L95,53 L95,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
      <path class="clock-largeHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L100,53 L100,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
    </svg>
            <svg class="clock clock--10" width="100" height="100" viewBox="0 0 100 100">
      <path class="clock-smallHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L95,53 L95,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
      <path class="clock-largeHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L100,53 L100,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
    </svg>
            <svg class="clock clock--11" width="100" height="100" viewBox="0 0 100 100">
      <path class="clock-smallHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L95,53 L95,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
      <path class="clock-largeHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L100,53 L100,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
    </svg>
        </div>
        <div class="digit">
            <svg class="clock clock--12" width="100" height="100" viewBox="0 0 100 100">
      <path class="clock-smallHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L95,53 L95,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
      <path class="clock-largeHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L100,53 L100,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
    </svg>
            <svg class="clock clock--13" width="100" height="100" viewBox="0 0 100 100">
      <path class="clock-smallHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L95,53 L95,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
      <path class="clock-largeHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L100,53 L100,47 L50,47 Z" stroke="none" fill="#4A4A4A" fill-rule="evenodd"></path>
    </svg>
            <svg class="clock clock--14" width="100" height="100" viewBox="0 0 100 100">
      <path class="clock-smallHand" d="M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L95,53 L95,47 L50,47 Z" stroke="none" fill="#4A4A4A.........完整代码请登录后点击上方下载按钮下载查看