Давайте разработаем сервис, который будет автоматически на основе введенных данных генерировать код CSS. Мы сделаем простой сервис, который будет генерировать border-radius код отвечающий за скругление границы элементов. Пример работы сервиса, аналог которого мы будем делать можно найти по запросу CSS3 generator.
Для начала разработаем интерфейс приложения. Посмотрите на макет приложения:
Создадим HTML верстку приложения. Одна строка содержащая текст, ползунок и инпут для вывода значения ползунка:
|
1 2 3 4 |
<p>Верхний левый угол: <input type="range" id="rtl" min="0" max="100" value="0"> <input type="text" id="ttl" value="0"> </p> |
Обратите внимание, что rtl — это range top left — т.е. ползунок, верхний левый угол, ttl — text top left — т.е. инпут левый верхний угол. Для ползунков задано минимальное значение min=0 и максимальное max=100. Также, чтобы при загрузке значение ползунка выставлялось в нуль — value=0.
Продублируем код для четырех ползунков, присвоим им новые id. В результате программа приобретет следующий вид:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="block1"> <p>Верхний левый угол: <input type="range" id="rtl" min="0" max="100" value="0"> <input type="text" id="ttl" value="0"> </p> <p>Верхний правый угол: <input type="range" id="rtr" min="0" max="100" value="0"> <input type="text" id="ttr" value="0"> </p> <p>Нижний правый угол: <input type="range" id="rbr" min="0" max="100" value="0"> <input type="text" id="tbr" value="0"> </p> <p>Нижний левый угол: <input type="range" id="rbl" min="0" max="100" value="0"> <input type="text" id="tbl" value="0"> </p> </div> |
Для всех input type="range" пропишем событие oninput="fun1()". Для отображения изменения создадим блок div c id="block". Теперь код выглядит следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="block1"> <p>Верхний левый угол: <input type="range" id="rtl" min="0" max="100" value="0" oninput="fun1()"> <input type="text" id="ttl" value="0" > </p> <p>Верхний правый угол: <input type="range" id="rtr" min="0" max="100" value="0" oninput="fun1()"> <input type="text" id="ttr" value="0" > </p> <p>Нижний правый угол: <input type="range" id="rbr" min="0" max="100" value="0" oninput="fun1()"> <input type="text" id="tbr" value="0" > </p> <p>Нижний левый угол: <input type="range" id="rbl" min="0" max="100" value="0" oninput="fun1()"> <input type="text" id="tbl" value="0"> </p> </div> <div id="block"></div> |
Для созданного блока пропишем код в CSS:
|
1 2 3 4 5 |
#block { width: 100px; height: 100px; background: green; } |
|
1 |
See the Pen Генератор кода css by Alex (@luschenko) on CodePen.
Пишем функцию в JS
Перейдем к написанию функции в JS. Для начала получим все необходимые элементы по их id.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//rtl - радиус скругления верхний левый угол var rtl=document.getElementById('rtl').value; //rtr - радиус скругления верхний правый угол var rtr=document.getElementById('rtr').value; //rbr - радиус скругления нижний правый угол var rbr=document.getElementById('rbr').value; //rbl - радиус скругления верхний правый угол var rbl=document.getElementById('rbl').value; //Теперь получим элементы input type="text" var ttl=document.getElementById('ttl'); var ttr=document.getElementById('ttr'); var tbr=document.getElementById('tbr'); var tbl=document.getElementById('tbl'); // получаем div по id var block=document.getElementById('block'); |
Теперь присвоим значение из ползунка в input. После чего зададим блоку block радиус скругления с помощью записи block.style.borderRadius=rtl+"px "+rtr+"px "+rbr+"px "+rbl+"px " .
Просмотреть работу кода можно на codepen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function fun1() { //rtl - радиус скругления верхний левый угол var rtl=document.getElementById('rtl').value; //rtr - радиус скругления верхний правый угол var rtr=document.getElementById('rtr').value; //rbr - радиус скругления нижний правый угол var rbr=document.getElementById('rbr').value; //rbl - радиус скругления верхний правый угол var rbl=document.getElementById('rbl').value; //Теперь получим элементы input type="text" var ttl=document.getElementById('ttl'); var ttr=document.getElementById('ttr'); var tbr=document.getElementById('tbr'); var tbl=document.getElementById('tbl'); // получаем div по id var block=document.getElementById('block'); // передаем значения из ползунков в input ttl.value=rtl; ttr.value=rtr; tbr.value=rbr; tbl.value=rbl; //скругляем углы прямоугольника block.style.borderRadius=rtl+'px '+rtr+'px '+rbr+'px '+rbl+'px '; } |
See the Pen Генератор кода css by Alex (@luschenko) on CodePen.
