-1

我最近正在建立生命计数器，我不知道这里有什么问题，我的意思是我有 2 个 div，当你在 div 上“活着”的时候你得到分数，当你在“死”的 div 上你得到分数下。

现在我已经让这段代码在几秒钟内工作，但它不能正常工作，我的意思是 1、2、3。但它的工作方式如下：http: //jsfiddle.net/4Tby5/

或作为可视代码：

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>Alive - Dead</title>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
            var l = 1;
            var good = " Excelent!";
            var bad = " OH NO!";
            $(document).ready(function () {
                $('#alive').hover(function () {
                    if (l > 100) {
                        window.clearTimeout("tim");
                    }
                    else {
                        document.getElementById("percent").innerHTML = "Life: " + l + good;
                        l++;
                        var tim = window.setTimeout("count()", 1000);
                    }
                    count();
                });
            });
            $(document).ready(function () {
                $('#dead').hover(function () {
                    if (l < 0) {
                        window.clearTimeout("tim");
                    }
                    else {
                        document.getElementById("percent").innerHTML = "Life: " + l + bad;
                        l--;
                        var tim = window.setTimeout("count()", 1000);
                    }
                    count();
                });
            });
        </script>
        <style>
            body {
                background: red;
            }
            .dead {
                cursor: url(thumb-down.cur) 6 6, auto;
                padding-bottom: 285px;
            }
            .alive {
                background: #32ff0a;
                height: 300px;
                margin: -8px;
                cursor: url(thumb-up.cur) 6 6, auto;
            }
        </style>
    </head>
    <body>
        <div class="alive" id="alive">
        Stay here to survive!
        </div>
        <div class="dead" id="dead">
        <br />
        Stay away from dead area!
        </div>
        <div id="percent"></div>
    </body>
</html>

所以我的问题是我该如何解决这个问题以得到 1、2、3（用 2 和 3、4 替换 1 ......）？

4

2 回答 2

1

You do not have a count function, make one

And you clear a timeout using the variable itself not its name

window.clearTimeout(tim);

also with your current code you will need to use a global variable

window.tim = window.setTimeout("count()", 1000);

window.clearTimeout(window.tim);

otherwise the clearTimeout wont see it.

于 2013-05-30T15:33:13.303 回答
0

这是您的问题的解决方案。您的代码中的问题是......只有当鼠标进入时才会计算悬停功能......只要鼠标留在里面。

http://jsfiddle.net/Vdq39/2/

$(document).ready(function () {
    var good = " Excelent!";
    var bad = " OH NO!";
    var tim;
    var counter = 0;

    function count() {
        counter++;
        document.getElementById("percent").innerHTML = "Life: " + counter + good;
        if (counter > 100) {
            window.clearInterval(tim);
        } 
    }

    function countDown() {
        counter--;
        document.getElementById("percent").innerHTML = "Life: " + counter + bad;
        if (counter < 0) {
            window.clearInterval(tim);
        } 

    }
    $('#alive').hover(function () {
        if (counter > 100) {
            window.clearInterval(tim);
        } else {
            tim = window.setInterval(count, 1000);
        }
    }, function () {
        window.clearInterval(tim);
    });

    $('#dead').hover(function () {

        if (counter < 0) {
            window.clearInterval(tim);
        } else {
            tim = window.setInterval(countDown, 1000);
        }

    },

    function () {
        window.clearInterval(tim);
    });
});
于 2013-05-30T16:09:39.853 回答