0

我正在尝试制作一个筹款网页（用于慈善事业），为了展示我决定和一只兔子一起环游世界。

到目前为止，我得到的是一个非循环的 gif，它可以在点击时播放，并且每隔几秒只能点击一次。你可以在这里查看网页。

这是成品外观的粗略版本，但我想在图片中添加点击计数器，这样每次兔子跳跃时，计数都会增加 +1，然后我会让点击变得普遍（但我们将在其他时间进行）。这是一个指向 JSFiddle 的链接，其中包含我迄今为止使用的代码（不包括一些小的调整）。如何向此脚本添加点击计数器？随意使用 JSFiddle 链接，并查看页面！

以下是当前状态下页面的完整脚本：

<html>
<head>
<title>Around The World</title>

<script src="http://code.jquery.com/jquery-2.0.0.js"></script>

<style type="text/css">
    body {margin:0; }
</style>

<script>
$(function(){
    var image = new Image();
    image.in_action = false;  // flag to determine current state. Initialize to ready to     animate.
    image.duration = 750;  // This is rough, if you are creating the gif you can peg this     to the proper duration
    image.src ='transparent.gif';
    $('#img').click(function(){
        if (!image.in_action) {
           image.in_action = true;  // Set the image as in progress
           $(this).attr('src',image.src);
            window.setTimeout(function() {
                image.in_action = false;  // After image.duration amount of miliseconds,     set as finished
            }, image.duration);
        }
    });
});
</script>


<style>
img {
    position: relative;
    top: 100px;
    width:150px;
    height:206px;
}
</style>

</head>
<body bgcolor="00FFFF">

<center>
<img id = "img"

src = "still.png">
<center>

</body>
</html>

提前感谢大家！

4

1 回答 1

0

不确定我是否理解正确，但可能是一个简单的全局变量：

...
<script>

var counter = 0;

$(function(){
    var image = new Image();
...
   if (!image.in_action) {
       counter++;               // Increase counter by 1
       $('#click-counter').text('Number of clicks: '+counter); // maybe show somewhere
       image.in_action = true;  // Set the image as in progress
...
于 2014-10-23T13:07:55.853 回答