0

カウントダウンタイマーが機能していますが、それを複数回表示する必要があるだけで、複数のカウンターで機能させることができないようです。

作業コード: http://jsfiddle.net/3RpvJ/

timer1 timer2 enz のような div をさらに作成しようとしました。しかし、私はそれを機能させることができないようです

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

ctx.lineWidth = 8;
ctx.strokeStyle = "#528f20";

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


    var endAngle = (Math.PI * time * 2 / sec);
    ctx.arc(65, 35, 30, startAngle , endAngle, false);
    ctx.clearRect(0, 0, 200, 200);

    startAngle = endAngle;
    ctx.stroke();

    countdown--;
    if ( countdown > 60){
    seconds.innerHTML = Math.floor(countdown/60);
    seconds.innerHTML += ":" + countdown%60;
    }
    else{
    seconds.innerHTML = countdown;
    }

    if (++time > sec,countdown == 0 ) 
    { 
        clearInterval(intv),
        $("#timer, #counter").remove(),
        $("#timers").prepend('<img id="theImg" src="http://ivojonkers.com/votify/upvote.png" />'); 
    }



}, 10);

} </p>

4

1 に答える 1

1

http://jsfiddle.net/3RpvJ/5/

function Timer(dur, par, can, cnt) {
    var parent = $(par),
        canvas = can ? $(can, parent)[0] : $('.timer', parent)[0],
        seconds = cnt ? $(cnt, parent)[0] : $('.counter', parent)[0],
        //ctx = canvas.getContext('2d'),
        sec = dur,
        countdown = sec;    

    if (!canvas)
        canvas = $("<canvas>").addClass('timer')
            .attr('width', 100).attr('height', 100).appendTo(parent)[0];

    if (!seconds)
        seconds = $("<span>").addClass('counter').appendTo(parent)[0];

    var ctx = canvas.getContext('2d');
    ctx.lineWidth = 8;
    ctx.strokeStyle = "#528f20";

    var startAngle = 0,
        time = 0,
        intv = setInterval(function() {
            var endAngle = (Math.PI * time * 2 / sec);
            ctx.arc(65, 35, 30, startAngle, endAngle, false);
            ctx.clearRect(0, 0, 200, 200);

            startAngle = endAngle;
            ctx.stroke();

            countdown--;
            if (countdown > 60) {
                seconds.innerHTML = Math.floor(countdown / 60);
                seconds.innerHTML += ":" + countdown % 60;
            }
            else {
                seconds.innerHTML = countdown;
            }

            if (++time > sec, countdown == 0) {
                clearInterval(intv);
                $(canvas).remove();
                $(seconds).remove();
                $(par).prepend('<img id="theImg" src="http://ivojonkers.com/votify/upvote.png" />');
            }
        }, 10);
}

$(function() {
    Timer(180, '#timer1');
    Timer(240, '#timer2');
    Timer(300, '#timer3');
    Timer(360, '#timer4');
});​

html:

<div id="timers">
    <div id="timer1" class="time">
    </div>
    <div id="timer2" class="time">
    </div>
    <div id="timer3" class="time">
    </div>
    <div id="timer4" class="time">
    </div>
</div>

CSS:

#timers canvas {
   -webkit-transform : rotate(-90deg);  
   -moz-transform : rotate(-90deg);
}
body{
    background-color: #242424;
}
#timers .time{
    position: relative; z-index: 1; height: 70px; width: 70px; }
#timers span { 
    position   : absolute; 
    z-index    : 1; 
    top        : 50%; 
    margin-top : -0.6em;
    display    : block; 
    width      : 100%;
    text-align : center;
    height     : 1.5em;
    color      : #528f20;
    font       : 1.3em Arial;
}

期間、親要素、およびキャンバスとカウンターのオプションのセレクターを取るタイマー関数を作成しました。canandcntが指定されておらず、存在しない場合は、それらが作成されます。各タイマーのすべての要素が共通の親を持つように、HTML に追加のグループ化 div を追加しました。CSS については、命名規則を変更して、もう少しドライに保ちました。各 Timer 親 div にはクラス「time」がありますが、それは好きなものにすることができます。タイマーは、キャンバスに「タイマー」のクラスがあり、時間出力に「カウンター」のクラスがあると想定します。これらも任意に設定できますが、その場合はパラメーターを指定する必要があります。

于 2012-10-29T17:21:00.333 に答える