Question

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

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

这是装饰产品的粗略版本，但是我想在图片中添加一个点击计数器，这样每次兔子跳跃时，+1会被添加到计数中，然后我会点击普及（但我们会在其他时间采取这种做法）。 this是一个JSFiddle的链接，其中包含我到目前为止使用的代码（不包括一些小的调整）。如何在此脚本中添加clickcounter？随意使用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>

提前感谢所有人！

Answer 1

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

...
<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
...

如何制作clickcounter（与jQuery 2.0.2 / 2.0.1对应）

1 个答案: