Что я хочу сделать, это сделать флип с монеткой, который начнет обратный отсчет при нажатии кнопки флип или при указании в другом месте. Затем я хочу, чтобы он обратный отсчет 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>

2015-11-29 Sprat25

'setInterval' и/или' setTimeout' является то, что вы ищете –

http://i713.photobucket.com /albums/ww138/irene1212/quarter-2-textures1.gif –

Не забудьте обработать ситуацию, когда пользователь продолжает нажимать кнопку, пока таймер все еще работает. – trincot

вы можете сделать это с 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>

источник

2015-11-29 14:12:59 Zeus

спасибо за информацию, но можете ли вы помочь мне в том, где я должен реализовать этот код в моем текущем коде, поскольку ive попробовал несколько вещей, но не смог заставить его работать? – Sprat25

Это то, что ive изменило с вашего кода, но я не могу заставить его работать в моем браузере, что мне добавить ?: – Sprat25

var current = 3; var elem = document.getElementById ('toss'); вар intervalId = setInterval (функция() { , если (ток> 0) { elem.innerHTML = "

" + ток + "

"; } еще { , если (Math.random()> 0,5) { elem.innerHTML = '

'; } еще { elem.innerHTML ='

'; } clearInterval (intervalId); } current--; }, 1000); // 1000 ms = 1s – Sprat25

Вот пример использования setTimeout. В этом случае я удалил форму, так как вам это не нужно, и использовал прослушиватели событий, чтобы вызов JS был удален из HTML.

HTML

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

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

источник

2015-11-29 14:17:40 Andy

Как создать таймер обратного отсчета перед выполнением функции

ответ

" + ток + "

Смежные вопросы