Калькулятор калорий JavaScript

Калькулятор калорий JavaScript WEBSTUDIUS

Простой калькулятор калорий для мужчин и женщин на обычном JavaScript

Рассчитаем вашу потребность в калориях?

Ваш пол
Женщина
Мужчина
Ваша конституция
Выберите вашу физическая активность
Низкая активность
Невысокая активность
Умеренная активность
Высокая активность
Ваша суточная норма калорий:
2700 ккал

Один раз обновить страницу после загрузки без изменения URL

Javascript - перезагрузка страницы 1 раз

Чтобы обновить один раз страницу после загрузки БЕЗ ИЗМЕНЕНИЯ URL, можно использовать этот код на Javascript:



(function()
{
  if( window.localStorage )
  {
    if( !localStorage.getItem('firstLoad') )
    {
      localStorage['firstLoad'] = true;
      window.location.reload();
    }  
    else
      localStorage.removeItem('firstLoad');
  }
})();


Перенаправление на другую страницу с таймером на JQuery

Выводим Div со счетчиком:

<div id="timeLeftBoxx">
<div id="timeLeftNum"></div>
</div>

и сам скрипт:
<script>
function CountAndRedirect(secounds) {

  $('#timeLeftNum').text(secounds);

  $('#timeLeftBox').show();

  var interval = setInterval(function() {

    secounds = secounds - 1;

    $('#timeLeftNum').text('Перенаправление на страницу оплаты произойдет через: '+secounds+' секунд');

    if (secounds == 0) {

      clearInterval(interval);
      if ($("input[name='registerOrder']")) {
      $("input[name='registerOrder']").trigger('click');
      $('#timeLeftBox').hide();
  	}

    }

  }, 1000);

}


$(document).ready(function() {
  
  CountAndRedirect(10);
});
	
</script>

Кнопки выбора цвета (варианта товара) вместо выпадающего меню в карточке товара на Тильде

Tilda - картинка с цветом либо с фото для выбора варианта товара вместо выпадающего списка

Сделано на Javascript и  CSS

Достаточно простой скрипт для реализации красивых кнопок выбора цвета вместо выпадающего меню в карточке товара на Тильде.

Javascript — настроить фильтр (кейс: умный фильтр Битрикс) для выбора (checkbox) только одного раздела фильтра.

Javascript - настроить фильтр (кейс: умный фильтр Битрикс) для выбора (checkbox) только одного фильтра.

Понадобилось сделать так, чтобы была возможность выбрать только какой-то один фильтр, при этом, второй фильтр одновременно с выбранным выбрать было нельзя. ))

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

Для реализации этого в Битрикс, в шаблоне вывода умного фильтра, добавил для input type=»checkbox» в цикле foreach поэлементного вывода дополнительный атрибут

data-filtername="<?=$arItem["NAME"]?>"

где <?=$arItem[«NAME»]?> — это не название пункта фильтра, а название раздела фильтра. Ну, например, раздел фильтра «Цвет» имеет имеет несколько элементов — цветов. Так вот, в каждом элементе раздела «Цвет» будет поле атрибута с названием «Цвет», т.е., data-filtername=»Цвет».

По сути, если элементы фильтра выводятся не в цикле, то атрибут вставляется в нужные input checkbox в HTML.

И там же в шаблоне добавил скрипт для реализации функционала:

<script>

// для первого раздела фильтра
let filterCheck = document.querySelectorAll("input[data-filtername='Одно']");  // выбираем все input с нужным атрибутом
// проходим циклом по всем элементам для проверки: если в другом разделе фильтра уже выбран какой-либо пункт, то, при клике на нашем checkbox, снимаем с него галку и выводим предупреждение

filterCheck.forEach(function(item) {
item.onclick = function() {
if (document.querySelector("input[data-filtername='Другое']:checked")) {
alert('Простите, но невозможно выбрать в фильтре Одно и Другое одновременно.')
item.checked = false; // снимаем галку с элемента
}
}
});

// аналогично первому
let filterCheck2 = document.querySelectorAll("input[data-filtername='Другое']");
filterCheck2.forEach(function(item) {
item.onclick = function() {
if (document.querySelector("input[data-filtername='Одно']:checked")) {
alert('Простите, но невозможно выбрать в фильтре Одно и Другое одновременно')
item.checked = false;
}
}
});

</script>

Реализация, понятное дело, не универсальная, но на скорую руку вполне рабочий вариант.

Javascript — показать DIV при нажатии на кнопку (и скрыть его)

Javascript - перезагрузка страницы 1 раз

Простенький код для показа / скрытия блока DIV (и вообще, любого блока) при нажатии кнопки.

Также происходит проверка подписи кнопки — если подпись «Показать блок», то при клике значение сменится на «Скрыть блок» — и наоборот.

  1. HTML-code
<button id="show_bar" >Показать блок</button>
<div id="bar_block"></div>

2. Стили (style CSS)

<style>
#bar_block {display: none;}
#show_bar { margin: auto;
display: flex;}
</style>

3. И сам скрипт:

<script>
$(document).ready(function() {
$("#show_bar").click(function() {
$("#bar_block").slideToggle();
if ($("#show_bar").html() == 'Показать штрихкод') {
$("#show_bar").html('Скрыть штрихкод');
} else {
$("#show_bar").html('Показать штрихкод');
}
});
});
</script>

Вот и все. Неколько строк кода и куча удовольствия ))

P.S. Если у вас не подключен JQuery — подключите:

<script src=»//code.jquery.com/jquery-3.5.1.slim.min.js» integrity=»sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj» crossorigin=»anonymous» async ></script>

Открыть чат
1
Попробуйте написать нам в WhatsApp!
Попробуйте написать нам в WhatsApp!