はカウントし、私はカウントし、このような進行状況を表示タイマーを必要とjqueryの

-2

で進行状況を表示タイマーを必要とします。どのようにjQueryでこれを行うことができますか？はカウントし、私はカウントし、このような進行状況を表示タイマーを必要とjqueryの

2012-01-13 Ashutosh Mishra

なぜ、誰も私を助けることができない場合は-1をしないでください。それは努力の欠如を示したので-1 –

-1です。下の票は、誰かにあなたのためにそれをするように依頼するのではなく、問題についてもっと考えるよう促すはずです –

潜在的な重複http://stackoverflow.com/questions/8136673/animated-circular-countdown-timer-using-html-css - または - javascript – kamui

キャンバスを使用して最新のブラウザに実装できます。私は "弧" セクションの下 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>要素の内側にあるされていないこと。これは、フォールバックロジックを実装するように行われます。キャンバス要素をサポートしていない古いブラウザでは、少なくともカウントダウンを表示できます。このような最適化が必要ない場合、このフィドルはテキストとグラフィックスのキャンバスのみを使用します：http://jsfiddle.net/9L48R/

私はjQuery構文でjavascript文を置き換えます。

出典

2012-01-13 10:48:57 fcalderan

はカウントし、私はカウントし、このような進行状況を表示タイマーを必要とjqueryの

答えて

関連する問題