Question

我正在处理一些javascript应用程序的主要问题。我希望我的窗户打开一个封闭的信封，然后在五秒钟后换到一个打开的信封，在它的角落里有一个小的计数器。除非点击信封，否则我希望计数器每五秒继续向上移动一次。如果点击，我希望计数重新开始。到目前为止，我只收到封闭的信封。我是新人，不知道我做错了什么，所以任何帮助都会很棒！我的HTML：

<!DOCTYPE html>
<html>
    <head>
<script type="text/javascript" src="mail.js"></script>
    </head>
    <body>
        <img id"closed" src="closed.png" onclick="resetTimer()">
        <span id="counter"></span>
    </body>
</html>

我的JavaScript：

window.onload = function(){
    var counter = 0;
    var timer = setInterval(
        function(){         
            counter++; 
            document.getElementById("demo").firstChild.nodeValue = counter;
        }, 
        5000
    );              

    function openEnvelope(){
         var img = document.getElementById("picture");
         if (counter > 1){
             img.src = "open.png"
         }
    }
    open = setTimeout("open()", 1000);

    function resetTimer(){
         clearInterval(timer);
    }
}

Answer 1

您需要递增计数器并将计数器范围设置为具有该值：

        var counter = 0;
        //Create your timer (setTimeout will only run once, setInterval will start again once run.
        //1000 = 1 second
        var timer = setInterval(openEnvelope, 1000);

        function openEnvelope() {
            var img = document.getElementById("picture");
            var counterSpan = document.getElementById("counter");
            if (counter > 1) {
                img.src = "open.png"
                counterSpan.innerHTML = counter;
            }
            //Add 1 to Counter
            counter++;
        }

        function resetTimer() {
            clearInterval(timer);
            counter = 0;
        }

这将每秒运行您的openEnvelope功能，如果计数器值超过1，它会将Img来源设置为open.png和counter范围有计数器的价值。点击信封后，它将清除计时器并重置计数器。

您的HTML将成为：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="mail.js"></script>
    </head>
    <body>
        <img id"picture" src="closed.png" onclick="resetTimer()">
        <span id="counter"></span>
    </body>
</html>

这是一个有问题的JSFiddle，尝试创建一个空白页并将HTML直接复制到<body>标记，将Javascript复制到<script></script> <head>标记中你网页的。

新邮件计数器javascript

1 个答案: