Как сделать кнопки, каждая из которых будет менять цвет фона документа при нажатии?

@Юргъ · Регистрация: 27.09.2014

Студворк — интернет-сервис помощи студентам

Помогите!!! Не могу справиться!!!!
Нужно написать программу с использованием двух языков: html и javascript.
Задание такое:
a. При помещении курсора мыши в любую из клеток(всего 7 штук цвета радуги) второй строки фон документа должен приобретать соответствующий цвет;
b. При уходе курсора из второй строки цвет фона должен восстанавливаться;
c. При нажатии мыши фон клетки, в которой находится курсор, должен стать белым;
d. При отпускании кнопки мыши цвет фона клетки должен восстанавливаться.
e. При нажатии кнопки мыши запускать Alert, выводящий на экран координаты точки, в которой это нажатие произошло;
Прошу помогите! Заранее спасибо!

@Eva Rosalene · 27.09.2014, 19:43

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
NodeList.prototype.__proto__ = Array.prototype;
document.querySelectorAll('.color').forEach(function (i){
    var dataColor = i.getAttribute('data-color')
    i.style.color = dataColor;
    
    i.onmouseover = (function (){
       document.body.style.backgroundColor = dataColor;
       i.style.color = 'black';
    });
    
    i.onmouseout = (function (){
       i.style.color = dataColor;
       i.style.backgroundColor = '';
       document.body.style.backgroundColor = '';
    });
    
    i.onmousedown = (function (e){
       if (e.button != 0) return;
       i.style.backgroundColor = 'white';
    });
    
    i.onmouseup = (function (e){
       if (e.button != 0) return;
       i.style.backgroundColor = '';
       i.style.color = 'white';
       alert( '(' + e.x + '; ' + e.y +')' )
    });
});

HTML5
1
2
3
4
5
6
7
8
9
<div class='container'>
    <div class='color' data-color='red'>Red</div>
    <div class='color' data-color='orange'>Orange</div>
    <div class='color' data-color='yellow'>Yellow</div>
    <div class='color' data-color='green'>Green</div>
    <div class='color' data-color='lightblue'>LightBlue</div>
    <div class='color' data-color='blue'>Blue</div>
    <div class='color' data-color='violet'>Violet</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.color {
    vertical-align: center;
    padding: 3px;
    cursor: pointer;
    font-weight: bold;
}
 
.container {
    width: 100%;
    height: 100%;
    text-align: center;
}
 
body {
    background-color: black;
}

Демонстрация: http://jsfiddle.net/jmqk3zep/3/embedded/result/

@Юргъ · 27.09.2014, 20:07 **[ТС]**

спасибо но как сделать это в виде кнопок?
А также сформировать в один код?
Чтоб он работал? а то у меня вот так получается:

JavaScript
1
NodeList.prototype.__proto__ = Array.prototype; document.querySelectorAll('.color').forEach(function (i){ var dataColor = i.getAttribute('data-color') i.style.color = dataColor; i.onmouseover = (function (){ document.body.style.backgroundColor = dataColor; i.style.color = 'black'; }); i.onmouseout = (function (){ i.style.color = dataColor; document.body.style.backgroundColor = ''; }); i.onmousedown = (function (e){ if (e.button != 0) return; i.style.backgroundColor = 'white'; }); i.onmouseup = (function (e){ if (e.button != 0) return; i.style.backgroundColor = ''; i.style.color = 'white'; alert( '(' + e.x + '; ' + e.y +')' ) }); });

Code
1
2
3
4
5
6
7
     Red
    Orange
    Yellow
    Green
    LightBlue
    Blue
    Violet

CSS
1
.color { vertical-align: center; padding: 3px; cursor: pointer; font-weight: bold; } .container { width: 100%; height: 100%; text-align: center; } body { background-color: black; }

Демонстрация: http://jsfiddle.net/jmqk3zep/1/embedded/result/
и больше никак.... не получается как у вас(

@Юргъ · 27.09.2014, 20:10 **[ТС]**

Как сделать кнопки, каждая из которых будет менять цвет фона документа при нажатии?

@Юргъ · 27.09.2014, 20:21 **[ТС]**

Поможете?

@Eva Rosalene · 27.09.2014, 20:35

С кнопками как-то так.

HTML5
1
2
3
4
5
6
7
8
9
<div class='container'>
   <button class='color' data-color='red'>Red</button><br/>
   <button class='color' data-color='orange'>Orange</button><br/>
   <button class='color' data-color='yellow'>Yellow</button><br/>
   <button class='color' data-color='green'>Green</button><br/>
   <button class='color' data-color='lightblue'>LightBlue</button><br/>
   <button class='color' data-color='blue'>Blue</button><br/>
   <button class='color' data-color='violet'>Violet</button>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.color {
    vertical-align: center;
    padding: 3px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    background-color: black;
}
 
.container {
    width: 100%;
    height: 100%;
    text-align: center;
}
 
body {
    background-color: black;
}

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
NodeList.prototype.__proto__ = Array.prototype;
document.querySelectorAll('.color').forEach(function (i){
    var dataColor = i.getAttribute('data-color')
    i.style.color = dataColor;
    
    i.onmouseover = (function (){
       document.body.style.backgroundColor = dataColor;
       i.style.backgroundColor = dataColor;
       i.style.color = 'black';
    });
    
    i.onmouseout = (function (){
       i.style.color = dataColor;
       i.style.backgroundColor = '';
       document.body.style.backgroundColor = '';
    });
    
    i.onmousedown = (function (e){
       if (e.button != 0) return;
       i.style.backgroundColor = 'white';
    });
    
    i.onmouseup = (function (e){
       if (e.button != 0) return;
       i.style.backgroundColor = '';
       i.style.color = 'white';
       alert( '(' + e.x + '; ' + e.y +')' )
    });
});

http://jsfiddle.net/jmqk3zep/5/embedded/result/

@BANO · 27.09.2014, 20:40

смотри функция приведённая FraidZZ универсальна ты просто class у кнопок поменяй на color и должно работать или в вашем случае tr или td уже не помню но во всяком случае на клетку

@Eva Rosalene · 27.09.2014, 20:43

Сообщение от BANO

универсальна ты просто class у кнопок поменяй на color и должно работать или в вашем случае tr или td уже не помню но во всяком случае на клетку

Именно так.

@Юргъ · 27.09.2014, 20:47 **[ТС]**

не получается до сих пор объединить в один код все это( на фот будет результат увидите сейчас....

@Юргъ · 27.09.2014, 20:48 **[ТС]**

Вот что у меня получилось:
уже не знаю что делать(((

@Юргъ · 27.09.2014, 20:50 **[ТС]**

посмотрите на фотках что должно получится и что у меня получилось..

@BANO · 27.09.2014, 21:00

ну понятно код страницы скинь ты css записал в текст старницы

Добавлено через 1 минуту
я тебе больше скажу ты просто всё скопировал в файл без форматирования

@Eva Rosalene · 27.09.2014, 21:00

Компонуйте код правильно.

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
<html>
   <head>
      <title>Rainbow Color Buttons</title>
      <style>
         .color {
            vertical-align: center;
            padding: 3px;
            cursor: pointer;
            font-weight: bold;
            width: 100%;
            background-color: black;
         }
 
         .container {
            width: 100%;
            height: 100%;
            text-align: center;
         }
 
         body {
            background-color: black;
         }
      </style>
   </head>
   <body>
      <div class='container'>
         <button class='color' data-color='red'>Red</button><br/>
         <button class='color' data-color='orange'>Orange</button><br/>
         <button class='color' data-color='yellow'>Yellow</button><br/>
         <button class='color' data-color='green'>Green</button><br/>
         <button class='color' data-color='lightblue'>LightBlue</button><br/>
         <button class='color' data-color='blue'>Blue</button><br/>
         <button class='color' data-color='violet'>Violet</button>
      </div>
      <script>
         NodeList.prototype.__proto__ = Array.prototype;
         document.querySelectorAll('.color').forEach(function (i){
            var dataColor = i.getAttribute('data-color')
            i.style.color = dataColor;
    
            i.onmouseover = (function (){
               document.body.style.backgroundColor = dataColor;
               i.style.backgroundColor = dataColor;
               i.style.color = 'black';
            });
    
            i.onmouseout = (function (){
               i.style.color = dataColor;
               i.style.backgroundColor = '';
               document.body.style.backgroundColor = '';
            });
    
            i.onmousedown = (function (e){
               if (e.button != 0) return;
               i.style.backgroundColor = 'white';
            });
    
            i.onmouseup = (function (e){
               if (e.button != 0) return;
               i.style.backgroundColor = '';
               i.style.color = 'white';
               alert( '(' + e.x + '; ' + e.y +')' )
            });
         });
      </script>
   </body>
</html>

@BANO · 27.09.2014, 21:01

надо js в теги <script></script> а css в <style></style>

@Юргъ · 27.09.2014, 21:01 **[ТС]**

все понял! спасибо!!!

@BANO · 27.09.2014, 21:02

у FraidZZ, правелно показанно я всегда медленно печатую

Добавлено через 20 секунд
☺☺☺

Новые блоги и статьи Все статьи Все блоги /
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .

@Юргъ 1 / 1 / 0 Регистрация: 27.09.2014 Сообщений: 10

	Как сделать кнопки, каждая из которых будет менять цвет фона документа при нажатии? 27.09.2014, 18:26. Показов 8750. Ответов 15 Метки нет (Все метки) Помогите!!! Не могу справиться!!!! Нужно написать программу с использованием двух языков: html и javascript. Задание такое: a. При помещении курсора мыши в любую из клеток(всего 7 штук цвета радуги) второй строки фон документа должен приобретать соответствующий цвет; b. При уходе курсора из второй строки цвет фона должен восстанавливаться; c. При нажатии мыши фон клетки, в которой находится курсор, должен стать белым; d. При отпускании кнопки мыши цвет фона клетки должен восстанавливаться. e. При нажатии кнопки мыши запускать Alert, выводящий на экран координаты точки, в которой это нажатие произошло; Прошу помогите! Заранее спасибо! 0

@Юргъ 1 / 1 / 0 Регистрация: 27.09.2014 Сообщений: 10
	27.09.2014, 20:10 [ТС]
	1

@Юргъ 1 / 1 / 0 Регистрация: 27.09.2014 Сообщений: 10
	27.09.2014, 20:21 [ТС]
	Поможете? 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	27.09.2014, 20:40
	смотри функция приведённая FraidZZ универсальна ты просто class у кнопок поменяй на color и должно работать или в вашем случае tr или td уже не помню но во всяком случае на клетку 1

@Юргъ 1 / 1 / 0 Регистрация: 27.09.2014 Сообщений: 10
	27.09.2014, 20:47 [ТС]
	не получается до сих пор объединить в один код все это( на фот будет результат увидите сейчас.... 0

@Юргъ 1 / 1 / 0 Регистрация: 27.09.2014 Сообщений: 10
	27.09.2014, 20:48 [ТС]
	Вот что у меня получилось: уже не знаю что делать((( Миниатюры 0

@Юргъ 1 / 1 / 0 Регистрация: 27.09.2014 Сообщений: 10
	27.09.2014, 20:50 [ТС]
	посмотрите на фотках что должно получится и что у меня получилось.. 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	27.09.2014, 21:00
	ну понятно код страницы скинь ты css записал в текст старницы Добавлено через 1 минуту я тебе больше скажу ты просто всё скопировал в файл без форматирования 2

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	27.09.2014, 21:01
	надо js в теги <script></script> а css в <style></style> 2

@Юргъ 1 / 1 / 0 Регистрация: 27.09.2014 Сообщений: 10
	27.09.2014, 21:01 [ТС]
	все понял! спасибо!!! 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	27.09.2014, 21:02
	у FraidZZ, правелно показанно я всегда медленно печатую Добавлено через 20 секунд ☺☺☺ 0