Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.55/11: Рейтинг темы: голосов - 11, средняя оценка - 4.55
Koshachek
4 / 4 / 4
Регистрация: 17.02.2012
Сообщений: 110
1

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

24.12.2018, 23:46. Просмотров 2006. Ответов 3
Метки нет (Все метки)

Доброго времени, уважаемые форумцы!
Посмотрел урок по созданию шахматной доски, возник вопрос: а как добавить буквы и цифры?
Ну чтобы выглядела как настоящая доска. Я видел пример с таблицей, но хочу понять как это делается с div-ами.
Благодарю заранее!
HTML5
1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
        <title>Шахматная доска</title>
        <link rel="stylesheet" href="style.css"
    </head>
    <body>
        <div class="board">
        </div>
        <script src="chakhmaty.js"> </script>
    </body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.board{
    height: 640px;
    width: 640px;
    margin: 30px auto;
    border: 1px solid black;
}
 
.block{
    height: 80px;
    width: 80px;
    float: left;
}
 
.black{
    background: black;
}
 
.white{
    background: white;
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function drawBoard(){
    let board = document.querySelector('.board');
    let block;
    let flag = true; // белая-черная клетка
    
    for(let i=0; i<8; i++){
        
        for(let j=0; j<8; j++){
            
            if(j==0)
                flag = !flag;   
            
            block = document.createElement('div');
        
            if(flag)
                block.className='block black';
            else
                block.className='block white';
            
            //вывел
            board.appendChild(block);
            
            //поменял с черного на белое
            flag = !flag;
        }
    }
}
 
drawBoard();
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
24.12.2018, 23:46
Ответы с готовыми решениями:

Шахматная доска через таблицу
Помогите мне, пожалуйста. В таблицах не очень понимаю, так тут еще и цикл for привязать нужно к...

Шахматная доска на js/css/html
Здравствуйте, есть задача.Нужно вывести шахматную доску определенной размерности на страничке, но в...

Доска объявлений на Java Script
Помогите! Как сделать доску объявлений на Java Script. Может, у кого есть готовые скрипты?

Шахматная доска
Шахматная доска содержит 8x8 клеток. Горизонтали и вертикали обозначаются цифрами 1-8. Написать...

шахматная доска
помогите написать программу, которая отображает на экране следующий рисунок шахматной доски:

3
klopp
405 / 345 / 154
Регистрация: 14.10.2017
Сообщений: 930
25.12.2018, 05:23 2
добавьте еще один столбец и одну строку, со своими классами:самый левый столбец поуже шахматной клетки, а самая нижняя строка - пониже. Разумеется, размеры .board нужно соответственно увеличить.
0
Koshachek
4 / 4 / 4
Регистрация: 17.02.2012
Сообщений: 110
25.12.2018, 13:05  [ТС] 3
Короче...на таблицах проще. Оставлю здесь, может кому пригодится
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
function draw(){
    var table = document.createElement('table');
    var flag = true;
    
    var trr = document.createElement('tr');
    var arr = [' ','a','b','c','d','e','f','g','h'];
    
    //генерим ячейки
    for(var i = 0; i<8; i++){
        var tr = document.createElement('tr');
        
        //создаем ячейку для цифр
        var tdd = document.createElement('td');
        tdd.style.width='50px';
        tdd.style.height='50px';
        tdd.innerHTML=8-i;
        tr.appendChild(tdd);
        
        for(var j=0; j<8; j++){
            
            if(j==0)
                flag=!flag;
            
            var td = document.createElement('td');
            
            td.style.width='50px';
            td.style.height='50px';
            if(flag){
                td.style.background='black';    
            }else
                td.style.background='white';    
                
            tr.appendChild(td);
            flag=!flag;
        }
        table.appendChild(tr);
    }
    
    //генерим буквы
    for(var k = 0; k<9; k++){
        
        var td = document.createElement('td');
        td.style.width='50px';
        td.style.height='50px';
        td.style.background='white';
        td.innerHTML=arr[k];
        
        trr.appendChild(td);
        
    }
    table.appendChild(trr);
    
    document.body.appendChild(table);
}
 
draw();
0
diadiavova
4083 / 1472 / 451
Регистрация: 11.04.2015
Сообщений: 2,705
Записей в блоге: 35
27.12.2018, 09:08 4
Цитата Сообщение от Koshachek Посмотреть сообщение
Оставлю здесь, может кому пригодится
Ну и я тогда оставлю
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 
<body>
 
    <style>
        
#chessboard td{
    width: 50px;
    height: 50px;
}
 
#chessboard tr:nth-child(even)>td:nth-child(odd),
#chessboard tr:nth-child(odd)>td:nth-child(even)
{
    background-color: black;
}
#chessboard{ border-collapse: collapse;}
#chessboard, #chessboard td{border: black 1px solid;}
#chessboard th{padding: 3px;border: 0px;}
    </style>
 
    <table id="chessboard" >
        <tbody>
            <tr>
                <th></th>
                <th>A</th>
                <th>B</th>
                <th>C</th>
                <th>D</th>
                <th>E</th>
                <th>F</th>
                <th>G</th>
                <th>H</th>
                <th></th>
            </tr>
            <tr>
                <th>8</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <th>8</th>
            </tr>
            <tr>
                <th>7</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <th>7</th>
            </tr>
            <tr>
                <th>6</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <th>6</th>
            </tr>
            <tr>
                <th>5</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <th>5</th>
            </tr>
            <tr>
                <th>4</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <th>4</th>
            </tr>
            <tr>
                <th>3</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <th>3</th>
            </tr>
            <tr>
                <th>2</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <th>2</th>
            </tr>
            <tr>
                <th>1</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <th>1</th>
            </tr>
            <tr>
                <th></th>
                <th>A</th>
                <th>B</th>
                <th>C</th>
                <th>D</th>
                <th>E</th>
                <th>F</th>
                <th>G</th>
                <th>H</th>
                <th></th>
            </tr>
        </tbody>
    </table>
</body>
 
</html>
0
27.12.2018, 09:08
StackOverflow
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
27.12.2018, 09:08

Шахматная доска...
Всем привет! Я не программист в этой области, но немножко знаю кое-что о HTML. Дал мне...

Шахматная доска
Шахматную доску будем представлять в виде квадратного символьного массива размером 8х8. Даны...

Шахматная доска
Поля шахматной доски характеризуются записью: Type Pole=record Ver:(a,b,c,d,e,f,g,h);...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru