使用javascript倒计时答案

【问题标题】：Countdown using javascript使用javascript倒计时
【发布时间】：2013-03-17 17:48:10
【问题描述】：

我正在尝试为我创建的测验创建倒计时。测验将创建一个百分比，我正在尝试创建一个 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/

谢谢

【问题讨论】：

标签： javascript

【解决方案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,
});

【讨论】：

【解决方案2】：

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

试试看:)
变量 c1=c2=c3=0;
for(i=1; i {
document.getElementById("#counter").style.color=rgb(c1,c2,c3);
如果(i>30 && i {
c2++;
}
}

【讨论】：

【解决方案3】：

您会得到一个 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");
       }
    }
});

【讨论】：

【解决方案4】：

由于您的 cycle 插件只是迭代了许多已经创建的元素，您可以简单地将 valeus 的段落设置为低于 59 的任何值。

【讨论】：

【解决方案5】：

看起来你已经在倒计时方面做得很好了。

您可以使用类似这个 jQuery 颜色插件的东西轻松地为颜色设置动画：
https://github.com/jquery/jquery-color

【讨论】：