html 圆环实现多种颜色,SVG实现多彩圆环倒计时效果的示例代码

- 日理万妓 2022-10-07 04:57 233阅读 0赞

圆环倒计时我们经常见到，实现的方法也有很多种。但是本文将介绍一种全新的实现方式，使用SVG来实现倒计时功能。

本文主要用到了SVG的stroke-dasharray和stroke-dashoffset特性。下图是倒计时运行效果：

![b7a458d6db66556929a4ee0910f20140.png][]

SVG倒计时案例

下面说说相关的实现代码。css实现代码如下：

svg \{

transform: rotate(-0.05deg);

\}

circle \{

transition: stroke-dasharray .2s;

\}

.time-count-x \{

line-height: 1.5;

position: relative;

\}

.time-second \{

position: absolute;

top: 50%; left: 0; right: 0;

margin-top: -.75em;

text-align: center;

font-size: 100px;

\}

相关html代码如下：

最后是相关JavaScript代码：

var eleCircles=document.querySelectorAll("\#timeCountX circle");

var eleTimeSec=document.getElementById("timeSecond");

var perimeter=Math.PI\*2\*170;

var circleInit=function()\{

if(eleCircles\[1\])\{

eleCircles\[1\].setAttribute("stroke-dasharray","1069 1069")

\}

if(eleCircles\[2\])\{

eleCircles\[2\].setAttribute("stroke-dasharray",perimeter/2+" 1069")

\}

eleTimeSec.innerHTML=""

\};

var timerTimeCount=null;

var fnTimeCount=function(b)\{

if(timerTimeCount)\{

return

\}

var b=b||10;

var a=function()\{

var c=b/10;

if(eleCircles\[1\])\{

eleCircles\[1\].setAttribute("stroke-dasharray",perimeter\*c+" 1069")

\}

if(eleCircles\[2\]&&b<=5)\{

eleCircles\[2\].setAttribute("stroke-dasharray",perimeter\*c+" 1069")

\}

if(eleTimeSec)\{

eleTimeSec.innerHTML=b

\}

b--;

if(b<0)\{

clearInterval(timerTimeCount);

timerTimeCount=null;

alert("时间到！");

circleInit()

\}

\};

a();

timerTimeCount=setInterval(a,1000)

\};

fnTimeCount();

整个案例的代码非常少，有喜欢的朋友可以将代码保存到html中，运行一下，体验体验实际效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

[b7a458d6db66556929a4ee0910f20140.png]: /images/20221005/4fe99b4ebd9b482cbe36e37b7e0933f5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，233人围观）

还没有评论，来说两句吧...

相关阅读

相关自定义倒计时圆环动画——打造令人惊叹的效果

自定义倒计时圆环动画——打造令人惊叹的效果在Android应用开发中，为了吸引用户的注意力并提供良好的用户体验，我们经常需要实现一些独特而酷炫的动画效果。本文将向您展示如何

我不是女神ヾ/ 2023年10月15日 09:25/ 0 赞/ 128 阅读

相关 svg实现圆环进度条

开源实现：[https://github.com/lugolabs/circles][https_github.com_lugolabs_circles] 自行实现：圆环与s

矫情吗；*/ 2023年10月11日 11:22/ 0 赞/ 56 阅读

相关 QML实现圆环颜色选择器

话不多说，先上效果图： ![在这里插入图片描述][20190922155228899.gif] 以上demo完整项目源码路径： https://github.com

青旅半醒/ 2023年10月11日 09:57/ 0 赞/ 39 阅读

相关 css画圆、半圆、椭圆、圆环

css画圆在css中利用border-radius可以画出我们想要的圆 border-radius属性可以设置盒子四边的圆弧。从上左，上右，下右，下左顺时针依

╰+哭是因爲堅強的太久メ/ 2023年08月17日 16:53/ 0 赞/ 148 阅读

相关 echarts多层圆环

option = { tooltip: { show: false, trigger: 'item'

怼烎@/ 2023年01月15日 12:30/ 0 赞/ 168 阅读

相关 html 圆环实现多种颜色,SVG实现多彩圆环倒计时效果的示例代码

圆环倒计时我们经常见到，实现的方法也有很多种。但是本文将介绍一种全新的实现方式，使用SVG来实现倒计时功能。本文主要用到了SVG的stroke-dasharray和stro

- 日理万妓/ 2022年10月07日 04:57/ 0 赞/ 234 阅读

相关【百度echarts】实现圆环进度条-代码示例

效果图 ![这里写图片描述][SouthEast] 代码 <!DOCTYPE html> <html lang="en"> <head>

迈不过友情╰/ 2022年07月12日 06:18/ 0 赞/ 1481 阅读

相关圆环染色问题

一个圆环分成N分，有M种颜色，用这M种颜色为他们涂色,相邻的颜色不能相同.求共有多少涂色方法? 输入 5 5 输出 1020 include<iostream

ゝ一世哀愁。/ 2022年05月29日 06:07/ 0 赞/ 210 阅读

相关【百度echarts】实现圆环进度条-代码示例代码demo

【百度echarts】实现圆环进度条-代码示例 <!DOCTYPE html> <html lang="en"> <head> <me

￡神魔★判官ぃ/ 2022年05月10日 03:16/ 0 赞/ 259 阅读

相关 svg 实现圆弹性特效,基于圆线圆案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

- 日理万妓/ 2021年07月24日 13:31/ 0 赞/ 722 阅读