Мы знаем какой интернет-магазин Вам нужен
Интернет-магазины для малого бизнеса, предпринимателей и самозанятых
Ваше имя:
Email:
Телефон:



или напишите в Telegram Whatsapp

Заметки: Javascript

Задача: Есть общий цвет блока. Нужно с помощью javascript вычислить цвет для заголовка такого же оттенка, но более темный.

Для реализации такой задачи вспомним, что цвет может быть задан не только в форматах HEX и RGB, но и в формате HSL.

Запись одного и того же цвета в разных форматах:

  • HEX: #117fb9
  • RGB: rgb(17, 127, 185)
  • HSL: hsl(201, 91%, 73%)

HSL расшифровывается как hue, saturation, lightness - тон, насыщенность и светлота. Первый параметр - это градусы цветового круга, может принимать значение от 0 до 360. Второй и третий параметры - процент, от 0 до 100. При получении цвета в формате hsl можно легко манипулировать со светлостью цвета, изменяя только последний 3-ий параметр.

Для перевода цвета в формат hsl воспользуемся формулами перевода из wikipedia.org. Обычно цвет хранится в формате HEX. А для перевода на понадобится запись цвета в формате RGB.

HEX формат цвета - это сокращенная запись цвета в формате RGB, но представленная в шестнадцатеричной формате. Каждая пара знаков обозначает по очереди содержание красного (r), зеленого (g) и голубого (b) цветов. В нашем примере цвет #117fb9 соответственно это 11( r ), 7f( g ), и b9 ( b ). При переводи этих трех чисел в десятеричный формат, получается: 17( r ), 127( g ) и 185( b ).


//функция перевода цвета из формата hex в массив hsl
function hexToHsl(color){  

    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color); 
    let r = parseInt(result[1], 16) / 255;
    let g = parseInt(result[2], 16) / 255;
    let b = parseInt(result[3], 16) / 255;

    let cmin = Math.min(r, g, b);
    let cmax = Math.max(r, g, b);
    let delta = cmax - cmin;

    let hue, saturation, lightness;
    if(delta == 0){
        hue = 0;
    }else if(cmax == r && g >= b ){
        hue = (g - b) / delta;
    }else if(cmax == r && g < b ){
        hue = (g - b) / delta + 6;
    }else if(cmax == g) {
        hue = (b - r) / delta + 2;
    } else {
        hue = (r - g) / delta + 4;
    }
    hue = Math.round(hue * 60);

    lightness = ((cmax + cmin) / 2) * 100;
    lightness = Math.round(lightness);

    lightness = noMiddleColor(lightness);

    if(delta == 0 || lightness == 0){
        saturation = 0;
    }else{
        saturation = (delta / (1 - Math.abs(1 - (cmax + cmin)))) * 100;
    }
    if (saturation < 0) {
        saturation += 100;
    }
    saturation = Math.round(saturation);

    return Array(hue, saturation, lightness);
}

//функция для получения более темного или более светлого цвета того же оттенка и насыщенности.
//при положительном значении procent цвет будет светлее, при отрицательном - темнее.
function hslPerc(color, procent){
    let l = color[2];
    l = parseInt(l+l*procent/100);
    if(l > 100){l = 100;}
    return Array(color[0], color[1], l);
}

//функция возвращающая цвет в строчном формате из массива
function hslColor(color){
    return 'hsl('+color[0]+','+color[1]+'%,'+color[2]+'%)';
}
let color='#117fb9';
let darkColor = hslPerc(hexToHsl(color), -30);
element.style.color = hslColor(darkColor);



10.08.2022 13:49 Подробнее

Задача: Есть файл svg с набором из нескольких элементов вида, как описано здесь. Нужно увидеть сами картинки в браузере.

Для этого вставим svg на страницу с помощью тега <embed>. И далее, разобрав его на элементы <symbol>, выведем как отдельное svg-изображение, попутно подписав id каждого. Теперь можно увидеть свой svg файл на странице.

<!DOCTYPE html>
<html>
<head>
    <title>Иконки</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<style>
    body{
        font-size: 90%;
    }
    embed{
        display: none;
    }
    .iconsBox{
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-gap: 20px;
        border-bottom: 3px solid #ccc;
        padding-bottom: 20px;
    }
    .iconsBox > div{
        text-align: center;
    }
    .iconsBox > div p{
        margin-bottom: 10px;
    }
    .iconsBox svg{
        width: 32px;
        height: 32px;
    }
</style>

<script>
showSetSvg('icons.svg');
//icons.svg - имя и путь к разбираемому svg-файлу

function showSetSvg(namefile){
    let symbBox = document.createElement('embed');
    symbBox.setAttribute('type', 'image/svg+xml');
    symbBox.setAttribute('src', namefile);
    let body = document.body;
    body.appendChild(symbBox);

    let iconsBox = document.createElement('div');
    iconsBox.classList.add('iconsBox');
    body.appendChild(iconsBox);

    symbBox.onload = function(){
        let svgInner = symbBox.getSVGDocument();
        let symb = svgInner.querySelectorAll('symbol');

        for(let i = 0; i < symb.length; i++){
            let svgBox = document.createElement('div');
            svgBox.innerHTML = '<p>' + symb[i].id + '</p><svg class="svgicons"><use xlink:href="' + symbBox.src + '#' + symb[i].id + '"></use></svg>';
            iconsBox.appendChild(svgBox);
        }
    }

}

</script>

</body>
</html>


01.08.2022 13:56 Подробнее

Задача: Обрезать текст до какой-то длины и вставить ссылку "читать полностью", по нажатию на которую откроется остальной блок.

Рассматривается случай только форматированного текста с тегами. Суть функции: найти конец параграфа </p> или тег <br> после минимальной длины текста. Далее в эту позицию вставить ссылку, после нее все скрыть. По нажатию на ссылку - восстановить изначальный текст.


function cropText(box, minLength){
//box - элемент, с которым работаем,  minLength - минимальная длина текста, которая должна быть видна
    let text = box.innerHTML;

    if(text.length > minLength){
        let pos = text.indexOf('<br>', minLength+1);
        let pos2 = text.indexOf('</p>', minLength+1);

//выбираем ближайший конец строки или параграфа
        if(pos == -1  && pos2 != -1){pos = pos2;}
        if(pos < pos2 && pos2 != -1){pos = pos2;}

//в случае, если такая позиция есть, делаем, что и планировали
        if(pos != -1  &&  ((pos+4) < text.length)){
            box.innerHTML = text.slice(0, pos+4) + '...<br><a class = "swapmoreA">посмотреть полностью</a>';
            let aa = box.querySelector('.swapmoreA');
            aa.setAttribute('href', 'javascript: void(0);');
            aa.addEventListener('click', function(){
                box.innerHTML = text;
            })
        }
    }
}



20.07.2022 18:20 Подробнее

Находясь на нашем сайте, вы принимаете условия использования файлов cookies. Более подробная информация здесь.