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，这将是一种正确的方法。如果您需要为现有的应用程序/网站实现某些东西，您可能会拥有一个像 jQuery 这样的库供您使用，这将简化一些事情并使其更加跨浏览器兼容。

我相信人们也会发布 jQuery 示例......实际上这里是 jQuery 版本。了解正确的js更为重要。

您可以将计时器制作为图像，我没有图像，所以我将其保留为 html。

于 2013-04-23T08:36:56.447 回答
0

您可以像这样使用 jQuery 更改每个属性：

var count = 0;
var speed = 1000;

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

但是您可能更喜欢拥有一张带有精灵的大图像并更改background-position样式，而不是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 回答
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 回答