Шахматная доска в html

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

 

Лучший ответ по мнению автора

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

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

26.05.13
Лучший ответ по мнению автора

Другие ответы

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

27.05.13

Если делать на тегах 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.05.13

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

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

27.05.13

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

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

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

do {

тело цикла

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

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

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

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

27.05.13

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

Насколько я знаю, чистый стандарт 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.05.13

Alexander

Сейчас на сайте
Читать ответы

Виталий

Читать ответы

Александр

Читать ответы
Посмотреть всех экспертов из раздела Технологии > JavaScript,Ajax,HTML