Question

我正在建立最近的生活计数器，我无法弄清楚这里的问题是什么，我的意思是我有2个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 ...）？

Answer 1

您没有count功能，只需一个

使用变量本身而不是名称

清除超时

window.clearTimeout(tim);

同样使用当前代码，您需要使用全局变量

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

window.clearTimeout(window.tim);

否则clearTimeout不会看到它。

Answer 2

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

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);
    });
});

生命反击问题

2 个答案: