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

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

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

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

SVG实现多彩圆环倒计时效果的示例代码的更多相关文章

  1. HTML5如何使用SVG的方法示例

    这篇文章主要介绍了HTML5如何使用SVG的方法示例,详细的介绍了什么是SVG以及如何使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

    这篇文章主要介绍了SVG实现多彩圆环倒计时效果的示例代码,本文主要用到了SVG的stroke-dasharray和stroke-dashoffset特性 ,具有一定的参考价值,有兴趣的可以了解一下

  3. 使用SVG实现提示框功能的示例代码

    这篇文章主要介绍了使用SVG实现提示框功能的示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. 将SVG图引入到HTML页面的实现

    这篇文章主要介绍了将SVG图引入到HTML页面的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. 使用html2canvas.js实现页面截图并显示或上传的示例代码

    这篇文章主要介绍了使用html2canvas.js实现页面截图并显示或上传的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  6. html svg生成环形进度条的实现方法

    这篇文章主要介绍了html svg生成环形进度条的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  7. 在Safari iOS 10中,SVG转换旋转90,180或270度不能在圆上工作

    我想使用SVG圆形元素创建一个甜甜圈图表,方法是设置stroke-dasharray和changestroke-dashoffset.SVG元素需要旋转270(或-90)度才能使图表“bar”从顶部开始.这是代码:http://jsfiddle.net/q3wb6gkq/旋转角度使用transform=“rotation(270,80,80)”中的第一个数字指定.问题是:当在iOS10上的Safa

  8. ios – 如何在Objective-C中从SVG数据创建汉字(日文字母)动画?

    我看过几个显示动画汉字的iPhone/iPad应用程序.对于那些不熟悉汉字的人来说,笔顺是汉字学习的一个非常重要的部分,所以如果你正在做一个显示动画笔画顺序的应用程序是必不可少的部分.所有我看到的应用程序,这样做,将KanjiVGproject作为笔画顺序数据的来源.经过一番研究,我发现KanjiVG项目为您提供了以XML编码的SVG格式的数据.从来没有编程过的图形,我很失去在哪里继续寻找信息.我想我需要:>将XML解析为SVG.>渲染SVG.…

  9. ios Safari上的SVG视窗高度问题

    使用svg时,我注意到ios有一个奇怪的事情.svgs似乎在所有其他浏览器中都可以正常运行,但是在Safariipad/iphone上,视窗在svg的顶部和底部有一些奇怪的空间.有没有人遇到过这个,你能解决它吗?

  10. iOS Safari的SVG文件大小限制

    附:当我直接浏览SVG文件而不是通过HTML页面时,我能够查看图像.我也可以在IFRAME中查看SVG文件.但不使用img标签.解决方法我制作了一些不同大小的测试SVG文件.它们看起来像这样:使用browserstack模拟iPhone5和第三代iPad,我发现故障点介于2200×2200和2400×2400像素之间.500万像素的限制对应于2289×2289的图像,因此这与Duopixel’scomment一致,表明渲染的大小是重要的.

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部