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

Question

CoCoCoder @CoCoCoder

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

HTML

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

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

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

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

+1 ещё

Простой
Как сделать одинаковую высоту у карточек?
- 1 подписчик
- 11 часов назад
- 92 просмотра
1

ответ
HTML

+1 ещё

Простой
Как внизу блока сделать маску волной и поместить туда изображение?
- 2 подписчика
- 16 часов назад
- 129 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Мулти селект Dropdown. Как можно создать многослойный мулти селект?
- 1 подписчик
- 24 дек.
- 86 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Почему window.scrollTo(0, document.body.scrollHeight); не работает?
- 1 подписчик
- 24 дек.
- 64 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как подключить 3D персонажа в three.js?
- 1 подписчик
- 23 дек.
- 68 просмотров
0

ответов
HTML

+1 ещё

Простой
Как сделать блок такой же формы?
- 1 подписчик
- 23 дек.
- 139 просмотров
1

ответ
HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 23 дек.
- 130 просмотров
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 34 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 123 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 99 просмотров
1

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

Верстальщик HTML

MST

от 450 $

Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер

BYTIME

от 130 000 ₽

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

Написать простую игру под Play Market

26 дек. 2024, в 16:23

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

Отрефакторить приложение на Blazor

26 дек. 2024, в 16:23

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

Спинтакс шаблон

26 дек. 2024, в 14:40

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

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 вообще не знакомы - рекомендую сначала выучить этот язык. Потом уже станет понятно как реализовать функционал калькулятора. Код, по моему, никто не будет писать вместо вас, так что учитесь, поищите в интернете и точно найдёте то, что вам понадобится.

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

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

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

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