Технологии

Решено

Шахматная доска в html - вопрос №644833

Нужно построить шахматную доску в html, только программно. Чтобы в двух полях задавать ширину и высоту, а потом строилась шахматная доска.

 

май 26, 2013 г.

  • Всего ответов: 6

  • Юрьев Дмитрий Евгеньевич - аватарка

    Юрьев Дмитрий Евгеньевич

    20-й в Технологиях

    Для этого можно пойти 2-я путями. 1-й это через таблицу, 2-й через <div>ы. Выбор за тобой.

    В любом случае это 2 вложенных цикла по длине и высоте. Каждый шаг цикла формирует 1 клеточку. Каждую клеточку добавлять в переменную «поля», в конце прикрутить к нужному узлу документа.

    май 26, 2013 г.
    Ответ понравился автору
    Лучший ответ по мнению автора
  • Дмитрий - аватарка

    Дмитрий

    6-й в Технологиях

    Легче сделать таблицу и закрасить нужные клетки.

    май 27, 2013 г.
  • Илья - аватарка

    Илья

    565-й в Технологиях

    Если делать на тегах DIV, то нужно их не мало написать.
    Например, общий тег, в котором все содержется:

    <div style='wifth:800px; height:800px;'></div>

    То есть квадрат 800 на 800 пикселей. (8 клетов по 100px с каждой стороны)

    Ну а потом внутри него пишем так:

    <div style='wifth:800px; height:800px;'>

    <div style='background:black; width:100px; height:100px; float:left;'></div>
    <div style='background:white; width:100px; height:100px; float:left;'></div>
    <div style='background:black; width:100px; height:100px; float:left;'></div>
    <div style='background:white; width:100px; height:100px; float:left;'></div>
    <div style='background:black; width:100px; height:100px; float:left;'></div>
    <div style='background:white; width:100px; height:100px; float:left;'></div>
    <div style='background:black; width:100px; height:100px; float:left;'></div>
    <div style='background:white; width:100px; height:100px; float:left;'></div>

    </div>

     

    Все что внутри этого тега, повторите скопировав еще семь раз, также во внутрь. Потом можете проверять, шахматная доска готова.

    май 27, 2013 г.
  • Юрьев Дмитрий Евгеньевич - аватарка

    Юрьев Дмитрий Евгеньевич

    20-й в Технологиях

    Илья, зачем их писать эти дивы? В задаче сказато, что бы программно. К тому же нужно следить за float:left; иначе не выйдет доска))

    Дмитрий, у меня под термином «формирует клеточку» абстрактное понятие, а не техническое. «Легче сделать таблицу и закрасить нужные клетки.» — это уже реализация. И это вполне понятно что так легче. Я описывал сам алгоритм

    май 27, 2013 г.
  • Илья - аватарка

    Илья

    565-й в Технологиях

    Я это написал на HTML все, как оно будет выглядеть в коде. А с float:left; следить не нужно, все встанет на свои места как нужно! Для полной уверенности после этого кода можно еще добавить:

    <div style='clear:both;'></div>

    Ну а выводить это все в программе, это думаю не так сложно.
    Если на PHP, то написать простой цикл. Например

    do {

    тело цикла

    } while(условие);

    Завести переменную $i=0; перед циклом, а в теле цикла после кода поставить $i++;

    В самом теле цикла поставить функцию на определение четных и не четных чисел. Типа, если четное число в переменной $i, то присваиваем стиль к диву белый, если не четный то черный.

    Такой цикл много весить не будет, и мгновенно все выводит.

    май 27, 2013 г.
    Ответ понравился автору
  • Улугбек - аватарка

    Улугбек

    14-й в Технологиях

    Здравствуйте!

    Насколько я знаю, чистый стандарт HTML3.2/4 не подразумевает использования программирования, так как это прежде всего язык разметки страницы.

    В данном случае, может помочь язык JavaScript.

    Например, если привязать функцию на JS на любое событие объекта страницы, то думаю, что это легко реализуемо.

    Пример функции JS:

    function trial_JS()

    {

    var n,m;

    n=fom1.input1.value;

    m=form1.input2.value;

    document.open();

    document.writeln("<table>");

    for i=1 to n

    {

    document.writeln("<tr>");

    for j=1 to m

    {

    document.writeln("<td></td> ");

    ...

    }

    document.writeln("</tr>");

    }

    document.writeln("/table");

    document.close();

     

    Ответ насвкиду (второпях), может быть неточным, но думаю, что логика алгоритма ясна.

     За подробностями можно в личку.

    Удачи!

    май 28, 2013 г.

Похожие вопросы

Привіт, маю проблему з JS

январь 3, 2024 г.

Технологии

не открывается картинка

январь 14, 2022 г.

Технологии