/ Scripts & jquery / JS-полезности

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

11.08.2020

146

В данной записи будут собираться различные интересные полезные решения на 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;
}

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

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

JS-полезности
Parallax расширение сайта
Рекомендации для васParallax расширение сайтаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.