svg 實現圓環倒計時效果

2021-09-13 10:18:08 字數 964 閱讀 4741

一、先上效果圖，專案中需要圓環根據中間的倒計時相應遞減：

二、接下來看svg**實現：

（1）css 部分

#svgcontainer 


#svgcontainer > svg 


circle
（2）html 部分

10
（3）js 部分

//獲得第二個圓的引用


var circle = document.getelementsbytagname('circle')[1];


var inittime = 10;


var lefttime = setinterval(function() 


$("#lefttime").text(inittime);


var percent = inittime / 10;


//圓的周長


var perimeter = math.pi * 2 * 50;


//stroke-dasharray屬性的兩個引數和必須為周長


circle.setattribute('stroke-dasharray', perimeter * percent + ' ' + perimeter * (1 - percent));


}, 1000)
以上，即可實現動態圓環倒計時效果。

三、最後來看三個屬性：

tip：可以設定stroke-dashoffset與stroke-dasharray相同的值實現「畫線」效果

倒計時效果

案例分析 1.這個倒計時是不斷變化的，因此需要定時器來自動變化 setinterval 2.三個黑色盒子分別存放時分秒 3.三個黑色盒子利用innerhtml放入計算的小時分鐘秒數 4.第一次執行也是間隔毫秒數，因此剛重新整理頁面會有空白 5.最好採取封裝函式的方式，這樣可以先呼叫一次這個函式，防止...

JS實現倒計時效果

效果 倒計時效果 title div style head h 1 div m 2 div s 3 div 獲取時分秒 var hour document.queryselector h var minute document.queryselector m var second document....

前端倒計時效果

分析 charset utf 8 網易雲 title divspan style head type button class start 開啟定時器button type button class stop 暫停定時器button 距離2020年12月份四級考試還有p class day span...