Как создать секундомер в JavaScript

Секундомер JavaScript или, скорее, таймер остановки, может быть реализован с использованием методов синхронизации JavaScript, которые выполняются через временные интервалы.

Методы синхронизации JavaScript автоматизируют конкретную задачу, которая будет выполняться на лету без необходимости нажимать кнопку или вызывать событие.

Синхронизация JavaScript состоит из двух ключевых методов:

• setTimeout("выражение JavaScript", миллисекунды);
• clearTimeout(ID setTimeout());

При использовании методов синхронизации JavaScript вам необходимо понимать, как JavaScript выполняет операторы во временных интервалах.

Метод setTimeout()

Синтаксис:

 setTimeout( "JavaScript Statements", milliseconds );

Метод синхронизации JavaScript setTimeout() принимает только два параметра:

• первый параметр: этот параметр представляет собой операторы JavaScript, которые вы хотите выполнить. Ей также может быть передано строковое имя функции.
• второй параметр: указывает миллисекунды, которые должны пройти перед выполнением операторов JavaScript в первом параметре. Его можно просто назвать (задержка выполнения).

Пример. Структура метода setTimeout()

 var setTime = setTimeout( function ( ) { // javascript statements }, 500 ); Or var setTime = setTimeout( "setTimeFunction( )", 500 );

Пример: расчет миллисекунд

Для работы с методами синхронизации событий JavaScript очень важно, чтобы вы понимали, как считать миллисекунды.

У вас есть одна секунда (1 с) в одной тысяче миллисекунд (1000 мс)

Формулы миллисекунд

 1000ms = 1s Yms = Xs if 1000ms = 1s 300ms = Xs #cross multiplying 1000ms * Xs = 300ms * 1s X * 1000 = 300 * 1 1000X = 300 X = 300 / 1000 X = 0.3s

Это означает, что 300 миллисекунд = 0,3 секунды, а не одна секунда (1 с). Ваши операторы JavaScript будут выполняться с интервалом в 0,3 секунды (0,3 с).

Создание секундомера

Используя методы события синхронизации JavaScript, мы можем создать наш секундомер.

Пример: структура

 var clear; function stopWatch( ) { // javascript statement here clear = setTimeout( "stopWatch( )", 1000 ); } Or function stopWatch( ) { // javascript statement here clear = setTimeout( function ( ) { // javascript statement here }, 1000 ); } Or var stopWatch = function ( ) { // javascript statement here clear = setTimeout( "stopWatch( )", 1000 ); }

Пример: код JavaScript для startwatch.js

 // initialize your variables outside the function var count = 0; var clearTime; var seconds = 0, minutes = 0, hours = 0; var clearState; var secs, mins, gethours ; function startWatch( ) { /* check if seconds is equal to 60 and add a +1 to minutes, and set seconds to 0 */ if ( seconds === 60 ) { seconds = 0; minutes = minutes + 1; } /* you use the javascript tenary operator to format how the minutes should look and add 0 to minutes if less than 10 */ mins = ( minutes < 10 ) ? ( '0' + minutes + ': ' ) : ( minutes + ': ' ); /* check if minutes is equal to 60 and add a +1 to hours set minutes to 0 */ if ( minutes === 60 ) { minutes = 0; hours = hours + 1; } /* you use the javascript tenary operator to format how the hours should look and add 0 to hours if less than 10 */ gethours = ( hours < 10 ) ? ( '0' + hours + ': ' ) : ( hours + ': ' ); secs = ( seconds < 10 ) ? ( '0' + seconds ) : ( seconds ); // display the stopwatch var x = document .getElementById("timer"); x.innerHTML = 'Time: ' + gethours + mins + secs; /* call the seconds counter after displaying the stop watch and increment seconds by +1 to keep it counting */ seconds++; /* call the setTimeout( ) to keep the stop watch alive ! */ clearTime = setTimeout( "startWatch( )", 1000 ); } // startWatch( ) //create a function to start the stop watch function startTime( ) { /* check if seconds, minutes, and hours are equal to zero and start the stop watch */ if ( seconds === 0 && minutes === 0 && hours === 0 ) { /* hide the fulltime when the stop watch is running */ var fulltime = document.getElementById( "fulltime" ); fulltime.style.display = "none"; /* hide the start button if the stop watch is running */ this.style.display = "none"; /* call the startWatch( ) function to execute the stop watch whenever the startTime( ) is triggered */ startWatch( ); } // if () } // startTime() /* you need to bind the startTime( ) function to any event type to keep the stop watch alive ! */ window.addEventListener( 'load', function ( ) { var start = document .getElementById("start"); start.addEventListener( 'click', startTime ); }); // startwatch.js end

Метод clearTimeout()

Чтобы остановить таймер, вам нужно вызвать метод события синхронизации clearTimeout(), и это очень удобно.

Он имеет только один параметр: возвращаемый идентификатор метода setTimeout().

Синтаксис:

 clearTimeout( return ID of setTimeout() );

Примечание. Метод синхронизации setTimeout() всегда возвращает значение, и это значение передается методу события синхронизации clearTimeout().

Параметр ClearTimeout()

var clearTime = setTimeout("Выражения JavaScript", 100);

переменная clearTime возвращается как значение методом синхронизации setTimeout(), которое может быть передано в функцию clearTimeout(ID) в качестве идентификатора для ссылки на нее - clearTimeout(clearTime);

Как это работает

Всякий раз, когда метод синхронизации clearTimeout() вызывается для активного метода синхронизации setTimeout(), метод синхронизации clearTimeout() останавливает выполнение метода синхронизации setTimeout(), но не прерывает его выполнение полностью.

Метод синхронизации setTimeout() остается бездействующим в течение периода, в течение которого вызывается метод синхронизации clearTimeout(), и когда вы повторно выполняете метод синхронизации setTimeout(), он запускается с того момента, когда его выполнение было остановлено, а не начинается сначала. с самого начала.

Точно так же, как когда вы ставите на паузу медиаплеер mp3, а затем воспроизводите его, он продолжает воспроизведение с предыдущей позиции, но не начинает все сначала.

Например, предположим, что у меня есть работающий таймер, созданный с помощью метода синхронизации setTimeout(), и его начальная точка — 00. Я запускаю таймер, и теперь он показывает 41.

Если я вызову метод синхронизации clearTimeout() для этого активного метода setTimout(), он будет простаивать в течение этого периода, и всякий раз, когда я повторно выполняю метод синхронизации setTimeout(), он начнет отсчет с 41, а не с 00. .

Чтобы таймер начинался с 00, вы должны сбросить его счетчик. Это логика.

Пример: Останови время — stopwatch.js

 //create a function to stop the time function stopTime( ) { /* check if seconds, minutes and hours are not equal to 0 */ if ( seconds !== 0 || minutes !== 0 || hours !== 0 ) { /* display the full time before reseting the stop watch */ var fulltime = document .getElementById( "fulltime" ); //display the full time fulltime.style.display = "block"; var time = gethours + mins + secs; fulltime.innerHTML = 'Fulltime: ' + time; // reset the stop watch seconds = 0; minutes = 0; hours = 0; secs = '0' + seconds; mins = '0' + minutes + ': '; gethours = '0' + hours + ': '; /* display the stopwatch after it's been stopped */ var x = document.getElementById ("timer"); var stopTime = gethours + mins + secs; x.innerHTML = stopTime; /* display all stop watch control buttons */ var showStart = document.getElementById ('start'); showStart.style.display = "inline-block"; var showStop = document.getElementById ("stop"); showStop.style.display = "inline-block"; /* clear the stop watch using the setTimeout( ) return value 'clearTime' as ID */ clearTimeout( clearTime ); } // if () } // stopTime() /* you need to call the stopTime( ) function to terminate the stop watch */ window.addEventListener( 'load', function ( ) { var stop = document.getElementById ("stop"); stop.addEventListener( 'click', stopTime ); }); // stopwatch.js end

CSS

 #stopWatch { width: 280px; height: auto; text-align: center; display: block; padding: 5px; margin: 0 auto; } #timer, #fulltime { width: auto; height: auto; padding: 10px; font-weight: bold; font-family: tahoma; display: block; border: 1px solid #eee; text-align: center; box-shadow: 0 0 5px #ccc; background: #fbfbf0; color: darkblue; border-bottom:4px solid darkgrey; } button { cursor: pointer; font-weight: 700; } #fulltime { display:none; font-size:16px; font-weight:bold; }

HTML

 <!DOCTYPE html> <html lang="en"> <head> <title> JavaScript Stop Watch </title> <style text="text/css"> </style> <script type="text/javascript"> </script> </head> <body> <section> <p> Time : 00:00:00 </p> <button> Start </button> <button> Stop </button> <p> </p> </section> </body> </html>

Секундомер готов, и вот как он должен выглядеть.