Технологии
Решено
Шахматная доска в html - вопрос №644833
Нужно построить шахматную доску в html, только программно. Чтобы в двух полях задавать ширину и высоту, а потом строилась шахматная доска.
май 26, 2013 г.
-
Всего ответов: 6
-
Для этого можно пойти 2-я путями. 1-й это через таблицу, 2-й через <div>ы. Выбор за тобой.
В любом случае это 2 вложенных цикла по длине и высоте. Каждый шаг цикла формирует 1 клеточку. Каждую клеточку добавлять в переменную «поля», в конце прикрутить к нужному узлу документа.
Лучший ответ по мнению автора -
Легче сделать таблицу и закрасить нужные клетки.
-
Если делать на тегах 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>
Все что внутри этого тега, повторите скопировав еще семь раз, также во внутрь. Потом можете проверять, шахматная доска готова.
-
Илья, зачем их писать эти дивы? В задаче сказато, что бы программно. К тому же нужно следить за float:left; иначе не выйдет доска))
Дмитрий, у меня под термином «формирует клеточку» абстрактное понятие, а не техническое. «Легче сделать таблицу и закрасить нужные клетки.» — это уже реализация. И это вполне понятно что так легче. Я описывал сам алгоритм
-
Я это написал на HTML все, как оно будет выглядеть в коде. А с float:left; следить не нужно, все встанет на свои места как нужно! Для полной уверенности после этого кода можно еще добавить:
<div style='clear:both;'></div>
Ну а выводить это все в программе, это думаю не так сложно.
Если на PHP, то написать простой цикл. Напримерdo {
тело цикла
} while(условие);
Завести переменную $i=0; перед циклом, а в теле цикла после кода поставить $i++;
В самом теле цикла поставить функцию на определение четных и не четных чисел. Типа, если четное число в переменной $i, то присваиваем стиль к диву белый, если не четный то черный.
Такой цикл много весить не будет, и мгновенно все выводит.
-
Здравствуйте!
Насколько я знаю, чистый стандарт 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();
Ответ насвкиду (второпях), может быть неточным, но думаю, что логика алгоритма ясна.
За подробностями можно в личку.
Удачи!
Похожие вопросы