Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.07.2014, 12:48
Новичок на форуме
Отправить личное сообщение для Nikson87 Посмотреть профиль Найти все сообщения от Nikson87
 
Регистрация: 12.07.2014
Сообщений: 1

Создание страницы с полем ввода и кнопкой
Необходимо создать страницу с полем ввода и копкой. В поле ввода нужно будет ввести значение для создания нужного количества пронумерованных блоков div 50x50 Px красной заливкой. Создание блоков производить по нажатии на кнопку. При выводе блоков поле ввода и кнопка должны оставаться на месте, а блоки раз мешаться под ними.

ЗАРАНЕЕ СПАСИБО!
Ответить с цитированием
  #2 (permalink)  
Старый 20.07.2014, 08:23
JSN JSN вне форума
Аспирант
Отправить личное сообщение для JSN Посмотреть профиль Найти все сообщения от JSN
 
Регистрация: 01.09.2012
Сообщений: 57

<!DOCTYPE HTML>
<html>
  
  <head></head>
  
  <body>
    <input id='n' type='text'>
    <input type='button' onclick='if(!createBlock()) {alert("Invalid input value")}'>
    <div id='insert'></div>
    <script>
      function createBlock() {
        document.getElementById('insert').innerHTML = '';
        var n = document.getElementById('n').value;
        if (!(n = parseInt(n))) return false;
        for (var i = 0; i < n; ++i) {
          var el = document.createElement('div');
          document.getElementById('insert').appendChild(el);
          el.className = 'block';
          el.setAttribute('list_id', i + 1);
          el.innerHTML = i + 1;
        }
        return true;
      }
    </script>
    <style>
      .block {
        width: 50px;
        height: 50px;
        background: red;
        margin: 5px;
      }
    </style>
  </body>

</html>

Я вам сделал медвежью услугу. В следующий раз задавайте вопрос по какой-то конкретной части, а не просите код написать

Последний раз редактировалось JSN, 20.07.2014 в 08:52.
Ответить с цитированием
  #3 (permalink)  
Старый 20.07.2014, 08:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

JSN,
может
[HTML run][/HTML]
?
Ответить с цитированием
  #4 (permalink)  
Старый 20.07.2014, 08:52
JSN JSN вне форума
Аспирант
Отправить личное сообщение для JSN Посмотреть профиль Найти все сообщения от JSN
 
Регистрация: 01.09.2012
Сообщений: 57

Простите, поправил.
А это такая сложная и интересная задача, чтобы ее смотреть?
Ответить с цитированием
  #5 (permalink)  
Старый 20.07.2014, 09:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

JSN,
удобно и можно видеть результат, по коду строки 17 и 20 лучше поменять 2 раза изменяется страница -- в DocumentFragment бы сначала все дивы -- а потом бы уже на страницу
http://learn.javascript.ru/multi-insert
Ответить с цитированием
  #6 (permalink)  
Старый 23.07.2014, 11:43
JSN JSN вне форума
Аспирант
Отправить личное сообщение для JSN Посмотреть профиль Найти все сообщения от JSN
 
Регистрация: 01.09.2012
Сообщений: 57

Спасибо за статью, не задумывался об этом раньше
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывести изображение после ввода URL без перезагрузки страницы Delfiniys Элементы интерфейса 5 18.10.2013 11:41
Создание отдельной страницы авторизации/регистрации Allan Stark ExtJS 0 03.10.2012 14:52
Создание htm страницы пользователем. Julia Panatova Общие вопросы Javascript 3 09.01.2011 18:44
help pls окно с кнопками ок и отмена с полем ввода и с фокусом vasin AJAX и COMET 0 13.10.2009 18:40
Динамические создание полей ввода и заполнение их данными vitasya Events/DOM/Window 2 29.03.2009 23:51