SVG实现多彩圆环倒计时效果的示例代码


Posted in HTML / CSS onNovember 21, 2017

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

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

SVG实现多彩圆环倒计时效果的示例代码

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代码如下:

<div id="timeCountX" class="time-count-x">
    <svg width="440" height="440" viewBox="0 0 440 440" class="center">
        <defs>
            <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient1">
                <stop offset="0%" stop-color="#e52c5c"></stop>
                <stop offset="100%" stop-color="#ab5aea"></stop>
            </linearGradient>
           <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient2">
                <stop offset="0%" stop-color="#4352f3"></stop>
                <stop offset="100%" stop-color="#ab5aea"></stop>
            </linearGradient>
        </defs>
        <g transform="matrix(0,-1,1,0,0,440)">
            <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#f0f1f5" fill="none" stroke-dasharray="1069 1069"></circle>
            <circle cx="220" cy="220" r="170" stroke-width="50" stroke="url('#gradient1')" fill="none" stroke-dasharray="1069 1069"></circle>
            <circle cx="220" cy="220" r="170" stroke-width="50" stroke="url('#gradient2')" fill="none" stroke-dasharray="534.5 1069"></circle>
        </g>
    </svg>
    <span id="timeSecond" class="time-second"></span>
</div>

最后是相关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中,运行一下,体验体验实际效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3制作酷炫的三维相册效果
Jul 01 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
html5的localstorage详解
May 09 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
web字体加载方案优化小结
Nov 29 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 #HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 #HTML / CSS
html5实现移动端适配完美写法
Nov 16 #HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 #HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 #HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 #HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 #HTML / CSS
You might like
php遍历类中包含的所有元素的方法
2015/05/12 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
js切换div css注意的细节
2012/12/10 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
求网格中的黑点分布
2013/11/06 面试题
毕业生的自我鉴定
2013/10/29 职场文书
小学教师师德感言
2014/02/10 职场文书
教师教学评估方案
2014/05/09 职场文书
工商管理专业自荐信
2014/06/03 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技