Архивы WEB - Страница 19 из 54

gif2webp : крнвертация gif в формат webp

27.02.2021 Павел Грибов WEB

Задача: увеличить скорость загрузки анимации на одном из сайтов

Решение: переведем анимацию в формат webp. Для этого используем утилиту gif2webp :

npm install gif2webp

1	npm install gif2webp

Далее собственно конвертируем:

gif2webp dostavka_s33k-z4.gif -o dostavka_s33k-z4.webp

1	gif2webp dostavka_s33k-z4.gif -o dostavka_s33k-z4.webp

Оставить комментарий gif2webp

Javascript: конвертация даты и строки в тип Date

18.02.2021 Павел Грибов WEB

Задача: преобразовать строку вида 18.02.2021 10:12 в переменную javascript типа дата.

Решение: создадим универсальный прототип конвертирования для строки:

String.prototype.toDateFromat = function(format){
  var normalized      = this.replace(/[^a-zA-Z0-9]/g, '-');
  var normalizedFormat= format.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-');
  var formatItems     = normalizedFormat.split('-');
  var dateItems       = normalized.split('-');

  var monthIndex  = formatItems.indexOf("mm");
  var dayIndex    = formatItems.indexOf("dd");
  var yearIndex   = formatItems.indexOf("yyyy");
  var hourIndex     = formatItems.indexOf("hh");
  var minutesIndex  = formatItems.indexOf("ii");
  var secondsIndex  = formatItems.indexOf("ss");

  var today = new Date();

  var year  = yearIndex&gt;-1  ? dateItems[yearIndex]    : today.getFullYear();
  var month = monthIndex&gt;-1 ? dateItems[monthIndex]-1 : today.getMonth()-1;
  var day   = dayIndex&gt;-1   ? dateItems[dayIndex]     : today.getDate();

  var hour    = hourIndex&gt;-1      ? dateItems[hourIndex]    : today.getHours();
  var minute  = minutesIndex&gt;-1   ? dateItems[minutesIndex] : today.getMinutes();
  var second  = secondsIndex&gt;-1   ? dateItems[secondsIndex] : today.getSeconds();

  return new Date(year,month,day,hour,minute,second);
};

String.prototype.toDateFromat = function(format){

var normalized = this.replace(/[^a-zA-Z0-9]/g, '-');

var normalizedFormat= format.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-');

var formatItems = normalizedFormat.split('-');

var dateItems = normalized.split('-');

var monthIndex = formatItems.indexOf("mm");

var dayIndex = formatItems.indexOf("dd");

var yearIndex = formatItems.indexOf("yyyy");

var hourIndex = formatItems.indexOf("hh");

var minutesIndex = formatItems.indexOf("ii");

var secondsIndex = formatItems.indexOf("ss");

var today = new Date();

var year = yearIndex>-1 ? dateItems[yearIndex] : today.getFullYear();

var month = monthIndex>-1 ? dateItems[monthIndex]-1 : today.getMonth()-1;

var day = dayIndex>-1 ? dateItems[dayIndex] : today.getDate();

var hour = hourIndex>-1 ? dateItems[hourIndex] : today.getHours();

var minute = minutesIndex>-1 ? dateItems[minutesIndex] : today.getMinutes();

var second = secondsIndex>-1 ? dateItems[secondsIndex] : today.getSeconds();

return new Date(year,month,day,hour,minute,second);

};

dt="18.02.2021 10:35:00".toDateFromat("dd.mm.yyy hh:ii:ss");

1	dt="18.02.2021 10:35:00".toDateFromat("dd.mm.yyy hh:ii:ss");

Результат:

Оставить комментарий javascript, дата, строка, строка в дату

Список выбора с checkbox на карте yandex

16.02.2021 Павел Грибов WEB

Чтобы получилось примерно такое:

Нужно выполнить довольно много телодвижений:

    // кнопка фильтров
  var listBoxItems = ['111', '222']
       .map(function(title) {
            return new ymaps.control.ListBoxItem({
                data: {
                    content: title
                },
                state: {
                    selected: false
                }
            })
        }),
        // Список 
        listBoxControl = new ymaps.control.ListBox({
            data: {
                content: 'Фильтр',
                title: 'Фильтр'
            },
            items: listBoxItems,
            state: {
                // Признак, развернут ли список.
                expanded: false,
                filters: listBoxItems.reduce(function(filters, filter) {
                    filters[filter.data.get('content')] = filter.isSelected();
                    return filters;
                }, {})
            }
        });
    myMap.controls.add(listBoxControl);   
    listBoxControl.events.add(['select', 'deselect'], function(e) {
        var listBoxItem = e.get('target');
        console.log(e);
        var filters = ymaps.util.extend({}, listBoxControl.state.get('filters'));
        filters[listBoxItem.data.get('content')] = listBoxItem.isSelected();
        console.log(filters);
        listBoxControl.state.set('filters', filters);
    });

// кнопка фильтров

var listBoxItems = ['111', '222']

.map(function(title) {

return new ymaps.control.ListBoxItem({

data: {

content: title

state: {

selected: false

}

})

}),

// Список

listBoxControl = new ymaps.control.ListBox({

data: {

content: 'Фильтр',

title: 'Фильтр'

items: listBoxItems,

state: {

// Признак, развернут ли список.

expanded: false,

filters: listBoxItems.reduce(function(filters, filter) {

filters[filter.data.get('content')] = filter.isSelected();

return filters;

}, {})

}

});

myMap.controls.add(listBoxControl);

listBoxControl.events.add(['select', 'deselect'], function(e) {

var listBoxItem = e.get('target');

console.log(e);

var filters = ymaps.util.extend({}, listBoxControl.state.get('filters'));

filters[listBoxItem.data.get('content')] = listBoxItem.isSelected();

console.log(filters);

listBoxControl.state.set('filters', filters);

});

Оставить комментарий api, checkbox, input, listbox, map.yandex, yandex, список

JavaScript: Проверка пароля на сложность

12.02.2021 Павел Грибов WEB

Задача: необходимо проверить пароль на сложность по критериям:

есть маленькие буквы
есть большие буквы
есть специальные символы
пароль длиннее 7 символов

Ну в принципе подойдет чтото-вроде:

function PasswordValidTest(pass){
        var count = 0;    
        count += /[a-z]/.test(pass) ? 1 : 0; //есть маленькие буквы
        count += /[A-Z]/.test(pass) ? 1 : 0; //есть большие буквы
        count += /\d/.test(pass) ? 1 : 0;   
        count += /[^\w\d\s]/.test(pass) ? 1 : 0;
        (count>2 & !/[\s]+/.test(pass)) ? res=true:res=false;    
        if ((res==true)&&(pass.length<7)) res=false;
     return res;   
}

function PasswordValidTest(pass){

var count = 0;

count += /[a-z]/.test(pass) ? 1 : 0; //есть маленькие буквы

count += /[A-Z]/.test(pass) ? 1 : 0; //есть большие буквы

count += /\d/.test(pass) ? 1 : 0;

count += /[^\w\d\s]/.test(pass) ? 1 : 0;

(count>2 & !/[\s]+/.test(pass)) ? res=true:res=false;

if ((res==true)&&(pass.length<7)) res=false;

return res;

}

Ну и в нагрузку проверка Email:

function EmailValidTest(email){
 var re = /^[\w-\.]+@[\w-]+\.[a-z]{2,4}$/i;   
 return re.test(email);
};
function EmailValidRulesTest(email){
  validmails=['@mail.ru','@yandex.ru','@ya.ru','@list.ru','@inbox.ru','@gmail.com','@icloud.com','@bk.ru'];  
  re=false;  
  validmails.forEach(function(item, i, validmails){
    if (email.indexOf(item)!==-1) re=true;
  });   
  return re;
};

function EmailValidTest(email){

var re = /^[\w-\.]+@[\w-]+\.[a-z]{2,4}$/i;

return re.test(email);

};

function EmailValidRulesTest(email){

validmails=['@mail.ru','@yandex.ru','@ya.ru','@list.ru','@inbox.ru','@gmail.com','@icloud.com','@bk.ru'];

re=false;

validmails.forEach(function(item, i, validmails){

if (email.indexOf(item)!==-1) re=true;

});

return re;

};

Оставить комментарий javascript, проверка пароля, сложность

Символ рубля на сайте

15.12.2020 Павел Грибов WEB

Шел конец 2020 года, а мы всё еще не умеем штатно отображать символ рубля. Вот одно из решений:

1) Устанавливаем вот этот шрифт в css:

@font-face { 
    font-family: "rouble";
    src: url("/fonts/rouble.otf") format("opentype");
}
.rub { font-family: "rouble"; }

@font-face {

font-family: "rouble";

src: url("/fonts/rouble.otf") format("opentype");

}

.rub { font-family: "rouble"; }

2) В коде прописываем:

<span class="rub">i</span>

1	<span class="rub">i</span>

Оставить комментарий css, html, символ рубля

« 1 … 17 18 19 20 21 … 54 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31