需要其計數計時器，並顯示在jQuery的

-2

進步，我需要其計數計時器，並取得進展是這樣的：需要其計數計時器，並顯示在jQuery的

enter image description here

，並在中心會有一個計數器計數，其爲2分鐘。我怎麼能在jQuery中做到這一點？

2012-01-13 Ashutosh Mishra

爲什麼-1，如果沒有人可以幫我，那麼PLZ不要做-1 – 2012-01-13 09:01:15

-1，因爲它表現出缺乏努力。投票應該會鼓勵你更多地思考問題，而不是隻是要求別人爲你做這件事 – 2012-01-13 09:05:14

潛在的重複http://stackoverflow.com/questions/8136673/animated-circular-countdown-timer-using-html-css - 或 - javascript – kamui 2012-01-13 09:06:57

你可以在使用畫布的現代瀏覽器上實現它。我看了看 https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes 下的「弧線」部分，我來到這個解決方案（小提琴下面鏈接）

HTML5

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Canvas circular timer</title> 
    </head> 
    <body> 
     <div> 
      <canvas id="timer" width="100" height="100"></canvas> 
      <span id="counter">20</span> 
     </div> 
    </body> 
</html>

CSS

canvas { 
    -webkit-transform : rotate(-90deg); 
    -moz-transform : rotate(-90deg); 
} 

div { position: relative; z-index: 1; height: 100px; width: 100px; } 
div span { 
    position : absolute; 
    z-index : 1; 
    top  : 50%; 
    margin-top : -0.6em; 
    display : block; 
    width  : 100%; 
    text-align : center; 
    height  : 1.5em; 
    color  : #0e0; 
    font  : 1.5em Arial; 
}

Javascript

window.onload = function() { 
    var canvas = document.getElementById('timer'), 
     seconds = document.getElementById('counter'), 
     ctx  = canvas.getContext('2d'), 
     sec  = seconds.innerHTML | 0, 
     countdown = sec; 

    ctx.lineWidth = 6; 
    ctx.strokeStyle = "#00EE00"; 

    var 
    startAngle = 0, 
    time  = 0, 
    intv  = setInterval(function(){ 

     var endAngle = (Math.PI * time * 2/sec); 
     ctx.arc(50, 50, 35, startAngle , endAngle, false); 
     startAngle = endAngle; 
     ctx.stroke(); 

     seconds.innerHTML = countdown--; 

     if (++time > sec) { clearInterval(intv); } 

    }, 1000); 

}

您可以看到的jsfiddle例如：http://jsfiddle.net/2qyEv/（使用Mozilla和WebKit試過）

注意，剩餘秒數不寫入內部帆布，而是定位在畫布上<span>元素中。這樣做 - 實現回退邏輯 - 不支持canvas元素的舊瀏覽器至少可以顯示倒計時。如果你不需要這種優化，這個小提琴只使用一個文本和圖形的畫布：http://jsfiddle.net/9L48R/

我留給你替換JavaScript語句與jQuery構造。

來源

2012-01-13 10:48:57 fcalderan

需要其計數計時器，並顯示在jQuery的

回答

相關問題