نموذج كود SVG لتنفيذ تأثير العد التنازلي للحلقة الملونة

غالبًا ما نرى العد التنازلي للحلقات، وهناك طرق عديدة لتنفيذها. لكن هذه المقالة ستقدم طريقة تنفيذ جديدة باستخدام SVG لتنفيذ وظيفة العد التنازلي.

تستخدم هذه المقالة بشكل أساسي ميزات السكتة الدماغية-داشاراي وإزاحة السكتة الدماغية لـ SVG. الصورة أدناه توضح تأثير تشغيل العد التنازلي:

حالة العد التنازلي SVG

دعونا نتحدث عن رمز التنفيذ ذي الصلة. رمز تنفيذ CSS هو كما يلي:

 svg { تحويل: تدوير (-0.05deg)؛} دائرة { انتقال: السكتة الدماغية-dasharray .2s؛}.time-count-x { ارتفاع الخط: 1.5؛ }.time-sec { الموضع: مطلق؛ أعلى: 50%؛ اليسار: 0؛ اليمين: 0؛ محاذاة النص: 100 بكسل؛}

رمز 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= التدرج1> <إزاحة التوقف=0% لون التوقف=#e52c5c></stop> <إزاحة التوقف=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 تحويل = مصفوفة (0,-1,1,0,0,440)> <circle cx=220 cy=220 r=170 عرض السكتة الدماغية=50 السكتة الدماغية=#f0f1f5 ملء=لا شيء السكتة الدماغية-dasharray=1069 1069></circle> <دائرة cx=220 cy=220 r=170 عرض الحد=50 السكتة الدماغية=url('#gradient1') ملء=لا شيء السكتة الدماغية-dasharray=1069 1069></circle> <circle cx=220 cy=220 r=170 عرض السكتة الدماغية=50 السكتة الدماغية=url('#gradient2') ملء= لا شيء السكتة الدماغية-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(السكتة الدماغية-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) { العودة } 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=null; تنبيه(انتهى الوقت!); ) ;

تحتوي الحالة بأكملها على القليل جدًا من التعليمات البرمجية، ويمكن للأصدقاء الذين يحبونها حفظ الكود في html وتشغيله لتجربة التأثير الفعلي.

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.