Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/8: Рейтинг темы: голосов - 8, средняя оценка - 4.75
3 / 3 / 2
Регистрация: 03.11.2018
Сообщений: 148
1

Поменять местами цвета кнопок

06.01.2021, 22:35. Просмотров 1486. Ответов 3

Возникла проблема в написании функции. Есть поле с кнопками 11x11, каждая из которых имеет свой цвет и мы так видим рисунок 11x11 пикселей. Мне нужно написать функцию поворота этого рисунка на 90 градусов. Желательно 2 функции (поврот по часовой и против часовой стрелки). Для удобства каждая кнопка имеет свой id. Например, b1-4 (кнопка первой строки и 4 столбца).

На просторах интернета я нашел 2 таких функции, но только для матриц:
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
               function rotateCounterClockwise(a){
            var n=a.length;
            for (var i=0; i<n/2; i++) {
                for (var j=i; j<n-i-1; j++) {
                    var tmp=a[i][j];
                    a[i][j]=a[j][n-i-1];
                    a[j][n-i-1]=a[n-i-1][n-j-1];
                    a[n-i-1][n-j-1]=a[n-j-1][i];
                    a[n-j-1][i]=tmp;
                }
            }
            return a;
        }
 
        function rotateClockwise(a) {
            var n=a.length;
            for (var i=0; i<n/2; i++) {
                for (var j=i; j<n-i-1; j++) {
                    var tmp=a[i][j];
                    a[i][j]=a[n-j-1][i];
                    a[n-j-1][i]=a[n-i-1][n-j-1];
                    a[n-i-1][n-j-1]=a[j][n-i-1];
                    a[j][n-i-1]=tmp;
                }
            }
            return a;
        }
Может их переделать?

Заранее спасибо!
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
06.01.2021, 22:35
Ответы с готовыми решениями:

изменение цвета кнопок
Привет всем! Помогите разобраться. У меня есть например 4 кнопки с определенным цветом: ...

Фиксация цвета кнопок
Здравствуйте. Есть десяток кнопок. После нажатия на любую кнопку зафиксировать её цвет. Да...

Фиксация цвета кнопок
Здравствуйте. Есть 10 кнопок. Текущее оформление кнопок следующее: - Каждая кнопка имеет...

Смена цвета кнопок при нажатии
Здравствуйте, У меня есть список в котором несколько кнопок. Мне нужно чтобы при нажатии на кнопку...

3
393 / 146 / 31
Регистрация: 26.11.2019
Сообщений: 385
06.01.2021, 23:32 2
примени css transform: rotate(90deg)
1
Модератор
2159 / 1388 / 428
Регистрация: 07.09.2019
Сообщений: 2,108
07.01.2021, 01:01 3
Лучший ответ Сообщение было отмечено Maximax67 как решение

Решение

Ну или, если хочется просто поупражняться в написании кода, то можно перекрашивать кнопки; на примере матрицы 4 х 4:
HTML5
1
2
3
4
5
6
<div>
  <button id="b1-1"></button>
  <button id="b1-2"></button>
  <button id="b2-1"></button>
  <button id="b2-2"></button>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
div {
  display: grid;
  grid-template-rows: repeat(2 1fr);
  grid-template-columns: repeat(2 1fr);
  width: 200px;
  height: 200px;
  border: thin solid black;
}
div button {
  border: none;
  border-radius: 0px;
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const buttons = [...document.querySelectorAll("div button")];
buttons.forEach((b, i) => {
  b.style.gridRowStart = Math.floor(i / 2) + 1;
  b.style.gridColumnStart = (i % 2) + 1;
});
const matrix = [
  ["red", "white"],
  ["black", "red"]
];
render(matrix);
render(rotateCounterClockwise(matrix));
function render(matrix) {
  for (let i = 0; i < matrix[0].length; i++) {
    for (let j = 0; j < matrix.length; j++) {
      const btn = document.getElementById(`b${j + 1}-${i + 1}`);
      btn.style.backgroundColor = matrix[j][i];
    }
  }
}
1
3 / 3 / 2
Регистрация: 03.11.2018
Сообщений: 148
07.01.2021, 12:02  [ТС] 4
Всем большое спасибо!
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
07.01.2021, 12:02

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Как поменять местами цвета кнопок?
Всем привет.Нам дали лабу с заданием: 5.Добавить в форму две кнопки (1 и 2), для которых задать...

Как поменять названия кнопок местами в Java?
есть поле из 5 кнопок с числами(названиями кнопок) от 1 до 5. Помогите написать код для того чтобы...

Поменять местами Button-ы в форме. Автоматический сбор матрицы из кнопок
Доброго времени суток уважаемые форумчане. Помогите пожалуйста. Уже неделю пытаюсь придумать что...

Задайте изменение цвета кнопок и цвета шрифта на кнопках формы в ходе выполнения программы
1. Задайте изменение цвета кнопок и цвета шрифта на кнопках формы в ходе выполнения программы. 2....

Если первый и последний элементы списка чётные - то поменять их местами. Иначе поменять местами голову и хвост списка
Дан список. Если первый и последний элементы списка чётные - то поменять их местами. Иначе поменять...

Поменять местами первый и последний столбец, после поменять местами первый и предпоследний строки
Масив 4х4, нужно поменять местами первый и последний столбец, после поменять местами первый и...


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

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

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