Question

我想要做的是有一个硬币翻转，当按下翻转按钮或指示到其他地方时，它将开始倒计时。然后我希望它倒数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>

Answer 1

您可以使用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>

这里还有一个小提琴，所以你可以测试它，看看它做了什么： 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>

Answer 2

以下是使用setTimeout的示例。在这种情况下，我已经删除了表单，因为您并不严格需要它，并使用事件侦听器以便从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);

DEMO

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

2 个答案: