Подборка небольших, но полезных скриптов на все случаи жизни

Подборка небольших, но полезных скриптов на все случаи жизни Скрипты и боты

Скрипт для определения страны пользователя

Если вы работаете с Кейтаро, то определение страны пользователя не составляет труда. На ваш оффер гео пользователя уже передается в макросе {country_code}. Но если вы не используете Кейтаро, для определения гео можно воспользоваться достаточно простым скриптом с бесплатным API.

Скрипт для определения страны пользователя

Вот пример такого скрипта:

<script>
function fetchCountryCode() {
    var apiKey = 'АПИ_КЛЮЧ';
    fetch(`https://ipinfo.io?token=${apiKey}`)
        .then(response => response.json())
        .then(data => {
            if (data.country) {
                var inputElement = document.querySelector('input[name="country"]');
                if (inputElement) {
                    inputElement.value = data.country;
                } else {
                    console.error('Элемент input не найден');
                }
            }
        })
        .catch(error => console.error('Ошибка при запросе геолокации:', error));
}

document.addEventListener('DOMContentLoaded', function () {
    var interval = setInterval(function () {
        var inputElement = document.querySelector('input[name="country"]');
        if (inputElement) {
            fetchCountryCode();
            clearInterval(interval);
        }
    }, 1000);
});
</script>

<input type="hidden" name="country" value="">

Разбор кода

Этот скрипт использует API сервиса ipinfo.io для получения информации о стране пользователя по его IP-адресу. После загрузки страницы скрипт запускает функцию fetchCountryCode, которая делает запрос к API.

Если запрос успешен и данные о стране получены, скрипт ищет на странице элемент input с именем «country» и записывает в него значение страны. Если элемент не найден, в консоль выводится сообщение об ошибке. Чтобы избежать повторной отправки запроса, если элемент уже найден и заполнен, скрипт использует интервал, который очищается после успешного выполнения.


Таймер обратного отсчета для сайта

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

<script>
  window.onload = function() {
    // Инициализация начальных значений минут и секунд
    var minute = 9;
    var sec = 59;
    // Установка таймера с интервалом в одну секунду
    var timer = setInterval(function() {
      // Отображение времени
      document.getElementById("timer").innerHTML = minute + ":" + (sec < 10 ? '0' : '') + sec;
      sec--;
      if (sec == -1) {
        minute--;
        sec = 59;
        // Проверка, не истекло ли время
        if (minute < 0) {
          // Сброс таймера на 5 минут, если время истекло
          minute = 5;
          sec = 0;
        }
      }
    }, 1000);
  }
</script>

<span id="timer" style="color: red;">9:59</span>

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

  1. Инициализация: Таймер начинается с 9 минут и 59 секунд.
  2. Обновление таймера: Каждую секунду секунды уменьшаются на единицу.
  3. Обработка истечения времени: Как только секунды достигают -1 (что означает, что минута полностью прошла), минуты уменьшаются на одну, а секунды сбрасываются до 59. Если минуты истекают (становятся меньше 0), таймер сбрасывается на 5 минут.
  4. Отображение: Время отображается в элементе с id="timer", при этом добавляется ведущий ноль к секундам, если они меньше 10.
Таймер обратного отсчета для сайта

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


Скролл до формы на вашем сайте

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

Настройка

Для начала убедитесь, что у элемента формы на вашей странице есть идентификатор (ID). Это необходимо для того, чтобы скрипт мог точно определить, куда нужно прокрутить страницу. Например, если ваша форма обёрнута в div, то добавьте к этому div ID «form»:

<div id="form">
    <!-- Ваша форма -->
</div>

JavaScript для скроллинга

Далее, вставьте следующий JavaScript код на вашу страницу. Этот скрипт добавляет класс ‘to_form’ ко всем ссылкам на странице, чтобы при клике на любую из них страница плавно прокручивалась к форме.

<script>
    // Добавляем класс 'to_form' ко всем ссылкам на странице
    $("a").addClass('to_form');

    // Обработка клика или касания на элементы с классом 'to_form'
    $(".to_form").on("touchend click", function (e) {
        e.preventDefault();  // Отменяем стандартное действие элемента (переход по ссылке)
        
        // Плавная прокрутка к элементу с ID 'form'
        $('body,html').animate({
            scrollTop: $('#form').offset().top
        }, 800);  // Продолжительность анимации 800 миллисекунд
    });
</script>

Принцип работы кода:

  1. Добавление класса: Сначала скрипт добавляет класс to_form ко всем ссылкам на странице. Это нужно для того, чтобы можно было легко настроить, какие ссылки будут активировать скролл.
  2. Обработка событий: При клике или касании (touchend) на элемент с классом to_form, скрипт предотвращает стандартное поведение браузера (переход по ссылке) и выполняет анимацию прокрутки.
  3. Анимация прокрутки: Страница плавно прокручивается к элементу с указанным ID, в данном случае ‘form’.

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


Показ текущей даты на вашем сайте

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

Вставка скрипта

Просто скопируйте и вставьте следующий код в HTML вашего сайта там, где вы хотите видеть дату:

<script type="text/javascript">
    var appendNull = function (num) {
        return num < 10 ? '0' + num.toString() : num;
    };

    var d = new Date();
    var p = new Date(d.getTime());
    var monthb = '01,02,03,04,05,06,07,08,09,10,11,12'.split(',');

    document.write(appendNull(p.getDate()) + '.' + monthb[p.getMonth()] + '.' + p.getFullYear());
</script>

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

  1. Функция appendNull: Эта функция принимает числовой аргумент и добавляет ноль перед числом, если оно меньше 10. Это обеспечивает форматирование даты с двумя цифрами для дня и месяца, например 05 вместо 5.
  2. Создание объекта даты: Скрипт создаёт объект Date, который содержит текущие дату и время.
  3. Форматирование и вывод даты: Используется метод getDate() для получения текущего дня, getMonth() для получения текущего месяца (возвращается как индекс от 0 до 11, поэтому используется массив monthb для соответствия месяцев их числовым значениям), и getFullYear() для получения полного года. Затем скрипт выводит дату в формате DD.MM.YYYY.
Показ текущей даты на вашем сайте

Пример использования

Если вставить этот скрипт в HTML страницы, текущая дата будет отображаться прямо на вашем сайте в указанном месте. Это может быть полезно для окончания акции, либо указать как последний день скидки. Думаю что приминение найдет каждый для себя.

Всем отличного дня и хорошего настроения! Жду вас в своем ТГ канале)

Оцените статью
BoostClicks