Simple stopwatch in pure javascript (free download)

Реализация на JavaScript

Сразу посмотрим, как это можно было сделать на JS.

Простой и понятный код, состоящий из пары функций. Для обновления таймера подписываемся на момент перерисовки браузера с помощью метода window.requestAnimationFrame().

let end;
const now = Date.now;
const timer = document.getElementById("timer");
const duration = 9900;

function displayCountdown() {
  const count = parseInt((end - now()) / 100);
  timer.textContent =
    count > 0 ? (window.requestAnimationFrame(displayCountdown), count) : 0;
}

function start() {
  end = now() + duration;
  window.requestAnimationFrame(displayCountdown);
}

Всего пара блоков в HTML:

<div class="timer-container">
  <p class="timer" id="timer">99</p>
</div>

И элементарные стили для выравнивания:

.timer-container {
  display: flex;
  height: 100vh; 
}

.timer {
  margin: auto;
}

Согласитесь, ровным счётом ничего интересного. Поэтому бросаем эту ерунду и идём писать по-настоящему крутой таймер.

Сервисы для создания таймера

Давайте теперь рассмотрим несколько популярных сервисов, которые помогут в установке таймера обратного отсчета в письмах. Работать с ними довольно легко – достаточно настроить дизайн и сгенерировать HTML-код.

Promofeatures

Promofeatures – сервис для создания таймеров, которые можно использовать как в рассылках, так и на сайте. С его помощью вы можете бесплатно сделать счетчик, однако в таком случае он будет выводиться с водяным знаком компании. Чтобы его убрать, необходимо будет оплатить тариф от $6.99 в месяц.

Особенности:

• можно выбрать стиль таймера;
• есть возможность задать цвет дополнительным элементам;
• также можно выбрать шрифт и задать ему стиль: полужирный, курсив и так далее.

Стоимость: бесплатно или от $6.99 в месяц.

Официальная страница: Promofeatures.

Sendtric

Особенности:

• нет водяных знаков;
• дата окончания отсчета не должна превышать 30 дней;
• доступно более 20 популярных языков.

Стоимость: бесплатно.

Официальная страница: Sendtric.

Protimer

Protimer – платный русскоязычный сервис для создания таймеров.

Особенности:

• можно создать счетчик с разными вариантами отсчета: до определенной даты, в определенные дни недели на заданное время, с открытия письма, с даты подписки;
• доступно более 10 вариантов дизайна;
• есть функция подстановки изображения после того, как таймер закончит отсчет.

Стоимость: 48 рублей за 1 таймер или 199 рублей в месяц без ограничений.

Официальная страница: Protimer.

Motionmailapp

Последний сервис, о котором мы поговорим, называется Motionmailapp. Это англоязычная платформа, предлагающая 4 варианта дизайна: два с прямоугольными циферблатами и два с круглыми. Создавать счетчики можно бесплатно и в неограниченном количестве, но на них будет размещен водяной знак.

Особенности:

• возможность выбирать стиль таймера;
• можно задать цвет дополнительным элементам;
• кастомизируемые шрифты – разрешается изменять их размер и задавать стиль: жирность, курсив, и так далее.

Стоимость: бесплатно или от $10 в месяц.

Официальная страница: Motionmailapp.

Пример реализации секундомера на JavaScript

Секундомер пишется чуть посложней, но все равно не так сложно, как кажется. Мы будем рассматривать пример, где будут присутствовать миллисекунды. Давайте приступим.

   
   <script language="JavaScript" type="text/javascript">
   //объявляем переменные
   var base = 60; 
   var clocktimer,dateObj,dh,dm,ds,ms; 
   var readout=''; 
   var h=1,m=1,tm=1,s=0,ts=0,ms=0,init=0; 
   
   //функция для очистки поля
   function ClearСlock() { 
        clearTimeout(clocktimer); 
        h=1;m=1;tm=1;s=0;ts=0;ms=0; 
        init=0;
        readout='00:00:00.00'; 
        document.MyForm.stopwatch.value=readout; 
   } 
   
   //функция для старта секундомера
   function StartTIME() { 
        var cdateObj = new Date(); 
        var t = (cdateObj.getTime() - dateObj.getTime())-(s*1000); 
        if (t>999) { s++; } 
        if (s>=(m*base)) { 
                ts=0; 
                m++; 
        } else { 
                ts=parseInt((ms/100)+s); 
                if(ts>=base) { ts=ts-((m-1)*base); } 
        } 
        if (m>(h*base)) { 
                tm=1; 
                h++; 
        } else { 
                tm=parseInt((ms/100)+m); 
                if(tm>=base) { tm=tm-((h-1)*base); } 
        } 
        ms = Math.round(t/10); 
        if (ms>99) {ms=0;} 
        if (ms==0) {ms='00';} 
        if (ms>0&&ms<=9) { ms = '0'+ms; } 
        if (ts>0) { ds = ts; if (ts<10) { ds = '0'+ts; }} else { ds = '00'; } 
        dm=tm-1; 
        if (dm>0) { if (dm<10) { dm = '0'+dm; }} else { dm = '00'; } 
        dh=h-1; 
        if (dh>0) { if (dh<10) { dh = '0'+dh; }} else { dh = '00'; } 
        readout = dh + ':' + dm + ':' + ds + '.' + ms; 
        document.MyForm.stopwatch.value = readout; 
        clocktimer = setTimeout("StartTIME()",1); 
   } 
   
   //Функция запуска и остановки
   function StartStop() { 
        if (init==0){ 
                ClearСlock();
                dateObj = new Date(); 
                StartTIME(); 
                init=1; 
        } else { 
                clearTimeout(clocktimer);
                init=0;
        } 
   } 
   </script> 
   
   <!--Форма для Секундомера-->
   <form name=MyForm>   
        <input type=button value="Обнулить" onclick="ClearСlock()">  
        <input name=stopwatch size=10 value="00:00:00.00">  
        <input type=button value="Запуск/Остановить" onclick="StartStop()"> 
   </form>

Basic Clock: Count down to a Specific Date or Time

Here’s a quick outline of the steps involved in creating a basic clock:

• Set a valid end date.
• Calculate the time remaining.
• Convert the time to a usable format.
• Output the clock data as a reusable object.
• Display the clock on the page, and stop the clock when it reaches zero.

Set a Valid End Date

First, you’ll need to set a valid end date. This should be a string in any of the formats understood by JavaScript’s Date.parse() method. For example:

The ISO 8601 format:

The short format:

Or, the long format:

Each of these formats allows you to specify an exact time and a time zone (or an offset from UTC in the case of ISO dates). For example:

You can read more about date formatting in JavaScript in this article.

Calculate the Time Remaining

The next step is to calculate the time remaining. We need to write a function that takes a string representing a given end time (as outlined above). We then calculate the difference between that time and the current time. Here’s what that looks like:

First, we’re creating a variable , to hold the remaining time until the deadline. The function converts a time string into a value in milliseconds. This allows us to subtract two times from each other and get the amount of time in between.

Convert the Time to a Usable Format

Now we want to convert the milliseconds to days, hours, minutes, and seconds. Let’s use seconds as an example:

Let’s break down what’s going on here.

1. Divide milliseconds by 1000 to convert to seconds:
2. Divide the total seconds by 60 and grab the remainder. You don’t want all of the seconds, just those remaining after the minutes have been counted:
3. Round this down to the nearest whole number. This is because you want complete seconds, not fractions of seconds:

Repeat this logic to convert the milliseconds to minutes, hours, and days.

Output the Clock Data as a Reusable Object

With the days, hours, minutes, and seconds prepared, we’re now ready to return the data as a reusable object:

This object allows you to call your function and get any of the calculated values. Here’s an example of how you’d get the remaining minutes:

Convenient, right?

Display the Clock and Stop It When It Reaches Zero

Now that we have a function that spits out the days, hours, minutes, and seconds remaining, we can build our clock. First we’ll create the following HTML element to hold our clock:

Then we’ll write a function that outputs the clock data inside our new div:

This function takes two parameters. These are the id of the element that contains our clock, and the countdown’s end time. Inside the function, we’ll declare a variable and use it to store a reference to our clock container div. This means we don’t have to keep querying the DOM.

Next, we’ll use to execute an anonymous function every second. This function will do the following:

• Calculate the remaining time.
• Output the remaining time to our div.
• If the remaining time gets to zero, stop the clock.

At this point, the only remaining step is to run the clock like so:

Congratulations! You now have a basic clock in just 18 lines of JavaScript.

CSS трансформации

Большинство CSS-свойств плохо подходят для анимирования, так как их изменение вызывает перерисовку страницы. Но есть два «безопасных» свойства, которыми мы можем воспользоваться:  и .

Подробнее об анимации в вебе можно прочитать в замечательном руководстве High Performance Animations.

Для оживления таймера возьмём надёжное свойство . Оно обеспечит перемещение блока только по -оси.

.selector {
  transform: translateY(0);
}

Можно воспользоваться и полным свойством , но помните, что его первый аргумент соответствует -координате. Если хотите перемещать элемент только по вертикали, то передайте первым параметром .

.selector {
  transform: translate(3em);
}

/* то же самое */
.selector {
  transform: translate(3em, 0);
}

Чтобы лучше понять функции трансформации, загляните в спецификацию . Там всё разобрано на подробных примерах, так что вы разберётесь, даже если не очень любите математику.

Метод setInterval

Метод используется для повторного выполнения функции по истечении определенного периода времени. Схема построения этого метода следующая:

В этом случае задержка — это время в миллисекундах, в течение которого таймер должен задерживать последовательные выполнения функции. 

Синтаксис этого метода очень похож на синтаксис , но в отличие от последнего, запускает функцию несколько раз, пока она не будет отменена. Например:

function sayHello(name) {
    console.log(`Hello, ${name}`)
}

setInterval(sayHello, 3000, "John")

В примере метод будет повторно выводить в консоль Hello John каждые три секунды. 

Чтобы остановить непрерывный вызов функции , используется метод . Он принимает идентификатор таймера в качестве аргумента и использует этот идентификатор для остановки таймера. 

Вернемся к нашему примеру:

let counter = 0;
function sayHello(name) {
    alert(`Hello, ${name}`)
    counter++;

    if (counter === 3) {
        clearInterval(timerID)
    }
}

let timerID = setInterval(sayHello, 3000, "John");

Функция будет выполнена всего три раза.

Вы можете задаться вопросом, почему оператор находится внутри функции, а не за ее пределами, вот так:

let counter = 0;
function sayHello(name) {
    alert(`Hello, ${name}`)
    counter++;
}

let timerID = setInterval(sayHello, 3000, "John")

if (counter === 3) {
    clearInterval(timerID)
}

Для того чтобы ответить на него, необходимо разобраться, как JavaScript выполняет рассматриваемые нами методы. В отличие от других языков, в JS — один поток для решения задач, выполняемый построчно. Это значит, что каждая строка кода должна завершить свое выполнение, прежде чем переходить к следующей. Другими словами, выполнение остального кода блокируется.

Но есть операции ввода-вывода, которые не блокируются. Они обрабатываются базовым механизмом. К ним относятся:

• получение данных через Ajax;
• метод ;
• метод .

Поэтому JavaScript не ждет, пока функция обратного вызова, переданная методу или , завершит выполнение прежде, чем перейти к следующей задаче или строке кода.

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

Создание таймера обратного отсчета

Пример

<!— Display the countdown timer in an element —><p id=»demo»></p><script>// Set the date we’re counting down to
var countDownDate = new Date(«Sep 5, 2018 15:37:25»).getTime();//
Update the count down every 1 secondvar x = setInterval(function() {  // Get todays date and time  var now = new Date().getTime();  // Find the distance between now an the count down date 
var distance = countDownDate — now;  // Time calculations for
days, hours, minutes and seconds  var days = Math.floor(distance /
(1000 * 60 * 60 * 24));  var hours = Math.floor((distance % (1000 *
60 * 60 * 24)) / (1000 * 60 * 60));  var minutes = Math.floor((distance
% (1000 * 60 * 60)) / (1000 * 60));  var seconds = Math.floor((distance
% (1000 * 60)) / 1000);  // Display the result in the element with
id=»demo»  document.getElementById(«demo»).innerHTML = days + «d » +
hours + «h »  + minutes + «m » + seconds + «s «;  // If
the count down is finished, write some text   if (distance < 0) {   
clearInterval(x);    document.getElementById(«demo»).innerHTML
= «EXPIRED»;  }}, 1000);
</script>

Совет: Узнайте больше о методе Window.setInterval() в нашей справке на JavaScript.

❮ Назад
Дальше ❯

Изображения

Слайд-шоуГалерея слайд-шоуМодальные изображенияЛайтбоксАдаптивная Сетка изображенияСетка изображенияГалерея вкладокОверлей изображенияСлайд с наложенным изображениемМасштабирование наложения изображенияНазвание наложения изображенияЗначок наложения изображенияЭффекты изображенияЧерно-белое изображениеТекст изображенияТекстовые блоки изображенийПрозрачный текст изображенияПолное изображение страницыФорма на картинкеГерой изображениеПараллельные изображенияОкругленные изображенияАватар изображенияАдаптивные образыЦентрировать изображенияМиниатюрыПознакомьтесь с командойЛипкое изображениеОтражение изображенияВстряхните изображениеПортфолио галереяПортфолио с фильтрациейМасштабирование изображенияИзображение увеличительное стеклоПолзунок сравнения изображений

Вместо заключения

Рассмотренный вызов операции – это работа с асинхронными данными. Полученное обращение к ним попадет в очередь. Исполняется в рамках «СетТаймАут» после того, как подойдут к концу остальные манипуляции в пределах стека. Одновременно с другими «командами» или отдельным потоком не сможет.

Не нужно путать JS-function с jQuery-методом delay. Второй необходим для установки временной задержки между методами заданной очереди. Она не подлежит отмене и всегда реализовывается в приложении.

Если требуется затемнить картинку на экране на одну секунду, сделать его видимым на 5, а потом затемнить вновь, выглядеть это будет так:

Именно поэтому ТаймАут лучше применять для иных целей. Для того, чтобы повторить ранее использованный фрагмент кодификации после задержки, лучше активировать setInterval.

А быстро научиться делать таймеры в JS и применять их на практике помогут специализированные дистанционные компьютерные курсы для новичков и опытных разработчиков. Пользователям гарантирован опыт, помощь при сборке портфолио, а также сертификат в конце программы, подтверждающий навыки программиста.

Установка Компонентов Даты и Времени

Для установки отдельных компонентов даты или времени можно использовать следующие методы:

1const date =newDate('September 20, 2020 11:10:05');

2

3

4date.setDate(22);

5

6

7

8const newDate =newDate(1600762205000);

9

Другие методы установки отдельных компонентов объекта :

1

2date.setFullYear(новое значение)

3date.setMonth(month)

4date.setHours(hour)

5date.setMinutes(min)

6date.setSeconds(sec)

7date.setMilliseconds(ms)

8date.setTime(ms)

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

1setHours(18,45,20,10);

2setMinutes(min, sec, ms);

3setSeconds(sec, ms);

Стоить помнить, что если мы укажем обновленное значение часов следующим образом , то это приведет к обновлению нашей даты (прибавится 3 дня).

Исходный код

package ru.javalessons.time;

import org.apache.commons.lang3.time.StopWatch;

import java.time.Duration;
import java.time.Instant;

public class MeasureElapsedTime {
    public static void main(String[] args) throws InterruptedException {
        currentTimeMillis();
        nanoTime();
        instant();
        stopWatch();
    }

    public static void currentTimeMillis() throws InterruptedException {
        long start = System.currentTimeMillis();

        // выполнение какой-то логики
        Thread.sleep(1000);

        long finish = System.currentTimeMillis();
        long elapsed = finish - start;

        System.out.println("Прошло времени, мс: " + elapsed);
    }

    public static void nanoTime() throws InterruptedException {
        long start = System.nanoTime();

        // выполнение какой-то логики
        Thread.sleep(1000);

        long finish = System.nanoTime();
        long elapsed = finish - start;

        System.out.println("Прошло времени, нс: " + elapsed);
    }

    public static void instant() throws InterruptedException {
        Instant start = Instant.now();

        // выполнение какой-то логики
        Thread.sleep(1000);

        Instant finish = Instant.now();
        long elapsed = Duration.between(start, finish).toMillis();
        System.out.println("Прошло времени, мс: " + elapsed);
    }

    public static void stopWatch() throws InterruptedException {
        StopWatch stopWatch = new StopWatch();

        stopWatch.start();

        // выполнение какой-то логики
        Thread.sleep(1000);

        stopWatch.stop();

        System.out.println("Прошло времени, мс: " + stopWatch.getTime());
    }
}

HTML

Плагин имеет имя “countdown” (в переводе на русский язык — «обратный отсчет»). Вызванный для пустого элемента, плагин будет заполнять его кодом HTML, необходимым для формирования дисплея таймера. Больше не надо ничего делать, только выбрать нужный элемент, в котором будет отображаться время.

Генерируемая разметка

<div id="countdown" class="countdownHolder">
	<span class="countDays">
		<span class="position">
			<span class="digit static"></span>
		</span>
		<span class="position">
			<span class="digit static"></span>
		</span>
	</span>

	<span class="countDiv countDiv0"></span>

	<span class="countHours">
		<span class="position">
			<span class="digit static"></span>
		</span>
		<span class="position">
			<span class="digit static"></span>
		</span>
	</span>

	<span class="countDiv countDiv1"></span>

	<span class="countMinutes">
		<span class="position">
			<span class="digit static"></span>
		</span>
		<span class="position">
			<span class="digit static"></span>
		</span>
	</span>

	<span class="countDiv countDiv2"></span>

	<span class="countSeconds">
		<span class="position">
			<span class="digit static"></span>
		</span>
		<span class="position">
			<span class="digit static"></span>
		</span>
	</span>

	<span class="countDiv countDiv3"></span>
</div>

В выше приведённом примере плагин вызван для элемента с идентификатором countdown. Плагин добавляет ему класс countdownHolder (поэтому несколько стилей применяются к элементу с помощью кода CSS).

Рассмотрим разметку для цифр. Существует два элемента с классом digit для каждой единицы времени (дни, часы, минуты и секунды), что налагает ограничения по обратному отсчету количества дней (не более 99).

Статический класс определяет для цифр градиентный фон и тени. При анимации данный класс удаляется, и CSS3 работает без замедления. Цифры объединены в группы, поэтому легко изменить стили для них. Например, добавление свойства font-size к классу .countDays будет влиять на обе цифры дня.

Элемент .countDiv является разделителем между единицами времени. Двоеточие формируется с помощью псевдо элементов .

А как генерируется разметка?

Maintain Clock Progress across Pages

Sometimes it’s necessary to preserve the state of the clock for more than just the current page. If we wanted to set a 10-minute timer across the site, we wouldn’t want it to reset when the user goes to a different page.

One solution is to save the clock’s end time in a cookie. That way, navigating to a new page won’t reset the end time to ten minutes from now.

Here’s the logic:

1. If a deadline was recorded in a cookie, use that deadline.
2. If the cookie isn’t present, set a new deadline and store it in a cookie.

To implement this, replace the variable with the following:

This code makes use of cookies and regular expressions, both of which are separate topics in their own right. For that reason, I won’t go into too much detail here. The one important thing to note is that you’ll need to change to your actual domain.

Календарь на JavaScript

Описание: Достаточно простой календарь на JavaScript, однако, сама реализация календаря не является достаточно простой, поэтому код получился достаточно большим. А вообще, вещь достаточно полезная на сайте, поэтому копировать код и размещать его на своём сайте.

Код javascript (вставлять между тегами <head> и </head>):

<script language = «javascript»>function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11) this = m0; this = m1; this = m2; this = m3; this = m4; this = m5; this = m6; this = m7; this = m8; this = m9; this = m10; this = m11;>function calendar() var monthNames = » ЯнвФевMaрАпрMaйИюнИюлАвгСенОктНояДек»; var today = new Date(); var thisDay; var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30,31, 30, 31); year = today.getYear(); if (year < 2000) year = year + 1900; thisDay = today.getDate(); if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays = 29; nDays = monthDays; firstDay = today; firstDay.setDate(1); testMe = firstDay.getDate(); if (testMe == 2) firstDay.setDate(0); startDay = firstDay.getDay(); document.writeln(«<div align = ‘center’>»); document.write(«<table border = ‘1’>»); document.write(«<tr><th colspan=’7′>»); document.write(monthNames.substring(today.getMonth() * 3 + 3, (today.getMonth() + 1) * 3 + 3)); document.write(«. «); document.write(year); document.write(«<tr><th>Вск <th>Пон <th>Вт <th>Ср <th>Чт <th>Пт <th>Сб» ); document.write(«<tr>»); column = 0; for (i = 0; i < startDay; i++) document.write(«<td width=’30’>»); column++; > for (i = 1; i <= nDays; i++) document.write(«<td width=30>»); if (i == thisDay) document.write(«<span style = ‘color: red;’>») document.write(i); if (i == thisDay) document.write(«</span>») column++; if (column == 7) document.write(«<tr>»); column = 0; > > document.write(«</table>»); document.writeln(«</div>»);></script>

Код HTML (вставлять между тегами <body> и </body>):

<script language = ‘javascript’> calendar();</script>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья : http://vk.com/myrusakov.Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 26 ):

Спасибо надеюсь понадобится =).

Спосибо большое Очень помогло для написание своего скрипта Но почему начинается с воскресения?

Спасибо за скрипт. А как переставить воскресенье в конец? И как редактировать размер таблицы?

document.write(«<table border = ‘1’>»); — вот здесь добавьте атрибут width с нужным значением. Чтобы переставить воскресенье в конец, придётся достаточно много подправить в коде.

ещё хотел узнать: цвет таблицы и букв цифр как изменить? заранее благодарен!

Вместо <table border = ‘1’> написать <table border = ‘1’ style = ‘background-color: red; color: green;’>

Почему календарь выходит поверх шапки? Мне бы его в табличку,под меню,а?

Так и разместите его в нужном месте, вставьте код под меню, а не в самом верху (потому и поверх шапки).

Вставила,всё о’кей! Большое спасибо!

Почему-то нет рамок,месяц и год прижимаются к левому краю календаря.

А кто мешает это добавить? Добавляйте, здесь же не курсы дизайна, а просто скрипт календаря.

Да но наверху стоит нормальный календарь. А я в js полный дуб.

Эта обводка зависит от браузера. JS для дизайна в данном случае знать не нужно. Достаточно знать HTML и, желательно, CSS.

Сейчас проверил в опере,сафари,мазиле,хроме,эксплоере.Везде одинаково.

Вы про какую обводку говорите? Если про обводку border у table, то она везде разная.

Да у меня она вообще не встала.Где здесь можно вставить скрин что-бы показать что у меня вышло.

Я код скопировал, поставил его, но чего то не работает, может быть там где кончается javascript не надо было скобку закрывать? У вас там было «</script»

Скобку надо закрывать, статью подправил. Копируйте код внимательно, и тогда всё будет работать.

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavSplit NavigationNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Обратный отчет – пример на JavaScript

Рассмотрим простой пример обратного отчета, где Вы сами будете задавать время, которое будет отчитываться в секундах. Вот код, он также прокомментирован.

Начать Остановить

   
   <script>
   //Объявим переменную
   var stopTimer;
   
   //Функция для старта 
   function testTimer(startTime) {
     //для повторного запуска очистим rezult
     document.getElementById("rezult").innerHTML = '';
     //выключим кнопку запуска
     var bot = document.getElementById("bot");
     bot.setAttribute("disabled","");
     //сколько будет длиться обратный отчет
     var time = startTime;
     //определим сколько минут
     var min = parseInt(time / 60);
     if ( min < 1 ) min = 0;
        time = parseInt(time - min * 60);
     if ( min < 10 ) min = '0'+min;
     //определим сколько секунд
     var seconds = time;
     if ( seconds < 10 ) seconds = '0'+seconds;
     //отрисовываем время
     document.getElementById("time").innerHTML='<span>Осталось времени- '+min+' мин '+seconds+' секунд</span>';
     //уменьшаем общее время на одну секунду
     startTime--;
     //смотрим время не закончилось
     if ( startTime  >= 0 ) {
                //если нет, то повторяем процедуру заново
       stopTimer  =  setTimeout(function(){testTimer(startTime); }, 1000);
           //если закончилось, то выводим сообщение на экран, и делаем кнопку запуска активной
   } else {
     document.getElementById("time").innerHTML='<span>Осталось времени- 00 мин 00 секунд</span>';
     var rezult = document.getElementById("rezult");
     rezult.innerHTML ="Время вышло";
     clearTimeout(stopTimer);
     var bot = document.getElementById("bot");
     bot.removeAttribute("disabled","disabled");
     bot.removeChild(bot.childNodes);
     var text = document.createTextNode("Начать заново");
     bot.appendChild(text);
    }
   }
   
   //Функция для остановки обратного отчета
   function stop(){
        //очистим переменную с таймером
        clearTimeout(stopTimer);
        //и включим кнопку запуска
        var bot = document.getElementById("bot");
        bot.removeAttribute("disabled","disabled");
   }
   </script>
   
   <p id = "time"></p>
   <button id = "bot" onclick="testTimer (10)">Начать</button>
   <button  onclick="stop ()">Остановить</button>
   <p id = "rezult">
   </p>

Где при запуске функции testTimer, необходимо передать параметр количество секунд, которое должно отчитаться.

Вот простые примеры, которые помогут Вам написать что-то серьезное и внедрить на своем ресурсе. Удачи!

Нравится11Не нравится6

Другие примеры

Пример — Измерение времени выполнения:

Пример — Сравнение дат с помощью объекта Date:

Довольно простой и эффективный способ.

Пример — Текущее время:

Пример — Создание читаемой даты:

В случае с методом , мы добавили к результату 1. Это нужно потому, что этот метод возвращает месяц числом, начиная с 0. Такая вот особенность JavaScript.

Есть ещё одна проблема — форматирование. Инструкция выдаст результат, который будет подобен следующему:

Было бы здорово добавить недостающий ‘0’ перед секундами и месяцем, чтобы получить результат в удобном для нас виде:

Просто добавим условие в код, который генерирует финальную строку:

Этот код мы увидим в следующем, чуть более сложном примере.

Пример — Собственная функция форматирования даты:

После выполнения код будет отображать результат похожий на этот:

Это полный пример кода, который отображает дату и время в JavaScript. Он также демонстрирует, как действуют методы объекта Date.

Создаём дату

Для создания нового объекта даты достаточно команды . В неё обычно передают параметры в одном из четырёх видов:

• Дата как один параметр-строка
• Дата как набор параметров
• Дата как timestamp
• Без параметров

Дата как один параметр-строка

При таком способе мы просто передаём строку в конструктор :

Это привычный нам способ записи даты. Когда мы видим запись , мы сразу понимаем, что речь идёт о 23 октября 1976 года. Но если мы передадим такую строку в конструктор , то мы получим ошибку . И это совершенно логично. Дело в том, что в разных странах формат записи данных отличается. Например, мы в России прочтём запись как 11 июня 2019 года. А в некоторых странах эту же запись прочтут как 6 ноября 2019 года. «Ну должен же быть общий для всех формат записи даты», — скажете вы. И будете совершенно правы. Такой стандарт есть, и он называется ISO 8601 Extended Format. Именно в таком формате нужно передавать строку даты в конструктор . Выглядит этот формат так:

Разберём что тут происходит:

• — 4 цифры года
• — 2 цифры месяца (где 01 это январь, а 12 — декабрь)
• — 2 цифры дня (от 0 до 31)
• — разделитель
• — индикатор, после которого указывается время
• — часы (от 0 до 24)
• — минуты (от до 59)
• — секунды (от 0 до 59)
• — миллисекунды (от 0 до 999)
• — разделитель времени
• — если указать её в конце, то дата будет в формате UTC. Если отсутствует, то дата будет в локальном часовом поясе(это работает только если указано время).

Время указывать необязательно, это опциональный параметр.

Вроде всё понятно и достаточно просто. Но у этого способа есть один очень серьёзный недостаток. Конструкция возвращает разный результат. Если вы находитесь ниже Гринвича, то вы получите 22 октября 1976 года. А если вы выше Гринвича, то результат будет 23 октября 1976. Это происходит потому, что если строка передаётся без времени, то результат считается в UTC. Если вы хотите получить результат в локальном часовом поясе, то необходимо передать время, как минимум и . Незнание этой особенности часто приводит к ошибкам, которые крайне сложно отследить. В общем такой способ создания даты не очень надёжен и лучше его не использовать.

Дата как набор параметров

В конструктор создания даты можно передать до 7 параметров.

1. Год — 4 цифры
2. Месяц — номер месяца (следует помнить, что в javascript отсчёт месяцев начинается с 0)
3. День — день месяца (от 1 до 31)
4. Часы — часы (от 0 до 24)
5. Минуты — минуты (от 0 до 59)
6. Секунды — секунды (от 0 до 59)
7. Миллисекунды — миллисекунды ( от 0 до 999)

Довольно части разработчики избегают такого способа создания даты, потому что он кажется сложным. Но на самом деле это не так. Всё очень просто. Посмотрим пример:

Просто читаем параметры слева направо. Год 2019 — месяц июнь — число 11 — часы 12 — минуты 36 — секунды 23. Единственная проблема здесь — запомнить, что месяцы начинаются с 0. , и т.д. Но если просто принять это как данность, то никаких проблем не возникает. Зато этот способ лишён путаницы между часовыми поясами. Результат всегда будет в локальном часовом поясе.

Дата как timestamp

В javascript понятие timestamp означает количество миллисекунд, прошедших с 1 января 1970 года. Для создания даты такой подход практически не используется. Зато он очень удобен при сравнении дат.

Без параметров

Если вы не передаёте никаких параметров в конструктор новой даты, то вы получите текущую дату в локальном часовом формате.

Создание даты — итоги

1. Для создания нового объекта даты используется
2. Существует четыре возможных синтаксиса параметров создания нового объекта даты
   2.1 Дата как параметр-строка
   2.2 Дата как набор параметров
   2.3 Дата как timestamp
   2.4 Без параметров
3. Не используйте вариант с параметром-строкой
4. Самый оптимальный вариант создания нового объекта даты — с датой как набор параметров
5. Запомните, что нумерация месяцев в javascript начинается с 0

Теперь давайте поговорим о том, как представить дату в виде понятной строки.

Вывод таймера

Теперь, когда у вас есть все данные в правильном формате, вы можете вывести таймер на экран. Метод объекта документа позволяет нацеливать элементы HTML, созданные на шаге 1, соответственно на , , и . Вы можете поместить контент в целевые элементы HTML с помощью свойства innerHTML.

Добавьте следующий код в блок под вычислениями преобразования времени:

document.getElementById("timer-days").innerHTML = days + 
"<span class='label'>DAY(S)</span>";

document.getElementById("timer-hours").innerHTML= ("0" + hours).slice(-2) +
"<span class='label'>HR(S)</span>";

document.getElementById("timer-mins").innerHTML= ("0" + mins).slice(-2) +
"<span class='label'>MIN(S)</span>";

document.getElementById("timer-secs").innerHTML= ("0" + secs).slice(-2) +
"<span class='label'>SEC(S)</span>";

Приведенный выше код добавляет символ «0» к часам, минутам и секундам, когда их значения меньше 10. Хотя в этом нет необходимости, таймер выглядит лучше, когда количество цифр не меняется все время на экране.

Это может быть достигнуто с помощью метода форматирования, который использует метод , который можно использовать для возврата части набора данных. Например, вырезает первый символ строки и возвращает оставшуюся часть строки. Аналогично, удаляет первые два символа и возвращает остальные. Отрицательное значение возвращает целевые символы, а не вырезает их. Итак, возвращает последние два символа строки.

В коде вам нужно добавить каждую цифру к «0» и вернуть два последних символа с помощью . Таким образом, JavaScript будет добавлять начальный ноль к каждому однозначному числу, но оставит двузначные числа без изменений. Например:

• (’05’).slice(-2) = ’05’;
• (‘018′).slice(-2) = ’18’;

Создаём свой формат вывода даты

Возможно, это звучит страшно и сложно, но на практике всё не так. Javascript предлагает достаточный набор методов для работы с объектом даты, которые помогут нам решить эту проблему.

Допустим, нам нужно выводить дату в таком виде: .

Рассмотрим, какие методы работы с датой нам доступны:

1. — возвращает год, в нашем случае 2019
2. — возвращает месяц, в нашем случае 5 (мы же помним, что отсчёт начинается с 0)
3. — возвращает день, в нашем случае 12
4. — возвращает день недели, в нашем случае 3 (отсчет дней также начинается с 0, первый день — воскресенье)

Этого более чем достаточно для достижения нашей цели. Получить число и год проще простого:

Чтобы вывести месяц придётся немного поработать:

День недели определим похожим образом:

Теперь, когда у нас есть все необходимые данные, осталось только собрать конечный результат:

Сравнение дат

Сравнить даты можно с помощью операторов сравнения , , , :

Тут всё очень просто. Сложности начинаются когда необходимо сравнить являются ли даты полностью одинаковыми. Сделать это с помощью или не получится:

Для сравнения полного равенства дат необходимо сравнивать их , который можно получить с помощью метода :

Если же такая точность не нужна и необходимо проверить только совпадение дня дат, то код будет выглядеть так: