Jump to content

Уроки/курсы/мастер-классы/вебинары

Предложение услуг по обучению онлайн и офлайн


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Здравствуйте, пытаюсь сделать небольшой редактор. Сначала нажимается кнопка на html-странице, потом заполняется форма с параметрами графоэлемента (иконы), эти параметры считывает скрипт, передаёт их в другую функцию. Та формирует код HTML с тегом svg и вставляет в блок draw. В этом деле вообще начинающий, ещё в голове путаница с расположением элементов, паддингами и т.п. А проблема, что после исполнения скрипта ничего не происходит, иногда на секунду мелькает что-то похожее, но в целом результата нет.   Код HTML: <!DOCTYPE html> <html lang="ru">   <head>     <meta charset="utf-8">     <title>Иконы</title>     <link rel="stylesheet" href="style.css">   </head>   <body>             <div class="open-button">           <button onclick="openForm()">Открыть форму</button>     </div>     <div class="form-popup" id="IconForm">           <form class="form-container">                <h1>Параметры иконы</h1>             <label for="bordercolor"><b>Цвет границы</b></label>             <select id='select_bc' size='1'>                 <option value='#000'>Чёрный</option>                 <option value='#00f'>Синий</option>                 <option value='#f00'>Красный</option>                 <option value='#0f0'>Зелёный</option>             </select>             <p></p>             <label for="background"><b>Цвет фигуры</b></label>             <select id='select_bg' size='1'>                 <option value='#fff'>Белый</option>                 <option value='#bbf'>Синий</option>                 <option value='#fbb'>Красный</option>                 <option value='#bfb'>Зелёный</option>             </select>             <p></p>             <label for="fontcolor"><b>Цвет текста</b></label>             <select id='select_fc' size='1'>                 <option value='#000'>Чёрный</option>                 <option value='#00f'>Синий</option>                 <option value='#f00'>Красный</option>                 <option value='#0f0'>Зелёный</option>             </select>             <p></p>             <label for="text"><b>Содержание фигуры</b></label>             <textarea id="text_in" cols="20" rows="3"></textarea>             <button type="submit" class="btn" onclick="return acceptArgs()">Принять</button>             <button type="submit" class="btn cancel" onclick="return closeForm()">Закрыть</button>           </form>     </div>     <div id="Draw"></div>          <script type="text/javascript" src="script.js"></script>   </body> </html> CSS: {box-sizing: border-box;} /* Кнопка, используемая для открытия формы */ .open-button {   background-color: #555;   color: white;   padding: 16px 20px;   border: none;   cursor: pointer;   opacity: 0.8;   position: fixed;   width: 280px; } /* Всплывающая форма-скрыта по умолчанию */ .form-popup {   display: none;   position: fixed;   border: 3px solid #f1f1f1;   z-index: 9; } /* Добавить стили для контейнера формы */ .form-container {   max-width: 300px;   padding: 10px;   background-color: white; } /* Поля ввода полной ширины */ .form-container input[type=text], .form-container input[type=password] {   width: 100%;   padding: 15px;   margin: 5px 0 22px 0;   border: none;   background: #f1f1f1; } /* Когда входы получают фокус, сделайте что-нибудь */ .form-container input[type=text]:focus, .form-container input[type=password]:focus {   background-color: #ddd;   outline: none; } /* Стиль для кнопок */ .form-container .btn {   background-color: green;   color: white;   padding: 16px 20px;   border: none;   cursor: pointer;   width: 100%;   margin-bottom:10px;   opacity: 0.85; } /* Красный цвет фона для кнопки "Отмена" */ .form-container .cancel {   background-color: red; } /* Добавить некоторые эффекты наведения на кнопки */ .form-container .btn:hover, .open-button:hover {   opacity: 1; }   JS: function openForm() {   document.getElementById("IconForm").style.display = "block"; } function closeForm() {   document.getElementById("IconForm").style.display = "none";   return false; } function drawIcon(bc, bg, fc, text) {   var svg = '<svg> <rect rx="32.8" ry="18.3" x="500" y="500" height="55" width="99" ';   svg += 'fill="'+ bg + '" stroke="'+ bc +'" stroke-width="2px" />';   svg += '<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill='+fc+";'>";      svg += text + "</text></svg>";   alert(svg);   document.getElementById('Dragon').innerHTML += svg;   return true; } function acceptArgs() {   var bc = document.getElementById("select_bc");   bc = bc.options[bc.selectedIndex].value;   var bg = document.getElementById("select_bg");   bg = bg.options[bg.selectedIndex].value;   var fc = document.getElementById("select_fc");   fc = fc.options[fc.selectedIndex].value;   var text = document.getElementById("text_in").value;   closeForm();   drawIcon(bc, bg, fc, text);    }
    • Друзья, остался последний день действия акции BLACKFRIDAY, которая включает скидку 50% на все VPS сервера с периодом заказа от 1 до 12 месяцев😀Промо-код BLACKFRIDAY2711Действует на тарифы VPS SSD (https://serfstack.com/services/vps-server) и антикризисные VPS SAS (https://serfstack.com/services/vps-server/sas).Спешите!
    • background-image: url(‪C:\Users\vip_c\Desktop\html\img\qq.jpg); И надо так картинки вставлять.  Почитайте про относительные/ абсолютные пути. 
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...