Для получения полного доступа
зарегистрируйтесь.

zular    36   17 037


Занимаюсь фронтендом

  • Krasnodar
  • AT Consulting
  • JavaScript, CSS
  • Высшее
  • Зарегистрирован 4 года назад

В некоторых случаях требуется выдеруть из URL параметры или текущюю локализацию и еще что-нибудь, для этого и существует данный скрипт. Применяем очень просто

parseUrl('https://gostash.it/ru/stashes/create?type=snippet')

В ответ получаем следующее:

{
    "protocol":"https:",
    "host":"gostash.it",
    "hostname":"gostash.it",
    "pathname":"/ru/stashes/create",
    "search":"?type=snippet",
    "hash":""
}

Сам скрипт:

  function parseUrl(href) {
    const match = href.match(/^(https?\:)\/\/(([^:\/?#]*)(?:\:([0-9]+))?)([\/]{0,1}[^?#]*)(\?[^#]*|)(#.*|)$/);

    return {
      protocol: match[1],
      host: match[2],
      hostname: match[3],
      port: match[4],
      pathname: match[5],
      search: match[6],
      hash: match[7],
    };
  }

Демо 216bf798e5c8.gif

Как использовать

Добавить код в свой файл стилей, на нужном блоке добавлять класс preloader.

Код

.preloader {
    position: relative;
    min-height: 60px;
}

.preloader:before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .9);
    height: 100%;
    width: 100%;
    display: block !important;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.preloader:after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    border: 4px rgba(0, 0, 0, .25) solid;
    border-top: 4px #1071b6 solid;
    border-radius: 50%;
    -webkit-animation: preloader .6s infinite linear;
            animation: preloader .6s infinite linear;
}

@-webkit-keyframes preloader {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
                transform: rotate(359deg);
    }
}

@keyframes preloader {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
                transform: rotate(359deg);
    }
}

В своей работе мне понадобилось создать REST интерфейс, и обращаться на бек через GET параметры. Привожу сниппет в нескольких примерах на JS и JQ.

//JS версия

var obj = {
    param1: 'something',
    param2: 'somethingelse',
    param3: 'another',
    bla: {
        param5: 'i\'m nested!',
        ja: {
            param6: 'i am really nested'
        }
    }
};

var serialiseObject = function(obj) {
    var pairs = [];
    for (var prop in obj) {
        if (!obj.hasOwnProperty(prop)) {
            continue;
        }

        if (Object.prototype.toString.call(obj[prop]) == '[object Object]') {
            pairs.push(serialiseObject(obj[prop]));
            continue;
        }

        pairs.push(prop + '=' + obj[prop]);
    }
    return pairs.join('&');
}

console.log(serialiseObject(obj));

// param1=something&param2=somethingelse&param3=another&param5=i'm nested!&param6=i am really nested

// jQuery версия
var params = { width:1680, height:1050 };
var str = jQuery.param( params );

console.log(str)
// width=1680&height=1050

Эту функцию удобно использовать для вывода чисел пользователю.

var roundCount = function (number) {
    var result;

    if (number > 999 && number <= 999999){
        result = number / 1000 + 'k';
    } else if (number > 999999){
        result = '>1M';
    } else {
        result = number;
    }
    
    return result;
};

console.log(roundCount(234234234)) // ">1M"
console.log(roundCount(434))       // 434
console.log(roundCount(54345))     // "54.345k"
console.log(roundCount(34567))     // "34.567k"
console.log(roundCount(234234))    // "234.234k"
console.log(roundCount(43423))     // "43.423k"
console.log(roundCount(2344234))   // ">1M"

Здравствуйте, скрипт оч прост, делал его минут 5, но может кому пригодиться.

Что делает этот код? создаем переменную result, онаобязательно должнабыть равна 0 Бьем строку методом split, после разбития это уже массив, по нему проходимся методом map, предварительно сконвертировав текущий элемент в число, дальше просто складываем числа и выводим результат.

var target = "5466365465";
var result = 0;

target.split("").map(function(item){
  result += +item;
});

console.log(result); // 50

//другое решение этой задачи

var target = "5466365465".split("");

var result = target.reduce(function(prev, current){
  return (+prev) + (+current);
});

console.log(result); // 50

Здравствуйте, столкнулся с задачей фиксации меню при скролле страницы, был найден скрипт на просторах интернета, который решил мою задачу. Я его немного изменил под свои нужды.

Зависимости:

  • Jquery

Классы:

  • .nav-afix - само меню
  • .affix - класс который добавляется в после скролла

Преимущества скрипта:

  • не надо высчитывать отступ сверху (скрипт сам его отсчитывает)
// --- affix top menu script ---
$(() => {
    let target = $('.nav-afix');
    let startPosition = target.offset().top;

    $(window).scroll(() => {
        if ($(window).scrollTop() >= startPosition) {
            if (!target.hasClass()) {
                target.addClass('affix')
            };
        } else {
            target.removeClass('affix')
        };
    });
});

Регулярное выражение для проверки ФИО.

Пример валидный имен

  • Петров Петр Петрович
  • Петров-Черный Петр Петрович
  • И Иван Иванович
  • Ли Лу Янг
  • Dwain Simmons
  • Dwain-Branden Simmons
  • Салим-оглы Мамед
  • Салим-кызы Лейла

Не проходит валидацию

  • фамильные приставки (фон, цу, ибн-, абу-)

Исправлено

  • фамилии из одной буквы (И Иван Иванович)
  • тюрские отчества с постфиксными -оглы/кызы
/^([А-ЯA-Z]|[А-ЯA-Z][\x27а-яa-z]{1,}|[А-ЯA-Z][\x27а-яa-z]{1,}\-([А-ЯA-Z][\x27а-яa-z]{1,}|(оглы)|(кызы)))\040[А-ЯA-Z][\x27а-яa-z]{1,}(\040[А-ЯA-Z][\x27а-яa-z]{1,})?$/

Реализация от пользователя Kosuha606
/^[А-ЯA-Z][а-яa-zА-ЯA-Z\-]{0,}\s[А-ЯA-Z][а-яa-zА-ЯA-Z\-]{1,}(\s[А-ЯA-Z][а-яa-zА-ЯA-Z\-]{1,})?$/

function test (value){
    var regExp = /^([А-ЯA-Z]|[А-ЯA-Z][\x27а-яa-z]{1,}|[А-ЯA-Z][\x27а-яa-z]{1,}\-([А-ЯA-Z][\x27а-яa-z]{1,}|(оглы)|(кызы)))\040[А-ЯA-Z][\x27а-яa-z]{1,}(\040[А-ЯA-Z][\x27а-яa-z]{1,})?$/
    return regExp.test(value)
}

Пример использования:

test("Иванов Иван Иванович"); //true
test("Ли Лу Янг"); //true
test("Dwain Simmons"); //true
test("Dwain-Branden Simmons"); //true
test("И Иван Иванович"); //true
test("Салим-оглы Мамед"); //true
test("Салим-кызы Лейла"); //true