Продвижение в интернете

Продвижение в интернете

0 3

Доброго времени суток! В данном примере я покажу Вам как можно создать маску ввода для чисел на чистом JavaScript. <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>JS Input Mask</title> </head> <body>     <input type="text" data-format="(***) ***-****" data-mask="(###) ###-####">     <input type="text" data-format="**.**.****" data-mask="MM.DD.YYYY">     <input type="text" data-format="+* (***) ***-**-**" data-mask="+* (***) ***-**-**" />     <script>         function doFormat(value, pattern, mask)          {             // удаляем все нечисловые значения из значения             const strippedValue = value.replace(//g, "");             // преобразуем строку-значение в массив символов             const chars = strippedValue.split('');             let count = 0;             let formatted = '';             // форматируем строку             for (let i = 0; i < pattern.length; i++)              {                 const char = pattern;                 if (chars)                  {                     if (/*/.test(char)) {                         formatted += chars;                         count++;                     } else {                         formatted += char;                     }                 }                  else if (mask)                  {                     const splittedMask = mask.split('');                     if (splittedMask)                     {                         formatted += splittedMask;                     }                  }             }             return formatted;         }         // проходимся по каждому элементу назначая на них обработчики         // нажатия клавиш         document.querySelectorAll('').forEach(function (e) {             function format(elem) {                 const val = doFormat(elem.value, elem.getAttribute('data-format'));                 elem.value = doFormat(elem.value, elem.getAttribute('data-format'), elem.getAttribute('data-mask'));                 if (elem.createTextRange) {                     var range = elem.createTextRange();                     range.move('character', val.length);                     range.select();                 } else if (elem.selectionStart) {                     elem.focus();                     elem.setSelectionRange(val.length, val.length);                 }             }             e.addEventListener('keyup', function () {                 format(e);             });             e.addEventListener('keydown', function () {                 format(e);             });             format(e)         });     </script> </body> </html> Источник

0 15

Здравствуйте! Продолжаем создание кругового прогрессбара с помощью HTML и CSS. В прошлой статье мы создали круг на белом фоне и закрасили одну его половину...

0 13

Обновлено 9 апреля 2022 Просмотров: 28 757 Автор: Дмитрий ПетровПоисковые подсказки — что это такоеПоисковые подсказки — это вспомогательные слова или фразы, которые продолжают...

0 16

1 сентября 2022 года в России вступит в силу закон № 347-ФЗ о поправках в Федеральный закон «О рекламе», по которому всю рекламу в...

0 18

В сегодняшней статье мы рассмотрим как выбрать данные из несвязанных таблиц с SQL и оператором JOIN. Для чего это нужно. Прежде всего, скажем,...

0 16

Мы продолжаем создание игры про "Космические приключения" с Python и Pygame. Очень важной частью этой игры является возможность уничтожения вашего космического корабля в результате...

0 18

Делаем анимацию загрузки с помощью SVG, CSS и JavaScript Доброго времени суток! В данном примере мы посмотрим как сделатиь анимацию загрузки, используя SVG, CSS и JavaScript. <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>ProgerssBar</title>     <style>         html,         body {             background-color: #2962FF;             display: flex;             align-items: center;             justify-content: center;             height: 100%;             position: relative;         }         .progress-ring__circle {             transition: 0.35s stroke-dashoffset;             transform: rotate(-90deg);             transform-origin: 50% 50%;         }         input {             position: fixed;             top: 10px;             left: 10px;             width: 80px;         }     </style> </head> <body>     <svg class="progress-ring" width="120" height="120">         <circle class="progress-ring__circle" stroke="white" stroke-width="4" fill="transparent" r="52" cx="60" cy="60">             Загрузка...         </circle>     </svg>     <script>         var circle = document.querySelector('circle');         var radius = circle.r.baseVal.value;         var circumference = radius * 2 * Math.PI;         circle.style.strokeDasharray = `${circumference} ${circumference}`;         circle.style.strokeDashoffset = `${circumference}`;         function setProgress(percent) {             const offset = circumference - percent / 100 * circumference;             circle.style.strokeDashoffset = offset;         }         let value = 0         requestAnimationFrame(function animate() {             value += 0.01;             if (value < 101 && value > -1) {                 setProgress(value);             }             if(value < 101) requestAnimationFrame(animate)         })     </script> </body> </html> Источник

0 28

Разговор в сегодняшней статье пойдет о так называемых иконках Favicon.ico. Мы разберемся, что такое фавикон, почему в обязательном порядке его нужно устанавливать на...

0 30

В идеальном мире количество страниц сайта, которое должно быть в индексе, равно количеству страниц самого сайта. Но так не бывает. Гораздо чаще краулинговый бюджет...

0 45

Доброго времени суток! В данном примере мы рассмотрим как можно создать левостороннее меню на Bootstrap, которое при уменьшении размера окна скрывается, оставляя только иконки. Итак, вот...