В данной записи будут собираться различные интересные полезные решения на 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>');
})
});Разрядность
var num = 1234567890;
var result = num.toLocaleString();
console.log(result);Изменение скорости видео
document.querySelector('video').playbackRate = 3.0;
