Question

我正在尝试为我创建的测验创建倒计时。测验将创建一个百分比，我正在尝试创建一个JavaScript函数，该函数将从100％倒数到用户测验分数百分比。

还可以在倒计时时更改百分比的颜色吗？示例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/

谢谢

Answer 1

这将使其从100％的纯绿色变为50％的纯红色。我不确定你是否希望它保持绿色一直到60％。如果你想要那个，那么只需将一个三元语句放入绿色函数，如“return i＆gt; 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,
});

Answer 2

看起来你已经在倒计时本身做得很好。

你可以使用像这个jQuery颜色插件轻松地为颜色设置动画：
https://github.com/jquery/jquery-color

Answer 3

由于您的cycle插件只是迭代了许多已创建的元素，因此您只需将59以下的valeus段落设置为您想要的任何值。

Answer 4

你得到一个在每次打勾后被解雇的事后事件。您可以使用它来更改文本的颜色。

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");
       }
    }
});

Answer 5

根据用户进度，你只需要在RGB值中增加。

尝试一下:)
    var c1 = c2 = c3 = 0;
    for（i = 1; i <= 100; i ++）
        {
           的document.getElementById（ “＃计数器”）style.color = RGB（C1，C2，C3）;
           if（i> 30＆amp;＆amp; i＆lt; 60）
            {
              C2 ++;
            }
        }

使用javascript倒计时

5 个答案: