javascript - 使用javascript倒计时

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 > 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插件只是迭代了许多已经创建的元素，您可以简单地将 valeus 的段落设置为 59 以下的任何值。

Answer 4

您会得到一个 after 事件，该事件在每个滴答声后被触发。您可以使用它来更改文本的颜色。

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

U 只需要根据用户进度增加 RGB 值。

试试看 :)
var c1=c2=c3=0;
for(i=1; i <= 100; i++)
{
document.getElementById("#counter").style.color=rgb(c1,c2,c3);
if(i>30 && i<60)
{
c2++;
}
}