Как добавить прямоугольной области функционал кнопки?

Question

CoCoCoder @CoCoCoder

Новичок в веб-программировании,только учусь. :)

HTML

Как добавить прямоугольной области функционал кнопки?

В общем,сделал интерфейс калькулятору,так,как мне понравилось.Но,когда дело дошло до написания его функционала - всё застопорилось.Потому что я банально не понимаю,как добавить прямоугольной области(к примеру,у кнопки "=" это оранжевая часть вокруг неё) функционал кнопки.Подскажите,пожалуйста.Я полный новичок в этом плане.Прикладываю фотографию получившегося.

Вопрос задан более трёх лет назад
81 просмотр

12 комментариев

Подписаться 1 Простой 12 комментариев

freelion93 @freelion93

А код приложите?

Написано более трёх лет назад
CoCoCoder @CoCoCoder Автор вопроса

freelion93, да,конечно.А куда лучше?Или прям так вставлять?Просто мой первый вопрос здесь.

Написано более трёх лет назад
freelion93 @freelion93

CoCoCoder, вставляешь в сообщение сюда с вклюением в поле Исходный код, значок < / >

Написано более трёх лет назад

CoCoCoder @CoCoCoder Автор вопроса

<!DOCTYPE html>
<html>
	<head>
		<title>CoCoCoder</title>
		<meta charset = "utf-8">
		<link rel = "stylesheet" href = "calculator-style.css">
		<script src = "calculator-script.js" defer ></script>
	</head>
	<body>
		<div class = "button-number">
			<div class = "button-1"><span class = "1">1</span></div> <!-- 65px --> 
			<div class = "button-2">2</div>
			<div class = "button-3">3</div>
			<div class = "button-4">4</div>
			<div class = "button-5">5</div>
			<div class = "button-6">6</div>
			<div class = "button-7">7</div>
			<div class = "button-8">8</div>
			<div class = "button-9">9</div>
			<div class = "button-0" type = "button" value = "0" onclick = 'insert(0)'>0</div>
			<div class = "button-star">*</div>
			<div class = "button-slash">/</div>
			<div class = "button-equal">=</div>
			<div class = "button-amount">+</div>
			<div class = "button-difference">-</div>
			<div class = "button-degree">^</div>
			<div class = "output-line" type = "textarea"><input type = "textarea" class ="textview"></input></div>
		</div>
		<div class = "bkground"></div>
	</body>
</html>

.button-number {
	text-align:center;
}
.button-1 {
	height: 60px;
	width:60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:450px;
	margin-top:450px;
}
.button-2 {
	height: 60px;
	width:60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:515px;
	margin-top:-60px;
}
.button-3 {
	height: 60px;
	width:60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:580px;
	margin-top:-60px;
}
.button-4 {
	height: 60px;
	width:60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:450px;
	margin-top:-125px;
}
.button-5 {
	height: 60px;
	width:60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:515px;
	margin-top:-60px;
}
.button-6 {
	height: 60px;
	width:60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:580px;
	margin-top:-60px;
}
.button-7 {
	height: 60px;
	width:60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:450px;
	margin-top:-125px;
}
.button-8 {
	height: 60px;
	width:60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:515px;
	margin-top:-60px;
}
.button-9 {
	height: 60px;
	width:60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:580px;
	margin-top:-60px;
}
.button-0 {
	height:60px;
	width: 60px;
	background-color:#F1F3F4;
	border-radius:20px;
	font-size:40px;
	margin-left:515px;
	margin-top:135px;
}
.button-star {
	height:60px;
	width:60px;
	background-color:#F3A447;
	border-radius:20px;
	font-size:40px;
	margin-left:450px;
	margin-top:-60px;
}
.button-slash {
	height:60px;
	width:60px;
	background-color:#F3A447;
	border-radius:20px;
	font-size:40px;
	margin-left:580px;
	margin-top:-60px;
}
.button-equal {
	height:125px;
	width:60px;
	background-color:#F3A447;
	border-radius:20px;
	font-size:40px;
	margin-left:645px;
	margin-top:-125px;
}
.button-amount {
	height:60px;
	width:60px;
	background-color:#F3A447;
	border-radius:20px;
	font-size:40px;
	margin-left:645px;
	margin-top:-190px;
}
.button-difference {
	height:60px;
	width:60px;
	background-color:#F3A447;
	border-radius:20px;
	font-size:40px;
	margin-left:645px;
	margin-top:-125px;
}
.button-degree {
	height:60px;
	width:60px;
	background-color:#F3A447;
	border-radius:20px;
	font-size:40px;
	margin-left:645px;
	margin-top:-125px;
}
.output-line {
	width:190px;
	height:50px;
	margin-top:-55px;
	margin-left:450px;
	background-color:#fff;
}
.bkground {
	background-color:#4D4D4D;
	height:330px;
	width:270px;
	border-radius:20px;
	margin-left:443px;
	margin-top:-200px;
	z-index:-1;
	position:relative;
}
.textview {
	border:0px solid #fff;
	height:60px;
	width:30px;
}

Написано более трёх лет назад

CoCoCoder @CoCoCoder Автор вопроса

freelion93, прошу палками не кидаться,потому как только посмотрев гайд узнал,что калькулятор целесообразнее делать таблицей.)

Написано более трёх лет назад
Сергей Карвасарный @megapihar6

но там не все так просто в калькуляторе будет у тебя))
snippet
Вот тебе пример калькулятора делал когда-то на счет красивого кода не обещаю) быстро накидал и забыл про него) eval() почитай про это.
snippet

Написано более трёх лет назад
CoCoCoder @CoCoCoder Автор вопроса

Сергей Карвасарный, Извините,а в каком смысле?Я немного не понимаю сути данного скриншота.Это консоль?

Написано более трёх лет назад
freelion93 @freelion93

CoCoCoder, вообще да, а так нужно внутрь засунуть кнопки вместо div
<button class = "button-2">2</button>
и уже стилизовать их

Написано более трёх лет назад
CoCoCoder @CoCoCoder Автор вопроса

freelion93, Спасибо Вам.

Написано более трёх лет назад
freelion93 @freelion93

CoCoCoder, да нзч

Написано более трёх лет назад
Сергей Карвасарный @megapihar6

CoCoCoder, кнопка была)) я подкинул готовый калькулятор смотри если нужно будет

Написано более трёх лет назад
CoCoCoder @CoCoCoder Автор вопроса

Сергей Карвасарный, Понял.Вам тоже спасибо большое,разобрался!

Написано более трёх лет назад

Решения вопроса 2

3 комментария

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+2 ещё

Простой
Как сделать так, чтобы при наведении на один объект, меняется другой, с помощью hover?
- 1 подписчик
- 15 минут назад
- 10 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- час назад
- 34 просмотра
0

ответов
JavaScript

+3 ещё

Средний
Какие есть способы организовать редкое добавление статей на сайт?
- 1 подписчик
- 20 часов назад
- 103 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как сделать авто подтверждение?
- 2 подписчика
- 23 часа назад
- 138 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему не работает ссылка в HTML?
- 2 подписчика
- вчера
- 132 просмотра
1

ответ
HTML

Простой
Почему не подключается спрайт SVG?
- 1 подписчик
- 16 апр.
- 71 просмотр
0

ответов
JavaScript

+2 ещё

Простой
Как исправить прыгающий контент у сайта?
- 2 подписчика
- 15 апр.
- 214 просмотров
1

ответ
HTML

+1 ещё

Средний
Как сделать чтобы было по 2 блока на строке, а не сразу все 4?
- 2 подписчика
- 15 апр.
- 74 просмотра
1

ответ
PHP

+2 ещё

Простой
Как подружить html с json?
- 1 подписчик
- 14 апр.
- 163 просмотра
1

ответ
JavaScript

+4 ещё

Средний
Как сделать эффект закруглений как на фото?
- 4 подписчика
- 14 апр.
- 2608 просмотров
2

ответа
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Редактирование цен - Ozon, AliExpress, Yandex Market

18 апр. 2024, в 11:47

30000 руб./за проект

Модификация приложения на android

18 апр. 2024, в 11:46

5000 руб./за проект

Оптимизация Я Директ

18 апр. 2024, в 11:43

10000 руб./за проект

freelion93, да,конечно.А куда лучше?Или прям так вставлять?Просто мой первый вопрос здесь.
CoCoCoder, вставляешь в сообщение сюда с вклюением в поле Исходный код, значок < / >
freelion93, прошу палками не кидаться,потому как только посмотрев гайд узнал,что калькулятор целесообразнее делать таблицей.)
но там не все так просто в калькуляторе будет у тебя))
snippet
Вот тебе пример калькулятора делал когда-то на счет красивого кода не обещаю) быстро накидал и забыл про него) eval() почитай про это.
snippet
Сергей Карвасарный, Извините,а в каком смысле?Я немного не понимаю сути данного скриншота.Это консоль?
CoCoCoder, вообще да, а так нужно внутрь засунуть кнопки вместо div
<button class = "button-2">2</button>
и уже стилизовать их
CoCoCoder, кнопка была)) я подкинул готовый калькулятор смотри если нужно будет
Сергей Карвасарный, Понял.Вам тоже спасибо большое,разобрался!

Answer 1 · 2019-08-07 19:30:21

Алексей Ярков @yarkov

Помог ответ? Отметь решением.

Так делать вообще не надо. Кнопка должна быть кнопкой. Кнопка тоже прекрасно стилизуется.

Ответ написан более трёх лет назад

3 комментария

Answer 2 · 2019-08-07 23:51:07

Здравствуйте. Как уже упомянули, лучше кнопки делать кнопками. Но функционал калькулятора вы всё равно будете писать на JavaScript. Там конечно неважно div это или кнопка, но раз уж для кнопки сделали отдельный элемент - то его точно стоит использовать. Если вы с JavaScript вообще не знакомы - рекомендую сначала выучить этот язык. Потом уже станет понятно как реализовать функционал калькулятора. Код, по моему, никто не будет писать вместо вас, так что учитесь, поищите в интернете и точно найдёте то, что вам понадобится.

Как добавить прямоугольной области функционал кнопки?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт