2

作成したクイズのカウントダウンを作成しようとしています。クイズはパーセンテージを作成し、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/

ありがとうございました

4

5 に答える 5

2

これにより、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,
});
于 2013-03-27T15:36:06.133 に答える
0

あなたはすでにカウントダウン自体でかなり良い仕事をしているようです.

この jQuery カラー プラグインのようなものを使用して、色を簡単にアニメーション化できます:
https://github.com/jquery/jquery-color

于 2013-03-27T15:17:08.097 に答える
0

ティックごとに発生するアフターイベントを取得します。これを使用して、テキストの色を変更できます。

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-27T15:24:26.073 に答える
0

プラグインはすでに作成されている多くの要素を反復するだけなので、cycle59 未満の値の段落を任意の値に設定するだけです。

于 2013-03-27T15:18:48.180 に答える
0

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++;
}
}

于 2013-03-27T15:32:27.933 に答える