使用javascript倒计时

Posted 2023-02-25

【中文标题】使用javascript倒计时

【英文标题】：Countdown using 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/

谢谢

【参考方案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