SVG实现多色环倒计时的实例代码

我们经常看到倒计时，有很多方法可以实现，但是本文将介绍一种新的实现方法，用SVG实现倒计时功能。

本文主要采用脑卒中和脑卒中dashoffset dasharray SVG的特点。下图是倒计时操作的效果：
SVG的倒计时情况

下面我们来讨论一下相关的实现代码：
{ SVG
变换：旋转（- 0.05deg）；
}
循环{
过渡：stroke-dasharray.2s；
}
{。time-count-x
线高度：1.5；
职位：相对；
}
{时间秒
位置：绝对；
顶部：50%；左：0；右：0；
保证金：- 75em顶部；
文本对齐：中心；
字体大小：100px；
}
相关的HTML代码如下所示：



最后一个是相关的Javaｓｃｒｉｐｔ代码：
无功elecircles = document.queryselectorall（# timecountx圈）；
无功eletimesec = document.getelementbyid（timesecond ）；
var周长=数学.圆周率* 2 * 170；
circleinit =函数（）{ var
如果（elecircles { 1 }）{
elecircles { 1 }。setAttribute（中风dasharray
}
如果（elecircles { 2 }）{
elecircles { 2 }。setAttribute（中风dasharray
}
eletimesec .innerHTML =
}；
无功timertimecount = null；
无功fntimecount =函数（B）{
如果（timertimecount）{
返回
}
var b = b | | 10；
var =函数（）{
var C = 10；
如果（elecircles { 1 }）{
elecircles { 1 }。setAttribute（中风dasharray
}
如果（elecircles { 2 } b < = 5）{
elecircles { 2 }。setAttribute（中风dasharray
}
如果（eletimesec）{
eletimesec .innerHTML = B
}
B；
如果（b＜0）{
ClearInterval（timertimecount）；
timertimecount = null；
提醒（时间）！；
CircleInit（）
}
}；
（a）；
timertimecount = setInterval（一，1000）
}；
FnTimeCount（）；
整个案例中的代码非常小，而且最喜欢的朋友可以将代码保存在HTML中，然后运行它来体验实际效果。

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。