JS-полезности

В данной записи будут собираться различные интересные полезные решения на jQuery и просто на js.

Случайный класс

Назначаем элементам случайные классы из выборки.

// Случайный класс
$(document).ready(function(){
    var classes = ["one", "two", "three", "four", "five"];

    $(".hentry > a").each(function(){
        $(this).addClass(classes[~~(Math.random()*classes.length)]);
    });
});

Случайное число в диапазоне

$(document).ready(function() { 
	var rnumber = randomInteger(155, 255);
	$(".rnumber").text(rnumber);
});

function randomInteger(min, max) {
	let rand = min - 0.5 + Math.random() * (max - min + 1);
	return Math.round(rand);
}

Число подставится в элемент с классом rnumber.

Если нужно выводить с каким то словом которое нужно склонять

$(document).ready(function() { 
	// случайное число
	var rnumber = randomInteger(155, 255);
	$(".rnumber").text(rnumber);
	
	$('.variant').html( declOfNum(rnumber, ['вариант', 'варианта', 'вариантов']) );
});

function randomInteger(min, max) {
	let rand = min - 0.5 + Math.random() * (max - min + 1);
	return Math.round(rand);
}

// регулярное выражение
function declOfNum(n, text_forms) {  
    n = Math.abs(n) % 100; var n1 = n % 10;
    if (n > 10 && n < 20) { return text_forms[2]; }
    if (n1 > 1 && n1 < 5) { return text_forms[1]; }
    if (n1 == 1) { return text_forms[0]; }
    return text_forms[2];
}

Выводится так:

Найдено <span class="rnumber"></span> <span class="variant"></span>

Индикация прокрутки страницы

Выведем верху экрана индикацию прокрутки страницы. Вставляем в самом верху после <body>

<div class="indicator"></div>

Скрипт:

var lastCall, timeoutId, interval = 100;
$(window).scroll(function() {
	var curnow = new Date().getTime();
	if (lastCall && curnow < (lastCall + interval)) {
		clearTimeout(timeoutId);
		timeoutId = setTimeout(function() {
			lastCall = curnow;
			setProgressBarWidth();
		}, interval - (curnow - lastCall))
	} else {
		lastCall = curnow;
		setProgressBarWidth();
	}
})

function setProgressBarWidth() {
	var windowScrollTop = $(window).scrollTop();
	var docHeight = $(document).height();
	var winHeight = $(window).height();
	var scrollPercent = (windowScrollTop / (docHeight - winHeight)) * 100;
	$(".indicator").css('width', scrollPercent + '%');
}

CSS

.indicator {
    width: 0%;
    height: 4px;
    background: #fdcd21;
    position: fixed;
    top: 0;
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
    z-index: 99999;
}

Удалить все ссылки со страницы

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

$("a").removeAttr("href");

Поменять один стиль на другой на всей странице

jQuery('.wrap').addClass('wrapper').removeClass('wrap');

Универсальная функция отправки к якорной ссылке

function scrollToAnchor(aid){
    var tag = jQuery("#" + aid);
    jQuery('html,body').animate({scrollTop: tag.offset().top},'slow');
}

Внутри других функций используем так:

scrollToAnchor('switcher-block');

Переключение состояния кнопки

$(function(){
   $('#menu-icon').click(function(){
		var text = $(this).html();
		$(this).html(text == '<i class="fa fa-bars"></i>' ? '<i class="fa fa-times"></i>' : '<i class="fa fa-bars"></i>');
    })
});