使用javascript的倒計時

我正在嘗試爲我創建的測驗創建一個倒計時。測驗會創建一個百分比，我正在嘗試創建一個JavaScript函數，該函數將從100％倒數計數到用戶測驗分數百分比。使用javascript的倒計時

還有可能在倒計時時改變百分比的顏色嗎？示例100％綠色，當它達到59％或更低時開始褪色成紅色？

什麼我與現在的工作：

<div id="counter"> 
</div> 

var stop = 6; 

for(i=1; i <= 100; i++) { 
    $('#counter').append('<p>' + i + '%'); 
} 

$('#counter').cycle({ 
    delay: 600, 
    fx:  'none', 
    backwards: true, 
    speed: 300, 
    timeout: 60, 
    autostop: 1, 
    autostopCount: stop, 
});

鏈接：http://jsfiddle.net/joshsmith/WE3UA/4/

謝謝

來源

2013-03-27 osbt

這將使它從100％的純綠色變爲50％的純紅色。我不確定你是否希望它一直保持綠色，一直降到60％。如果你想要的話，那麼就像這個「返回i> 60？255：Math.round（256 *（i + 40）/ 50-256）」，將一個三元語句放入綠色函數中。「

var stop = 60; 
function green(i) { return Math.round(256*i/50-256); } 
function red(i) { return 256-green(i); } 
function toHex(c) { var h = c.toString(16); return h.length > 1 ? h : '0'+h; } 
function color(i) { return i <= 50 ? 'f00' : toHex(red(i)) + toHex(green(i)) + '00'; } 

for(i=1; i <= 100; i++) { 
    $('#counter').append('<p style="color: #' + color(i-1) + '">' + i + '%'); 
} 

$('#counter').cycle({ 
    delay: 600, 
    fx:  'none', 
    backwards: true, 
    speed: 300, 
    timeout: 60, 
    autostop: 1, 
    autostopCount: stop, 
});

來源

2013-03-27 15:36:06

貌似you'e已經在做進入倒計時本身就是一個相當不錯的工作。

您可以使用像這樣的jQuery顏色插件輕鬆地製作動畫的顏色：
https://github.com/jquery/jquery-color

來源

2013-03-27 15:17:08

由於您cycle插件剛剛經歷了很多已經被創建的元素的迭代，你可以簡單地設置各段的valeus以下59無論你想要什麼樣的價值。

來源

2013-03-27 15:18:48

你會在每次打勾後得到一個事件。你可以用它來改變文字的顏色。

var stop = 6; 

for(i=1; i <= 100; i++) { 
    $('#counter').append('<p>' + i + '%'); 
} 
var nCounter = 0; 
$('#counter').cycle({ 
    delay: 600, 
    fx:  'none', 
    backwards: true, 
    speed: 300, 
    timeout: 60, 
    autostop: 1, 
    autostopCount: stop, 
    after: function(currSlideElement, nextSlideElement, options, forwardFlag) 
    { 
     nCounter++ 
     var percent = nCounter /stop * 100; 
     if(percent < 10) 
     { 
      $('#counter').css("color", "red"); 
     } 
    } 
});

來源

2013-03-27 15:24:26

U只需根據用戶進度使RGB值增加即可。

試一試:)
var c1 = c2 = c3 = 0;
爲（I = 1;我< = 100; i ++在）
{
的document.getElementById（「＃計數器」）style.color = RGB（C1，C2，C3）。
如果（ⅰ> 30 & &我< 60）
{
C2 ++;
}
}

來源

2013-03-27 15:32:27 user2119554

使用javascript的倒計時

回答

相關問題