เรามักจะเห็นการนับถอยหลังของเสียงเรียกเข้า และมีหลายวิธีในการนำไปใช้ แต่บทความนี้จะแนะนำวิธีการนำไปใช้ใหม่ โดยใช้ SVG เพื่อใช้ฟังก์ชันนับถอยหลัง
บทความนี้ใช้คุณสมบัติ stroke-dashharray และ stroke-dashoffset ของ SVG เป็นหลัก ภาพด้านล่างแสดงผลการนับถอยหลัง:
กรณีนับถอยหลัง SVG
เรามาพูดถึงโค้ดการใช้งานที่เกี่ยวข้องกันดีกว่า รหัสการใช้งาน css เป็นดังนี้:
svg { แปลง: หมุน (-0.05deg);} วงกลม { การเปลี่ยนแปลง: stroke-dasharray .2s;}.time-count-x { line-height: 1.5; ตำแหน่ง: สัมพันธ์;}.time-second { ตำแหน่ง: แน่นอน; ด้านบน: 50%; ซ้าย: 0; ขวา: 0; ระยะขอบด้านบน: -.75em;รหัส 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% หยุดสี=#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 stroke-width=50 stroke=#f0f1f5 fill=none stroke-dasharray=1069 1069></circle> <วงกลม cx=220 cy=220 r=170 ความกว้างของเส้นขีด=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= ไม่มีจังหวะ dasharray=534.5 1,069></circle> </g> </svg> <span id=timeSecond class=time-second></span></div>ในที่สุดโค้ด JavaScript ที่เกี่ยวข้อง:
var eleCircles=document.querySelectorAll(#timeCountX วงกลม);var eleTimeSec=document.getElementById(timeSecond);var perimeter=Math.PI*2*170;var circleInit=function(){ if(eleCircles[1]){ eleCircles[ 1].setAttribute(จังหวะ-dashharray,1069 1069) } if(eleCircles[2]){ eleCircles[2].setAttribute(จังหวะ-dasharray,ปริมณฑล/2+ 1,069) } 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(จังหวะ-dasharray,เส้นรอบวง*c+ 1069) } if(eleCircles[2]&&b<=5){ eleCircles[2].setAttribute(จังหวะ-dasharray,เส้นรอบวง* c+ 1,069) } ถ้า (eleTimeSec){ eleTimeSec.innerHTML=b } b--; if(b<0){ clearInterval(timerTimeCount); timerTimeCount=null; alert(หมดเวลาแล้ว!); ) ;เคสทั้งหมดมีโค้ดน้อยมาก เพื่อนๆ ที่ชื่นชอบสามารถบันทึกโค้ดเป็น html แล้วรันเพื่อสัมผัสประสบการณ์จริงได้
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network