Набір прикладів корисного коду з використанням JavaScript

Category: JavaScript Code Examples

Взаимодействовать с ID на странице, если он там присутствует:

if(!document.getElementById('logo')){ /* нет на странице */ } else { /* есть на странице */ }

Округлить число до целого:

x=Math.round(20.49);

Ссылка на js – открытие по клику в новой вкладке

<div>
class=""
title="Открыть `ЧТО ОКРЫВАЕМ`"
onclick="window.open('http://site.ru/','_blank'); return false;">
</div>

Изменение на js background image объекта (по ID)

$( "#button" ).change(function() {
document.getElementById("substrate").style.backgroundImage = "url(http://domain.com/image.jpg)";
});

Изменение стиля элемента при наведении мыши при помощи js

$('input[type="file"]').hover( function(){
$('#id').css('cursor', 'pointer');
});

Загрузка чего-либо после загрузки страницы

$(window).load()

$(document).ready()

Выбрать все чекбоксы js

<input type="checkbox" class="first" />
<input type="checkbox" class="first" checked />
<input type="checkbox" class="first" />

<label><input type="checkbox" class="select-all-first" /> Select all first</label>

<input type="checkbox" class="second" />
<input type="checkbox" class="second" checked />
<input type="checkbox" class="second" />

<label><input type="checkbox" class="select-all-second" /> Select all second</label>

 

$('.select-all-first').on('change', function(){
    $('.first').prop('checked', $(this).is(':checked'))
});

$('.select-all-second').on('change', function(){
    if ($(this).is(':checked'))
        $('.second').each(function(){
            this.checked = true;
        });
    else
        $('.second').removeAttr('checked');
});

 

input, label { display: block; }
label input { display: inline; }

js таймеры

setTimeout раз запускает функцию после истечения времени

setTimeout(expression, timeout);

setInterval запускает функцию с указанным интервалом времени

setInterval(expression, timeout);

Примеры setTimeout

function func() {
  alert( 'some alert text' );
}
setTimeout(func, 1000);
setTimeout("alert('some alert text')", 1000);
setTimeout(function() { alert('some alert text') }, 1000);

Можно сначала установить Timeout, а потом отменить, пример:

var timerId = setTimeout(function() { alert(1) }, 1000);
clearTimeout(timerId);

Пример совместного использования setTimeout и setInterval

var timerId = setInterval(function() {
  alert( "some info" );
}, 2000);

setTimeout(function() {
  clearInterval(timerId);
  alert( 'stop detected' );
}, 5000);

JS изменение размера экрана

window.onresize = function(){
//При изменениии масштаба/размера окна браузера
var width = document.documentElement.clientWidth; //Ширина экрана
var height = document.documentElement.clientHeight; //Высота экрана

alert(width);
}

Простая переадресация JS в зависимости от ширины экрана

Приведенный код достаточно просто вставить в код страницы сразу после открытия body или head.

Если ширина меньше 900px переходим на мобильную версию:

<script language="JavaScript" type="text/javascript"> 
   if(screen.width < 900) document.location = 'https://sapid.info/mobile/'; 
</script>

Если ширина больше или равна 900px переходим на основную версию:

<script language="JavaScript" type="text/javascript"> 
  if(screen.width >= 900) document.location = 'https://sapid.info/'; 
</script>

На JS делаем появление окна при уходе со страницы

<script type="text/javascript">
    $(document).mouseleave(function(e){
    if (e.clientY < 0) {
        // здесь нужно отобразить окно
        $("#decreaseconversion").css({ display: "block" });
        //$('#decreaseconversion').css('display') = 'block';
        
    }     
});
</script>
<div style="display: none;" id="decreaseconversion">
    Скрытый блок
</div>