如何在执行功能之前创建倒计时计时器

How to create a countdown timer before a function is performed

本文关键字：创建 倒计时 计时器 功能 执行      更新时间：2023-09-26

我想做的是有一个硬币翻转，当按下翻转按钮时或在其他地方指示时，它将开始倒计时。然后我想让它倒计时3、2、1，并将其显示在屏幕上。当倒计时完成时，它将显示正面或反面。这样做的原因是，我不必创建一个硬币翻转的动画，而是一个延迟来构建张力。

这是我迄今为止的代码：

<html>
    <head>
        <title>Coin Toss </title>
        <script>
            function toss() {
            if (Math.random()>.5) {
            window.document.coin.src = "CT.jpg";
            }
            else {
            window.document.coin.src = "T.jpg";
            }
            return false;
            }
        </script>
    </head>
    <body>
        <img name="coin" src="questionmark.png">
        <form action="" onSubmit="return toss();">
            <input type="submit" value="TOSS">
        </form>
    </body>
</html>

下面是一个使用setTimeout的示例。在这个例子中，我已经删除了表单，因为您在imo中并不严格需要它，并使用了事件侦听器，以便从HTML中删除JS调用。

HTML

<img id="coin"/><br/>
<button id="toss">Toss</button><br/>
<div id="count"></div>

JS-

function toss() {
    var div = document.getElementById('coin');
    if (Math.random() > .5) {
        coin.src = "CT.jpg";
    } else {
        coin.src = "T.jpg";
    }
}
function countDown() {
    var count = 3, timer;
    var div = document.getElementById('count');
    // if count is not 0, add the new count to the
    // count element and loop again, reducing the count number
    // otherwise erase the count element, clear the timeout
    // and run the toss function
    var loop = function loop (count) {
       if (count > 0) {
           div.textContent = count--;
           timer = setTimeout(loop, 1000, count);
       } else {
           div.textContent = '';
           clearTimeout(timer);
           toss();
       }
    }
    // start the countdown
    loop(count);
}
var button = document.getElementById('toss');
button.addEventListener('click', countDown, false);

演示

您可以使用setInterval来完成此操作，下面是一个示例：

Javascript：

var current = 3;
var elem = document.getElementById('toss');
var intervalId = setInterval( function(){
    if( current > 0 ){
        elem.innerHTML = "<h1>" + current + "</h1>";
    } else {
        if( Math.random() > .5 ){
            elem.innerHTML = '<img src="http://www.thecoinspot.com/25c/1932%20Type%201%20Silver%20Washington%20Quarter%20Obv.png">';
        } else {
            elem.innerHTML = '<img src="http://www.thecoinspot.com/25c/1988%20Type%202%20Clad%20Washington%20Quarter%20Reverse.png">';
        }
        clearInterval( intervalId );
    }
    current--;
}, 1000 ); // 1000 ms = 1s

HTML:

<div id="toss"><div>

这里还有一个Fiddle，你可以测试一下它的作用：http://jsfiddle.net/Cedriking/cLs9r3m6/

对于您的第二个问题（在评论中），请执行以下操作：

    <html>
    <head>
      <title>This is my title</title>
    </head>
    <body>
      <div id="toss"></div>
      <script type="text/javascript">
        var current = 3;
        var elem = document.getElementById('toss');
        var intervalId = setInterval( function(){
            if( current > 0 ){
                elem.innerHTML = "<h1>" + current + "</h1>";
            } else {
                if( Math.random() > .5 ){
                    elem.innerHTML = '<img src="http://www.thecoinspot.com/25c/1932%20Type%201%20Silver%20Washington%20Quarter%20Obv.png">';
                } else {
                    elem.innerHTML = '<img src="http://www.thecoinspot.com/25c/1988%20Type%202%20Clad%20Washington%20Quarter%20Reverse.png">';
                }
                clearInterval( intervalId );
            }
            current--;
        }, 1000 ); // 1000 ms = 1s
        </script>
   </body>
</html>
相关文章：