一、先上效果圖,專案中需要圓環根據中間的倒計時相應遞減:
二、接下來看svg**實現:
(1)css 部分
(2)html 部分#svgcontainer
#svgcontainer > svg
circle
(3)js 部分10
以上,即可實現動態圓環倒計時效果。//獲得第二個圓的引用
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...