一，用SVG实现圆环倒计时

<svg width="440" height="440" viewBox="0 0 440 440" className="center">
  <defs>
    <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient1">
      <stop offset="0%" stopColor="#4DF2F1" />
      <stop offset="100%" stopColor="#55EC92" />
    </linearGradient>
  </defs>
  <g transform="matrix(0,-1,1,0,0,440)">
    <circle
      cx="220"
      cy="220"
      r="170"
      strokeWidth="20"
      stroke="#20242B"
      fill="none"
      strokeDasharray="1069 1069"
    />
    <circle
      cx="220"
      cy="220"
      r="170"
      strokeWidth="20"
      stroke="url('#gradient1')"
      fill="none"
      strokeDasharray={`${((timeNumAll - timeNum) / timeNumAll) * c} ${Math.ceil(Math.PI * 2 * 170)}`}
      style={{ transition: 'stroke-dasharray 1s linear' }}
    />
  </g>
</svg>