0

20秒からカウントダウンするJSタイマースクリプトがあります

var count = 0;
var speed = 1000;

countdown = setInterval(

        function(){

        jQuery("#countdown").html(count);

        if (count == 0) {
            return;
        }
        count--;
        }

,speed);

タイマーが特定のポイントに達したときに画像の src を動的に変更する方法はありますか? 例えば：

if (count >= 0 && count <= 10) {
 img.src = "2.png"
}

if (count >= 11 && count <= 20) {
 img.src = "1.png"
}

ユーザーがボタンをクリックすると、タイマーのカウントに 5 が追加されます。

jQuery('#add').click(function() {
    if(count >= 0 && count <= 18)   {count = count + 6}

したがって、値が再び 11 を超えると、画像 src は 1.png に戻るはずです。

基本的には、タイマーの値に応じて画像の src を変更するスクリプトです。

ありがとう

4

5 に答える 5

2

純粋な JavaScript では、次のようにします。

http://jsfiddle.net/sg3s/e54L3/

HTML:

<button>Buttan</button>
<div id="counter"></div>

Javascript:

"use strict";
(function(document) {
    var counter = document.getElementById('counter'), 
        button = document.getElementsByTagName('button')[0],
        // Added one extra to count to compensate for the one immediate countdown...
        count = 6, speed = 1000, countAddStep = 5, timeout,
        func = function () {
            count--;
            counter.innerHTML = count;
            if(count !== 0) {
                timeout = setTimeout(func, speed);
            }
        };

    button.addEventListener('click', function() {
        // Add the countstep to count
        count = count+countAddStep;
        counter.innerHTML = count;
        // Restart the timeout if needed.
        if (count === countAddStep) {
            // Add one for the one immediate countdown
            count++;
            func();
        }
    });

    // Start the timeout with 1 second (1000 ms) intervals
    func();
} (document));

これは、JavaScript を学び始めたばかりの場合に適した方法です。既存のアプリケーション/Web サイトに何かを実装する必要がある場合は、jQuery のようなライブラリを自由に使用できる可能性が高く、これにより物事が少し簡素化され、ブラウザー間の互換性が向上します。

人々はjQueryの例も投稿すると確信しています...実際には、ここにjQueryのバージョンがあります。適切なjsを知ることはより重要です。

タイマーを画像にすることができます。画像がなかったので、html に保存しました。

于 2013-04-23T08:36:56.447 に答える
0

Jquery を使用すると、画像の src を簡単に変更できます。

var newSrc=".....  " ; // new img path
$('#img1').attr('src',newSrc ); //changing the image

編集：

jQuery('#add').click(function() {

if(count >= 0 && count <= 18)   
{
   if(count==11)
  {
     var newSrc=".....  " ; // new img path
     $('#img1').attr('src',newSrc ); //changing the image 
  }

  count = count + 6
}

ハッピーコーディング:)

于 2013-04-23T07:58:57.440 に答える
0

プレーンな JavaScript を使用する場合は、画像に ID を指定してから、次を使用して画像にアクセスできます。

document.getElementById("imageid").src="newimage.png";

目的のイメージに更新します。

于 2013-04-23T08:02:38.423 に答える
0

次のように、jQuery を使用してすべての属性を変更できます。

var count = 0;
var speed = 1000;

countdown = setInterval(function(){
        if (count == 0) {
            return;
        }
        count--;
        $("#countdown").prop("src", count + ".png");
}
,speed);

しかし、おそらく、新しい画像のロード時の遅延を避けるよりも、スプライトとbackground-positionスタイルを変更した 1 つの大きな画像を用意することをお勧めします。src

于 2013-04-23T08:05:49.630 に答える
0

各間隔の終わりと、カウントをインクリメントした後のクリック時に呼び出す関数を作成できます。このようなもの：

function validateImg(){
    var $img = $('#imgID');
    if (count >= 0 && count <= 10 && $img.attr('src') !='2.png') {
        $img.attr('src','2.png');
    }

    if (count >= 11 && count <= 20 && $img.attr('src') !='1.png') {
        $img.attr('src','1.png');
    }
}

このようにして、カウントが正しい間隔内にある場合にのみ、img を変更します

于 2013-04-23T08:07:24.933 に答える