网站建设都需要提供什么资料,营销qq怎么申请,wordpress代码运行插件,网页设计存在的问题及分析圆环倒计时我们经常见到#xff0c;实现的方法也有很多种。但是本文将介绍一种全新的实现方式#xff0c;使用SVG来实现倒计时功能。本文主要用到了SVG的stroke-dasharray和stroke-dashoffset特性。下图是倒计时运行效果#xff1a;SVG倒计时案例下面说说相关的实现代码。cs…圆环倒计时我们经常见到实现的方法也有很多种。但是本文将介绍一种全新的实现方式使用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代码如下最后是相关JavaScript代码var eleCirclesdocument.querySelectorAll(#timeCountX circle);var eleTimeSecdocument.getElementById(timeSecond);var perimeterMath.PI*2*170;var circleInitfunction(){if(eleCircles[1]){eleCircles[1].setAttribute(stroke-dasharray,1069 1069)}if(eleCircles[2]){eleCircles[2].setAttribute(stroke-dasharray,perimeter/2 1069)}eleTimeSec.innerHTML};var timerTimeCountnull;var fnTimeCountfunction(b){if(timerTimeCount){return}var bb||10;var afunction(){var cb/10;if(eleCircles[1]){eleCircles[1].setAttribute(stroke-dasharray,perimeter*c 1069)}if(eleCircles[2]b5){eleCircles[2].setAttribute(stroke-dasharray,perimeter*c 1069)}if(eleTimeSec){eleTimeSec.innerHTMLb}b--;if(b0){clearInterval(timerTimeCount);timerTimeCountnull;alert(时间到);circleInit()}};a();timerTimeCountsetInterval(a,1000)};fnTimeCount();整个案例的代码非常少有喜欢的朋友可以将代码保存到html中运行一下体验体验实际效果。以上就是本文的全部内容希望对大家的学习有所帮助也希望大家多多支持脚本之家。
