Kita sering melihat hitungan mundur berdering, dan ada banyak cara untuk menerapkannya. Namun artikel ini akan memperkenalkan metode implementasi baru, menggunakan SVG untuk mengimplementasikan fungsi hitung mundur.
Artikel ini terutama menggunakan fitur stroke-dasharray dan stroke-dashoffset dari SVG. Gambar di bawah menunjukkan efek hitung mundur berjalan:
Kasus hitung mundur SVG
Mari kita bicara tentang kode implementasi yang relevan. Kode implementasi cssnya adalah sebagai berikut:
svg { transformasi: putar(-0,05deg);}lingkaran { transisi: stroke-dasharray .2s;}.hitungan waktu-x { tinggi garis: 1,5; posisi: relatif;}.waktu-detik { posisi: absolut; atas: 50%; kiri: 0; kanan: 0; margin-atas: -.75em; perataan teks: tengah;Kode html yang relevan adalah sebagai berikut:
<div id=timeCountX class=time-count-x> <svg lebar=440 tinggi=440 viewBox=0 0 440 440 class=center> <defs> <linearGradient x1=1 y1=0 x2=0 y2=0 id= gradien1> <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)> <lingkaran cx=220 cy=220 r=170 lebar guratan=50 guratan=#f0f1f5 isi=tidak ada guratan-dasharray=1069 1069></circle> <lingkaran cx=220 cy=220 r=170 lebar guratan=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= tidak ada stroke-dasharray=534.5 1069></circle> </g> </svg> <span id=timeSecond class=waktu-detik></span></div>Terakhir, kode JavaScript yang relevan:
var eleCircles=document.querySelectorAll(#timeCountX lingkaran);var eleTimeSec=document.getElementById(timeSecond);var perimeter=Math.PI*2*170;var lingkaranInit=fungsi(){ 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) { kembali } var b=b||10; var a=fungsi(){ 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) } jika(eleTimeSec){ eleTimeSec.innerHTML=b } b--; jika(b<0){ clearInterval(timerTimeCount); timerTimeCount=null; peringatan(waktu habis!); lingkaranInit() }; a(); ) ;Seluruh kasus memiliki kode yang sangat sedikit. Teman yang menyukainya dapat menyimpan kode ke dalam html dan menjalankannya untuk merasakan efek sebenarnya.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.