Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Форум программистов и сисадминов Киберфорум > Форум web-программистов > JavaScript > JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279

как исправить? чтобы при клике меняла class (и направление).?

24.05.2022, 08:27. Показов 797. Ответов 16
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
есть такой календарь, возможно ли исправить чтобы при удалении строки №151 осталась только одна таблица(стр№150) и просто меняла класс и направление таблицы календаря на кнопку table_rotate

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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #navigation_panel {
            white-space: nowrap;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            padding: 5px 15px;
            margin: 0 0 5px;
        }
        
        input {
            width: 56px;
            display: inline-block;
            text-align: center;
            border: 1px solid hsl(210, 100%, 50%);
        }
        
        .table_rotate {
            border: 1px solid hsl(210, 100%, 50%);
            border-radius: 12px 12px 0 12px;
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        select {
            border: 1px solid hsl(210, 100%, 50%);
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        .table_month_horiz,
        .table_month_vert {
            width: 250px;
            height: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
        }
        
        td {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            text-align: center;
            font: 14px serif;
        }
 
        #num_year,
        #month_name {
            background-color: hsl(210, 100%, 95%);
            color: hsl(210, 100%, 50%);
            font: bold 18px serif;
            text-align: center;
        }
 
        #num_year {
            width: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }
 
        #month {
            display: inline-block;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 8px;
            padding: 5px;
            width: 250px;
        }
 
        #month_name {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }
 
        .table_month_vert,
        .table_month_horiz {
            table-layout: fixed;
            width: 100%;
            height: 250px;
            border-spacing: 3px;
        }
 
        .table_month_horiz tr td:nth-child(1) {
            width: 20%;
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(1) {
        width: 20%;
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_horiz tr td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
        
        .table_month_vert tr:nth-child(1) td.day {
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_vert tr:nth-child(1) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_vert tr:nth-child(n+2) td.day {
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_vert tr:nth-child(n+2) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
 
    </style>
</head>
 
<body>
    <div id="num_year"></div>
    <div id="month">
        <div id="navigation_panel">
        <select id="select_month"></select>
        <input class="year_input" type="number" value="">
        <button class="table_rotate">➘</button>
        </div>
        <div id="month_name"></div> 
        <table class="table_month_horiz"></table>
        <table class="table_month_vert"></table> 
    </div>
    <script>
        var calendar = {
            update: function(year, month) {
                this.year = year;
                this.month = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь', ][month];
                var startDay = new Date(year, month, 1);
                var offsetDay = (startDay.getDay() || 7) - 1;
                startDay.setDate(startDay.getDate() - offsetDay);
                var lastDay = new Date(startDay);
                var days = new Date(year, month + 1, 0).getDate();
                days = Math.ceil((days + offsetDay) / 7) * 7;
                lastDay.setDate(lastDay.getDate() + days);
                this.data = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
                while (startDay < lastDay) {
                    this.data.push(startDay.getDate());
                    startDay.setHours(24);
                }
            },
            render: function(horiz) {
                var html = '';
                if (horiz) {
 
                    this.element.classList.add("horiz");
                    for (var i = 0, j = 0; i < this.data.length; j = ++i % 7) {
                        if (j == 0) html += '<tr class="week">';
                        html += '<td class="day">' + this.data[i] + '</td>';
                        if (j == 6) html += '</td>';
                    }
                } else {
                    html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>'];
                    for (var i = 0; i < this.data.length; i++) {
                        html[i % 7] += '<td class="day">' + this.data[i];
                    }
                    html = html.join('')
                }
 
                this.numYear.textContent = this.year;
                this.monthName.textContent = this.month;
                this.element.innerHTML = html;
            },
        };
        var today = new Date(),
            thisYear = today.getFullYear(),
            thisMonth = today.getMonth();
        calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
        calendar.numYear = document.querySelector('#num_year');
        calendar.monthName = document.querySelector('#month_name');
        calendar.element = document.querySelector('.table_month_vert');
        calendar.update(thisYear, thisMonth);
        calendar.render(true);
        calendar.element = document.querySelector('.table_month_horiz');
        calendar.render();
        
        selector = document.querySelector('#select_month');
        month_list = ['Январь', 'Февраль', 'Март', 'Апрель', ' Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
        for (var i = 0; i < month_list.length; i++){
        selector.options[i] = new Option(month_list[i], i);
        }
        selector.selectedIndex = thisMonth;
        
        //Это для того, чтобы менять календарь при изменении месяца и года
        selector.addEventListener('change', load);
        document.querySelector('#year_input').addEventListener('input', load);
        
        document.getElementById('table_rotate').addEventListener('click', function() {
        
        calendar.toggle();
        });
        
        function load(){
        var year = document.getElementById('year_input').value;
        var month = selector.selectedIndex;
        calendar.update(year, month);
        calendar.render();
        }
        
        document.addEventListener("DOMContentLoaded", ()=>{
        document.querySelector('#year_input').value = thisYear;
        load();
        });
    </script>
</body>
</html>
Добавлено через 5 минут
или другими словами, как сделать чтобы работала как в коде ниже, но сохраняло размеры(css) ячеек как в первом коде...

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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   #navigation_panel {
   white-space: nowrap;
   border: 1px solid hsl(0, 0%, 50%);
   border-radius: 6px;
   padding: 5px 15px;
   margin: 0 0 5px;
   }
   
   input {
   width: 56px;
   display: inline-block;
   text-align: center;
   border: 1px solid hsl(210, 100%, 50%);
   background-color: hsl(210, 100%, 90%);
   color: hsl(210, 100%, 50%);
   font: bold 14px serif;
   }
   
   #table_rotate {
   border: 1px solid hsl(210, 100%, 50%);
   border-radius: 12px 12px 0 12px;
   background-color: hsl(210, 100%, 90%);
   color: hsl(210, 100%, 50%);
   }
   
   select {
   border: 1px solid hsl(210, 100%, 50%);
   background-color: hsl(210, 100%, 90%);
   color: hsl(210, 100%, 50%);
   font: bold 14px serif;
   }
   
   .table_month_horiz,
   .table_month_vert {
   width: 250px;
   height: 250px;
   border: 1px solid hsl(0, 0%, 50%);
   border-radius: 6px;
   }
   
   td {
   border: 1px solid hsl(0, 0%, 50%);
   border-radius: 6px;
   text-align: center;
   font: 14px serif;
   }
   
   #num_year,
   #month_name {
   background-color: hsl(210, 100%, 95%);
   color: hsl(210, 100%, 50%);
   font: bold 14px serif;
   text-align: center;
   }
   
   #months_name {
   background-color: hsl(210, 100%, 95%);
   color: hsl(210, 0%, 50%);
   font: bold 14px serif;
   text-align: center;
   border: 1px solid hsl(0, 0%, 50%);
   border-radius: 6px;
   padding: 5px;
   margin: 0 0 5px;
   }
   
   #month {
   display: inline-block;
   border: 1px solid hsl(0, 0%, 50%);
   border-radius: 6px;
   padding: 5px;
   width: 250px;
   }
   
   .month_name_year {
   border: 1px solid hsl(0, 100%, 50%);
   padding: 5px;
   margin: 0 0 5px 0;
   white-space: nowrap;
   }
   
   #month_name {
   width: 62%;
   margin: 0 5px 0 0;
   }
   
   
   #num_year {
   width: 24%;
   }
   
   #month_name, #num_year {
   display: inline-block;
   padding: 5px;
   margin: 0;
   border: 1px solid hsl(0, 0%,50%);
   text-align: right;
   }
   
   .table_month_vert,
   .table_month_horiz {
   table-layout: fixed;
   width: 100%;
   border-spacing: 3px;
   border: 1px solid hsl(0, 0%, 75%);}
   
   .table_month_horiz tr td:nth-child(1) {
   width: 20%;
   background-color: hsl(210, 100%, 88%);
   color: hsl(210, 100%, 50%);
   font-weight: bold;
   }
   
   
   /* названия будних дней недели */
   
   .table_month_horiz tr:nth-child(n+6) td:nth-child(1) {
   width: 20%;
   background-color: hsl(348, 100%, 88%);
   color: hsl(348, 100%, 50%);
   font-weight: bold;
   }
   
   
   /* названия выходных дней недели */
   
   .table_month_horiz tr td:nth-child(n+2) {
   width: 20%;
   background-color: hsl(210, 100%, 95%);
   color: hsl(210, 100%, 50%);
   }
   
   
   /* будниe */
   
   .table_month_horiz tr:nth-child(n+6) td:nth-child(n+2) {
   width: 20%;
   background-color: hsl(348, 100%, 95%);
   color: hsl(348, 100%, 50%);
   }
   
   
   /* выходныe */
   
   .table_month_vert tr:nth-child(1) td.day {
   background-color: hsl(210, 100%, 88%);
   color: hsl(210, 100%, 50%);
   font-weight: bold;
   }
   
   
   /* названия будних дней недели */
   
   .table_month_vert tr:nth-child(1) td.day:nth-child(n+6) {
   background-color: hsl(348, 100%, 88%);
   color: hsl(348, 100%, 50%);
   font-weight: bold;
   }
   
   
   /* названия выходных дней недели */
   
   .table_month_vert tr:nth-child(n+2) td.day {
   background-color: hsl(210, 100%, 95%);
   color: hsl(210, 100%, 50%);
   }
   
   
   /* будниe */
   
   .table_month_vert tr:nth-child(n+2) td.day:nth-child(n+6) {
   background-color: hsl(348, 100%, 95%);
   color: hsl(348, 100%, 50%);
   }
   
   
   /* выходныe */
  </style>
 </head> 
 <body>
      <div id="month">
      <div id="navigation_panel">
      <select id="select_month"></select>
      <input id="year_input" type="number" value="">
      <button id="table_rotate">➘</button>
      </div>
      <div id="months_name">
      <div class="month_name_year">
      <span id="month_name"></span>
      <span id="num_year"></span>
      </div>
      <table class="table_month"></table>
      
      </div>
      <script>
        var calendar = {
        type: 'horiz',
        element: document.querySelector('.table_month'),
        
        update: function(year, month) {
        this.year = year;
        this.month = ['Январь', 'Февраль', 'Март',
        'Апрель', 'Май', 'Июнь',
        'Июль', 'Август', 'Сентябрь',
        'Октябрь', 'Ноябрь', 'Декабрь', ][month];
        var startDay = new Date(year, month, 1);
        var offsetDay = (startDay.getDay() || 7) - 1;
        startDay.setDate(startDay.getDate() - offsetDay);
        var lastDay = new Date(startDay);
        var days = new Date(year, month + 1, 0).getDate();
        days = Math.ceil((days + offsetDay) / 7) * 7;
        lastDay.setDate(lastDay.getDate() + days);
        this.data = ['Пн.', 'Вт.', 'Ср.', 'Чт.', 'Пт.', 'Сб.', 'Вс.'];
        while (startDay < lastDay) {
        this.data.push(startDay.getDate());
        startDay.setHours(24);
        }
        },
        
        render2: function(horiz) {
        var html = '';
        if (horiz) {
        
        this.element.classList.add("horiz");
        for (var i = 0, j = 0; i < this.data.length; j = ++i % 7) {
        if (j == 0) html += '<tr class="week">';
        html += '<td class="day">' + this.data[i] + '</td>';
        if (j == 6) html += '</td>';
        }
        } else {
        html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>'];
        for (var i = 0; i < this.data.length; i++) {
        html[i % 7] += '<td class="day">' + this.data[i];
        }
        html = html.join('')
        }
        
        this.numYear.textContent = this.year;
        this.monthName.textContent = this.month;
        this.element.innerHTML = html;
        },
        render: function() {
        var html = '';
        if (this.type == 'vert') {
        
        this.element.innerHTML = '';
        this.element = document.querySelector('.table_month');
        this.element.classList.add("horiz");
        
        for (var i = 0, j = 0; i < this.data.length; j = ++i % 7) {
        if (j == 0) html += '<tr class="week">';
        html += '<td class="day">' + this.data[i] + '</td>';
        if (j == 6) html += '</td>';
        }
        } else {
        
        this.element.innerHTML = '';
        this.element = document.querySelector('.table_month');
        html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>'];
        for (var i = 0; i < this.data.length; i++) {
        html[i % 7] += '<td class="day">' + this.data[i];
        }
        html = html.join('');
        
        }
        this.numYear.textContent = this.year;
        this.monthName.textContent = this.month;
        this.element.innerHTML = html;
        },
        toggle: function() {
        this.type = this.type == 'vert' ? 'horiz' : 'vert';
        this.render();
        },
        };
        var today = new Date(),
        thisYear = today.getFullYear(),
        thisMonth = today.getMonth();
        calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
        calendar.numYear = document.querySelector('#num_year');
        calendar.monthName = document.querySelector('#month_name');
        calendar.update(thisYear, thisMonth);
        calendar.render();
        
        selector = document.querySelector('#select_month');
        month_list = ['Январь', 'Февраль', 'Март', 
        'Апрель', ' Май', 'Июнь', 
        'Июль', 'Август', 'Сентябрь', 
        'Октябрь', 'Ноябрь', 'Декабрь'];
        for (var i = 0; i < month_list.length; i++) {
        selector.options[i] = new Option(month_list[i], i);
        }
        selector.selectedIndex = thisMonth;
        
        //Это для того, чтобы менять календарь при изменении месяца и года
        selector.addEventListener('change', load);
        document.querySelector('#year_input').addEventListener('input', load);
        
        document.getElementById('table_rotate').addEventListener('click', function() {
        
        calendar.toggle();
        });
        
        function load() {
        var year = document.getElementById('year_input').value;
        var month = selector.selectedIndex;
        calendar.update(year, month);
        calendar.render();
        }
        
        document.addEventListener("DOMContentLoaded", () => {
        document.querySelector('#year_input').value = thisYear;
        load();
        });
      </script>
 </body>
</html>
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
 24.05.2022, 08:27
Ответы с готовыми решениями:

При набранном тексте, чтобы форма не меняла ширину, как?
При наведение стоит 200px, при убирания 100px. Нужно, чтобы когда текст набран, чтобы форма не двигалась, реально?? .form-search {...

Как сделать чтобы колба меняла свою позицию при изменении числа?
Есть колба, которая зависит от числа, она должна быть на одном и том же расстоянии от числа при любом его значении.

Подскажите как сделать, чтобы кнопка при нажатии меняла на зеленый цвет?
Activity.java package ru.startandroid.develop.myapplication; import android.annotation.SuppressLint; import...

16
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
24.05.2022, 15:02  [ТС]
никто не знает, как исправить первый код, чтобы на странице осталась только одна таблица, и при клике на кнопку эта таблица меняла свой класс?
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
24.05.2022, 21:38  [ТС]
возможно ли сделать такой календарь, чтобы на странице была только одна таблица, с вертикальным направлением, или горизонтальным, при отсутствии кнопки, в зависимости что указано в html-коде, а если в html-коде есть кнопка, то при клике на неё должно измениться направление ячеек таблицы, с вертикального на горизонтальное...

Добавлено через 18 минут
или проще говоря, этот скрипт

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
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

<script>
        var calendar = {
            update: function(year, month) {
                this.year = year;
                this.month = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь', ][month];
                var startDay = new Date(year, month, 1);
                var offsetDay = (startDay.getDay() || 7) - 1;
                startDay.setDate(startDay.getDate() - offsetDay);
                var lastDay = new Date(startDay);
                var days = new Date(year, month + 1, 0).getDate();
                days = Math.ceil((days + offsetDay) / 7) * 7;
                lastDay.setDate(lastDay.getDate() + days);
                this.data = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
                while (startDay < lastDay) {
                    this.data.push(startDay.getDate());
                    startDay.setHours(24);
                }
            },
            render: function(horiz) {
                var html = '';
                if (horiz) {
 
                    this.element.classList.add("horiz");
                    for (var i = 0, j = 0; i < this.data.length; j = ++i % 7) {
                        if (j == 0) html += '<tr class="week">';
                        html += '<td class="day">' + this.data[i] + '</td>';
                        if (j == 6) html += '</td>';
                    }
                } else {
                    html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>'];
                    for (var i = 0; i < this.data.length; i++) {
                        html[i % 7] += '<td class="day">' + this.data[i];
                    }
                    html = html.join('')
                }
 
                this.numYear.textContent = this.year;
                this.monthName.textContent = this.month;
                this.element.innerHTML = html;
            },
        };
        var today = new Date(),
            thisYear = today.getFullYear(),
            thisMonth = today.getMonth();
        calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
        calendar.numYear = document.querySelector('#num_year');
        calendar.monthName = document.querySelector('#month_name');
        calendar.element = document.querySelector('.table_month_vert');
        calendar.update(thisYear, thisMonth);
        calendar.render(true);
        calendar.element = document.querySelector('.table_month_horiz');
        calendar.render();
        
        selector = document.querySelector('#select_month');
        month_list = ['Январь', 'Февраль', 'Март', 'Апрель', ' Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
        for (var i = 0; i < month_list.length; i++){
        selector.options[i] = new Option(month_list[i], i);
        }
        selector.selectedIndex = thisMonth;
        
        //Это для того, чтобы менять календарь при изменении месяца и года
        selector.addEventListener('change', load);
        document.querySelector('#year_input').addEventListener('input', load);
        
        document.getElementById('table_rotate').addEventListener('click', function() {
        
        calendar.toggle();
        });
        
        function load(){
        var year = document.getElementById('year_input').value;
        var month = selector.selectedIndex;
        calendar.update(year, month);
        calendar.render();
        }
        
        document.addEventListener("DOMContentLoaded", ()=>{
        document.querySelector('#year_input').value = thisYear;
        load();
        });
    </script>
должен показывать разный календарь на трёх разных страницах

HTML5
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

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #navigation_panel {
            white-space: nowrap;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            padding: 5px 15px;
            margin: 0 0 5px;
        }
        
        input {
            width: 56px;
            display: inline-block;
            text-align: center;
            border: 1px solid hsl(210, 100%, 50%);
        }
        
        .table_rotate {
            border: 1px solid hsl(210, 100%, 50%);
            border-radius: 12px 12px 0 12px;
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        select {
            border: 1px solid hsl(210, 100%, 50%);
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        .table_month_horiz,
        .table_month_vert {
            width: 250px;
            height: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
        }
        
        td {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            text-align: center;
            font: 14px serif;
        }
 
        #num_year,
        #month_name {
            background-color: hsl(210, 100%, 95%);
            color: hsl(210, 100%, 50%);
            font: bold 18px serif;
            text-align: center;
        }
 
        #num_year {
            width: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }
 
        #month {
            display: inline-block;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 8px;
            padding: 5px;
            width: 250px;
        }
 
        #month_name {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }
 
        .table_month_vert,
        .table_month_horiz {
            table-layout: fixed;
            width: 100%;
            height: 250px;
            border-spacing: 3px;
        }
 
        .table_month_horiz tr td:nth-child(1) {
            width: 20%;
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(1) {
        width: 20%;
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_horiz tr td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
        
        .table_month_vert tr:nth-child(1) td.day {
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_vert tr:nth-child(1) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_vert tr:nth-child(n+2) td.day {
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_vert tr:nth-child(n+2) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
 
    </style>
</head>
 
<body>
    <div id="num_year"></div>
    <div id="month">
        <div id="navigation_panel">
        <select id="select_month"></select>
        <input class="year_input" type="number" value="">
        </div>
        <div id="month_name"></div> 
        <table class="table_month_vert"></table> 
    </div>
</body>
</html>
HTML5
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

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #navigation_panel {
            white-space: nowrap;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            padding: 5px 15px;
            margin: 0 0 5px;
        }
        
        input {
            width: 56px;
            display: inline-block;
            text-align: center;
            border: 1px solid hsl(210, 100%, 50%);
        }
        
        .table_rotate {
            border: 1px solid hsl(210, 100%, 50%);
            border-radius: 12px 12px 0 12px;
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        select {
            border: 1px solid hsl(210, 100%, 50%);
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        .table_month_horiz,
        .table_month_vert {
            width: 250px;
            height: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
        }
        
        td {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            text-align: center;
            font: 14px serif;
        }
 
        #num_year,
        #month_name {
            background-color: hsl(210, 100%, 95%);
            color: hsl(210, 100%, 50%);
            font: bold 18px serif;
            text-align: center;
        }
 
        #num_year {
            width: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }
 
        #month {
            display: inline-block;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 8px;
            padding: 5px;
            width: 250px;
        }
 
        #month_name {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }
 
        .table_month_vert,
        .table_month_horiz {
            table-layout: fixed;
            width: 100%;
            height: 250px;
            border-spacing: 3px;
        }
 
        .table_month_horiz tr td:nth-child(1) {
            width: 20%;
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(1) {
        width: 20%;
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_horiz tr td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
        
        .table_month_vert tr:nth-child(1) td.day {
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_vert tr:nth-child(1) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_vert tr:nth-child(n+2) td.day {
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_vert tr:nth-child(n+2) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
 
    </style>
</head>
 
<body>
    <div id="num_year"></div>
    <div id="month">
        <div id="navigation_panel">
        <select id="select_month"></select>
        <input class="year_input" type="number" value="">
        </div>
        <div id="month_name"></div> 
        <table class="table_month_horiz"></table> 
    </div>
</body>
</html>
HTML5
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

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #navigation_panel {
            white-space: nowrap;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            padding: 5px 15px;
            margin: 0 0 5px;
        }
        
        input {
            width: 56px;
            display: inline-block;
            text-align: center;
            border: 1px solid hsl(210, 100%, 50%);
        }
        
        .table_rotate {
            border: 1px solid hsl(210, 100%, 50%);
            border-radius: 12px 12px 0 12px;
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        select {
            border: 1px solid hsl(210, 100%, 50%);
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        .table_month_horiz,
        .table_month_vert {
            width: 250px;
            height: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
        }
        
        td {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            text-align: center;
            font: 14px serif;
        }
 
        #num_year,
        #month_name {
            background-color: hsl(210, 100%, 95%);
            color: hsl(210, 100%, 50%);
            font: bold 18px serif;
            text-align: center;
        }
 
        #num_year {
            width: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }
 
        #month {
            display: inline-block;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 8px;
            padding: 5px;
            width: 250px;
        }
 
        #month_name {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }
 
        .table_month_vert,
        .table_month_horiz {
            table-layout: fixed;
            width: 100%;
            height: 250px;
            border-spacing: 3px;
        }
 
        .table_month_horiz tr td:nth-child(1) {
            width: 20%;
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(1) {
        width: 20%;
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_horiz tr td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
        
        .table_month_vert tr:nth-child(1) td.day {
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_vert tr:nth-child(1) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_vert tr:nth-child(n+2) td.day {
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_vert tr:nth-child(n+2) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
 
    </style>
</head>
 
<body>
    <div id="num_year"></div>
    <div id="month">
        <div id="navigation_panel">
        <select id="select_month"></select>
        <input class="year_input" type="number" value="">
        <button class="table_rotate">➘</button>
        </div>
        <div id="month_name"></div> 
        <table class="table_month_horiz"></table>
    </div>
</body>
</html>
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
24.05.2022, 21:39  [ТС]
или проще говоря, этот скрипт

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
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

<script>
        var calendar = {
            update: function(year, month) {
                this.year = year;
                this.month = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь', ][month];
                var startDay = new Date(year, month, 1);
                var offsetDay = (startDay.getDay() || 7) - 1;
                startDay.setDate(startDay.getDate() - offsetDay);
                var lastDay = new Date(startDay);
                var days = new Date(year, month + 1, 0).getDate();
                days = Math.ceil((days + offsetDay) / 7) * 7;
                lastDay.setDate(lastDay.getDate() + days);
                this.data = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
                while (startDay < lastDay) {
                    this.data.push(startDay.getDate());
                    startDay.setHours(24);
                }
            },
            render: function(horiz) {
                var html = '';
                if (horiz) {
 
                    this.element.classList.add("horiz");
                    for (var i = 0, j = 0; i < this.data.length; j = ++i % 7) {
                        if (j == 0) html += '<tr class="week">';
                        html += '<td class="day">' + this.data[i] + '</td>';
                        if (j == 6) html += '</td>';
                    }
                } else {
                    html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>'];
                    for (var i = 0; i < this.data.length; i++) {
                        html[i % 7] += '<td class="day">' + this.data[i];
                    }
                    html = html.join('')
                }
 
                this.numYear.textContent = this.year;
                this.monthName.textContent = this.month;
                this.element.innerHTML = html;
            },
        };
        var today = new Date(),
            thisYear = today.getFullYear(),
            thisMonth = today.getMonth();
        calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
        calendar.numYear = document.querySelector('#num_year');
        calendar.monthName = document.querySelector('#month_name');
        calendar.element = document.querySelector('.table_month_vert');
        calendar.update(thisYear, thisMonth);
        calendar.render(true);
        calendar.element = document.querySelector('.table_month_horiz');
        calendar.render();
        
        selector = document.querySelector('#select_month');
        month_list = ['Январь', 'Февраль', 'Март', 'Апрель', ' Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
        for (var i = 0; i < month_list.length; i++){
        selector.options[i] = new Option(month_list[i], i);
        }
        selector.selectedIndex = thisMonth;
        
        //Это для того, чтобы менять календарь при изменении месяца и года
        selector.addEventListener('change', load);
        document.querySelector('#year_input').addEventListener('input', load);
        
        document.getElementById('table_rotate').addEventListener('click', function() {
        
        calendar.toggle();
        });
        
        function load(){
        var year = document.getElementById('year_input').value;
        var month = selector.selectedIndex;
        calendar.update(year, month);
        calendar.render();
        }
        
        document.addEventListener("DOMContentLoaded", ()=>{
        document.querySelector('#year_input').value = thisYear;
        load();
        });
    </script>
должен показывать разный календарь на трёх разных страницах

HTML5
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

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #navigation_panel {
            white-space: nowrap;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            padding: 5px 15px;
            margin: 0 0 5px;
        }
        
        input {
            width: 56px;
            display: inline-block;
            text-align: center;
            border: 1px solid hsl(210, 100%, 50%);
        }
        
        .table_rotate {
            border: 1px solid hsl(210, 100%, 50%);
            border-radius: 12px 12px 0 12px;
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        select {
            border: 1px solid hsl(210, 100%, 50%);
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        .table_month_horiz,
        .table_month_vert {
            width: 250px;
            height: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
        }
        
        td {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            text-align: center;
            font: 14px serif;
        }
 
        #num_year,
        #month_name {
            background-color: hsl(210, 100%, 95%);
            color: hsl(210, 100%, 50%);
            font: bold 18px serif;
            text-align: center;
        }
 
        #num_year {
            width: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }
 
        #month {
            display: inline-block;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 8px;
            padding: 5px;
            width: 250px;
        }
 
        #month_name {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }
 
        .table_month_vert,
        .table_month_horiz {
            table-layout: fixed;
            width: 100%;
            height: 250px;
            border-spacing: 3px;
        }
 
        .table_month_horiz tr td:nth-child(1) {
            width: 20%;
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(1) {
        width: 20%;
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_horiz tr td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
        
        .table_month_vert tr:nth-child(1) td.day {
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_vert tr:nth-child(1) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_vert tr:nth-child(n+2) td.day {
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_vert tr:nth-child(n+2) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
 
    </style>
</head>
 
<body>
    <div id="num_year"></div>
    <div id="month">
        <div id="navigation_panel">
        <select id="select_month"></select>
        <input class="year_input" type="number" value="">
        </div>
        <div id="month_name"></div> 
        <table class="table_month_vert"></table> 
    </div>
</body>
</html>
HTML5
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

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #navigation_panel {
            white-space: nowrap;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            padding: 5px 15px;
            margin: 0 0 5px;
        }
        
        input {
            width: 56px;
            display: inline-block;
            text-align: center;
            border: 1px solid hsl(210, 100%, 50%);
        }
        
        .table_rotate {
            border: 1px solid hsl(210, 100%, 50%);
            border-radius: 12px 12px 0 12px;
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        select {
            border: 1px solid hsl(210, 100%, 50%);
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        .table_month_horiz,
        .table_month_vert {
            width: 250px;
            height: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
        }
        
        td {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            text-align: center;
            font: 14px serif;
        }
 
        #num_year,
        #month_name {
            background-color: hsl(210, 100%, 95%);
            color: hsl(210, 100%, 50%);
            font: bold 18px serif;
            text-align: center;
        }
 
        #num_year {
            width: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }
 
        #month {
            display: inline-block;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 8px;
            padding: 5px;
            width: 250px;
        }
 
        #month_name {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }
 
        .table_month_vert,
        .table_month_horiz {
            table-layout: fixed;
            width: 100%;
            height: 250px;
            border-spacing: 3px;
        }
 
        .table_month_horiz tr td:nth-child(1) {
            width: 20%;
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(1) {
        width: 20%;
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_horiz tr td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
        
        .table_month_vert tr:nth-child(1) td.day {
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_vert tr:nth-child(1) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_vert tr:nth-child(n+2) td.day {
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_vert tr:nth-child(n+2) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
 
    </style>
</head>
 
<body>
    <div id="num_year"></div>
    <div id="month">
        <div id="navigation_panel">
        <select id="select_month"></select>
        <input class="year_input" type="number" value="">
        </div>
        <div id="month_name"></div> 
        <table class="table_month_horiz"></table> 
    </div>
</body>
</html>
HTML5
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

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #navigation_panel {
            white-space: nowrap;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            padding: 5px 15px;
            margin: 0 0 5px;
        }
        
        input {
            width: 56px;
            display: inline-block;
            text-align: center;
            border: 1px solid hsl(210, 100%, 50%);
        }
        
        .table_rotate {
            border: 1px solid hsl(210, 100%, 50%);
            border-radius: 12px 12px 0 12px;
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        select {
            border: 1px solid hsl(210, 100%, 50%);
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        .table_month_horiz,
        .table_month_vert {
            width: 250px;
            height: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
        }
        
        td {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            text-align: center;
            font: 14px serif;
        }
 
        #num_year,
        #month_name {
            background-color: hsl(210, 100%, 95%);
            color: hsl(210, 100%, 50%);
            font: bold 18px serif;
            text-align: center;
        }
 
        #num_year {
            width: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }
 
        #month {
            display: inline-block;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 8px;
            padding: 5px;
            width: 250px;
        }
 
        #month_name {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }
 
        .table_month_vert,
        .table_month_horiz {
            table-layout: fixed;
            width: 100%;
            height: 250px;
            border-spacing: 3px;
        }
 
        .table_month_horiz tr td:nth-child(1) {
            width: 20%;
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(1) {
        width: 20%;
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_horiz tr td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
        
        .table_month_vert tr:nth-child(1) td.day {
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_vert tr:nth-child(1) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_vert tr:nth-child(n+2) td.day {
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_vert tr:nth-child(n+2) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
 
    </style>
</head>
 
<body>
    <div id="num_year"></div>
    <div id="month">
        <div id="navigation_panel">
        <select id="select_month"></select>
        <input class="year_input" type="number" value="">
        <button class="table_rotate">➘</button>
        </div>
        <div id="month_name"></div> 
        <table class="table_month_horiz"></table>
    </div>
</body>
</html>
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
30.05.2022, 04:19  [ТС]
есть скрипт календаря, который находит на странице элементы и вставляет название месяца, номер года, таблицы с верикальным и горизонтальным календарём, но на разных страницах неизвестно нужны ли эти элементы или нет, при попытке убрать эти элементы из html-кода,скрипт перестают что либо показывать, остаётся чистая белая страница, возможно ли сделать так, чтобы скрипт сначала проверил есть ли в html-коде эти элементы, и только при наличии вставлял нужные данные?

надо проверить наличие именно этих элементов
HTML5
1
2
3
4

<div class="month_name"></div> 
        <div class="num_year"></div>
        <table class="table_month_horiz"></table>
        <table class="table_month_vert"></table>
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #navigation_panel {
            white-space: nowrap;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            padding: 5px 15px;
            margin: 0 0 5px;
        }
        
        input {
            width: 56px;
            display: inline-block;
            text-align: center;
            border: 1px solid hsl(210, 100%, 50%);
        }
        
        .table_rotate {
            border: 1px solid hsl(210, 100%, 50%);
            border-radius: 12px 12px 0 12px;
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        select {
            border: 1px solid hsl(210, 100%, 50%);
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        .table_month_horiz,
        .table_month_vert {
            width: 250px;
            height: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
        }
        
        td {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            text-align: center;
            font: 14px serif;
        }
 
        .num_year,
        .month_name {
            background-color: hsl(210, 100%, 95%);
            color: hsl(210, 100%, 50%);
            font: bold 18px serif;
            text-align: center;
        }
 
        .num_year {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }
 
        #month {
            display: inline-block;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 8px;
            padding: 5px;
            width: 250px;
        }
 
        .month_name {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }
 
        .table_month_vert,
        .table_month_horiz {
            table-layout: fixed;
            width: 100%;
            height: 250px;
            border-spacing: 3px;
        }
 
        .table_month_horiz tr td:nth-child(1) {
            width: 20%;
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(1) {
        width: 20%;
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_horiz tr td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
        
        .table_month_vert tr:nth-child(1) td.day {
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_vert tr:nth-child(1) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_vert tr:nth-child(n+2) td.day {
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_vert tr:nth-child(n+2) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
 
    </style>
</head>
 
<body>
    <div id="month">
        <div id="navigation_panel">
        <select id="select_month"></select>
        <input class="year_input" type="number" value="">
        <button class="table_rotate">➘</button>
        </div>
        <div class="month_name"></div> 
        <div class="num_year"></div>
        <table class="table_month_horiz"></table>
        <table class="table_month_vert"></table> 
    </div>
    <script>
        var calendar = {
            update: function(year, month) {
                this.year = year;
                this.month = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь', ][month];
                var startDay = new Date(year, month, 1);
                var offsetDay = (startDay.getDay() || 7) - 1;
                startDay.setDate(startDay.getDate() - offsetDay);
                var lastDay = new Date(startDay);
                var days = new Date(year, month + 1, 0).getDate();
                days = Math.ceil((days + offsetDay) / 7) * 7;
                lastDay.setDate(lastDay.getDate() + days);
                this.data = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
                while (startDay < lastDay) {
                    this.data.push(startDay.getDate());
                    startDay.setHours(24);
                }
            },
            render: function(horiz) {
                var html = '';
                if (horiz) {
 
                    this.element.classList.add("horiz");
                    for (var i = 0, j = 0; i < this.data.length; j = ++i % 7) {
                        if (j == 0) html += '<tr class="week">';
                        html += '<td class="day">' + this.data[i] + '</td>';
                        if (j == 6) html += '</td>';
                    }
                } else {
                    html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>'];
                    for (var i = 0; i < this.data.length; i++) {
                        html[i % 7] += '<td class="day">' + this.data[i];
                    }
                    html = html.join('')
                }
 
                this.numYear.textContent = this.year;
                this.monthName.textContent = this.month;
                this.element.innerHTML = html;
            },
        };
        var today = new Date(),
            thisYear = today.getFullYear(),
            thisMonth = today.getMonth();
        calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
        calendar.numYear = document.querySelector('.num_year');
        calendar.monthName = document.querySelector('.month_name');
        calendar.element = document.querySelector('.table_month_vert');
        calendar.update(thisYear, thisMonth);
        calendar.render(true);
        calendar.element = document.querySelector('.table_month_horiz');
        calendar.render();
        
        selector = document.querySelector('#select_month');
        month_list = ['Январь', 'Февраль', 'Март', 'Апрель', ' Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
        for (var i = 0; i < month_list.length; i++){
        selector.options[i] = new Option(month_list[i], i);
        }
        selector.selectedIndex = thisMonth;
        
        //Это для того, чтобы менять календарь при изменении месяца и года
        selector.addEventListener('change', load);
        document.querySelector('#year_input').addEventListener('input', load);
        
        document.getElementById('table_rotate').addEventListener('click', function() {
        
        calendar.toggle();
        });
        
        function load(){
        var year = document.getElementById('year_input').value;
        var month = selector.selectedIndex;
        calendar.update(year, month);
        calendar.render();
        }
        
        document.addEventListener("DOMContentLoaded", ()=>{
        document.querySelector('#year_input').value = thisYear;
        load();
        });
    </script>
</body>
</html>
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
30.05.2022, 09:53
JavaScript
1
2
3
4

const element = document.querySelector('selector');
if (element) {
  // Элемент есть на странице
}
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
30.05.2022, 11:29  [ТС]
Balanaar, пыталась добавить
JavaScript
1
2

let elem = document.querySelector('.table_month_vert');
if(elem) { calendar.element = document.querySelector('.table_month_vert'); }
но ничего не получается...
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
30.05.2022, 11:32
Блондинка йа, что именно не получается?
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
30.05.2022, 11:56  [ТС]
Balanaar, при попытке убрать что нибудь из html-кода, скрипт перестаёт показывать всё, отображается пустая страница...
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
30.05.2022, 11:57
Блондинка йа, пора бы вам научиться читать ошибки в консоли.
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
30.05.2022, 12:15  [ТС]
а надо чтобы скрипт показывал только одну таблицу из двух, на одной странице сайта горизонтальную, а на другой странице сайта вертикальную, также и с дивами, на одной странице с дивами, на другой без дивов, чтоб не использовать несколько разных скриптов календаря.........

Добавлено через 10 минут
Balanaar, незнание иностранных языков, и отсутствие девайсов, не даёт возможности читать ошибки консоли, пытаюсь что-то сделать с телефона...
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
30.05.2022, 12:35
Цитата Сообщение от Блондинка йа Посмотреть сообщение
отсутствие девайсов
Каких девайсов?
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
30.05.2022, 13:59  [ТС]
был бы пк или ноут, было бы намного проще...
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
30.05.2022, 14:21
Блондинка йа, ммм... больно.
Как вариант, используйте codepen.io. Там хоть консоль подскажет что-нибудь.
В вашем случае проблема в
JavaScript
1
2

this.numYear.textContent = this.year;
this.monthName.textContent = this.month;
Если элементы не были найдены на странице, то
JavaScript
1
2

this.numYear // возвращает null
this.monthName // возвращает null
Попытка установить свойство textContent у значения null приводит к критической ошибке
Uncaught TypeError: Cannot set properties of null (setting 'textContent')
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
30.05.2022, 14:49  [ТС]
Balanaar, можешь подсказать что изменить в коде из 5го поста, и чем заменить?
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
30.05.2022, 14:57
Я уже подсказал в 6м и 14м постах
0
 Аватар для Блондинка йа
13 / 12 / 1
Регистрация: 08.03.2019
Сообщений: 279
31.05.2022, 17:34  [ТС]
Balanaar, извини, но моих знаний js явно не достаточно, чтобы самой разобраться в этом вопросе...
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
 31.05.2022, 17:34
Помогаю со студенческими работами здесь

Проблема с CSS, как сделать так, чтобы иконка внутри круга меняла цвет при наведении
Здравствуйте, не подскажите как можно сделать так, чтобы иконка личного кабинета, как и круг вокруг, при наведении меняла цвет? ...

Написать класс Clr_BTN, чтобы при наведении курсора и при нажатии на кнопку она меняла цвет
Доброго времени. Задача написать класс Colored_Button, чтобы при наведении курсора на кнопку и нажатии менялся цвет. Вариант с OWNERDRAW не...

Написать класс Clr_BTN, чтобы при наведении курсора и при нажатии на кнопку она меняла цвет
Доброго времени. Проблема заключается в том, что я не могу реализовать изменение цвета при фокусе\нажатии кнопки. Да, можно через...

Зацикливание при клике по ссылке.Как исправить?
Доброго дня всем. У меня есть сценарий JS для нажатия на ссылки, которые содержат некое слово. Это работает. window.onload =...

Сделать, чтобы при наведении на кнопку, она наполовину меняла цвет
Всем привет. Можете помочь, как можно сделать, чтобы при наведении на кнопку, она наполовину меняла цвет? И еще при нажатии на кнопку...


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

Или воспользуйтесь поиском по форуму:
17
Ответ Создать тему
Новые блоги и статьи
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++
8Observer8 10.03.2026
Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
 Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE
8Observer8 10.03.2026
Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки
Neotwalker 08.03.2026
Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F#
DevAlt 06.03.2026
В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование
8Observer8 05.03.2026
Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D
8Observer8 04.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru