使用HTML，CSS或javascript的动画循环倒计时定时器 [英] Animated circular countdown timer using HTML, CSS, or javascript

问题描述

我想创建一个划分为4个季度的圆，然后将每个季度细分为多个段。每个季度都有不同的背景颜色（或背景图像）。


圆圈将作为倒计时器，每个段将持续约5秒钟（见附图的想法我在找什么）。计时器只会在发出javascript命令时启动（也应该可以暂停和倒转计时器）。

I want to create a circle that is sectioned into 4 quarters, and each quarter is then sub-divided into segments. Each quarter will have a different background colour (or background image).

The circle will serve as a countdown timer, where each segment will last around 5 seconds (see attached image for idea of what I'm looking for). The timer will only start when a javascript command has been issued (it should also be possible to pause, and rewind the timer).

段之间的转换不一定是平滑的动画（即转换到细分可以简单地涉及前一个细分的背景颜色变成白色）

The transition between the segments does not have to be a smooth animation (i.e. transitioning to a segment can simply involve the previous segment background colour turning white)

有几个警告：

- 每个象限中的段数可以改变，因此每个段的大小必须是灵活的

- 象限顺序可以改变蓝色，橙色，红色，绿色...我们可以有橙色，红色，紫色等等）

- 它必须在iPhone和现有的Android手机上工作正在查看Raphael和SVG，但这在Android上似乎不受支持。）

There are a few caveats:
- The number of segments in each quadrant can change, so the size of each segment has to be flexible
- The order of quadrants can change (i.e. instead of blue, orange, red, green... we could have orange, red, purple, etc etc)
- It has to work on iPhone and existing Android phones (I was looking at Raphael and SVG, but this doesn't seem to be supported on Android.)

我对如何最好地解决这个问题感到失望，所以非常感谢您听到建议或者查看示例（尽管我无法提供源代码）

I'm at a loss at how best to tackle this problem, so would be grateful to hear suggestions or even see examples (although I haven't been able to source any)

推荐答案

实现所需结果的最佳方法是使用 canvas 元素并使用javascript绘制它，或使用动画图像以及静态图像和一个JS在两种类型之间切换。

I think the best way of achieving the result you want is to use a canvas element and draw on it by using javascript or to use animated images along with static images and a little JS to switch between the two types.

这篇关于使用HTML，CSS或javascript的动画循环倒计时定时器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！