Как реализовать данный функционал в JS - JavaScript, Ajax

Васелек · 01.08.2017, 11:23

Доброго времени, помогите (направьте), как решить данную задачу с помощью js. В js ещё совсем зелёный, поэтому хотелось бы услышать подробный способ решения данного материала.
С чего начать?
Как реализовать стрелку?
Задачу прикрепляю в картинках.

Васелек · 01.08.2017, 22:57

Может кто подскажет, что именно нужно почитать или посмотреть по данной теме?

Naive · 02.08.2017, 00:58

Цитата:

Сообщение от Васелек

С чего начать?

С логики приложения, пользовательский интерфейс тут (как и всегда) вторичен

Цитата:

Сообщение от Васелек

Как реализовать стрелку?

SVG, canvas или CSS — не важно. Стрелка простенькая, я бы на CSS нарисовал.

Васелек · 02.08.2017, 07:59

Накидал простенькую Html и Css

Код:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
	<script src="main.js"></script>
</head>
<body>
	<div id="wrapper">
		<div class="form">
			<input type="text" class="val one" onchange="">
			<div class="plus">
				+
			</div>
			<input type="text" class="val two">
			<div class="plus">
				=
			</div>
			<div class="sum">
				
			</div>
		</div>
	</div>
</body>
</html>

и Css:

Код:

body {
	padding: 0;
	margin: 0;
}


#wrapper {
	width: 100%;
	padding-top: 100px;
}

.val {
	display: block;
	margin: 0 auto;
	width: 40px;
	height: 40px;
	float: left;
	font-size: 27px;
	text-align: center;
}

.plus {
	margin: 0 auto;
	text-align: center;
	width: 40px;
	height: 40px;
	float: left;
	padding-top: 9px;
	font-weight: bold;
	font-size: 27px;
}

.form {
	width: 300px;
	margin: 0 auto;

}

.sum {
	width: 46px;
	height: 46px;
	border: 1px solid red;
	float: left;
	padding: 11px 1px 1px 1px;
	text-align: center;
	box-sizing: border-box;
}


.clearfix::after {
    content: " ";
    display: table;
    clear: both;
    float: left;
}

И встал такой вопрос, через что реализовывать чтобы информация с инпута(он же без кнопки отправить) уходила например в нужную переменную. Думаю через onchange. Кто что думает?

Naive · 03.08.2017, 12:03

Цитата:

Сообщение от Васелек

И встал такой вопрос, через что реализовывать чтобы информация с инпута(он же без кнопки отправить) уходила например в нужную переменную. Думаю через onchange. Кто что думает?

Можно, но учти что он срабатывает только при снятии фокуса или ентере (кнопко): ИМХО, не очень юзер-френдли.
Мне больше нравится событие input... Если это учебная задача, а у препода адекватный браузер, то норм. Если у него вдруг ишак старенький, то можно onkeyup юзануть.
Но если у него действительно старенький ишак, то у тебя есть проблемы посерьезней: ни один способ из приведенных способов со стрелкой не подойдет =)
п.с. я так на дипломе лоханулся, когда на презентационном ноуте стоял ИЕ6) Пришлось в ПП за 20 минут переделывать презу)

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
написать функцию, которая считывает данный файл и перезаписывает данный файл	vova_makr	Помощь студентам	10	05.10.2015 15:37
Как реализовать данный запрос	Artwer	PHP	6	14.07.2015 10:04
Как понять данный код?	SkyWay	Microsoft Office Excel	1	12.02.2015 02:36
Функционал программы должен быть реализован как класс, размещенный в отдельном модуле.	Сейвс	Помощь студентам	0	29.02.2012 10:12
как отсортировать массив под данный отрезок и как минимум и максимум из него найти	SIEGER	Паскаль, Turbo Pascal, PascalABC.NET	1	20.11.2008 08:58

01.08.2017, 22:57	#2
Васелек Регистрация: 01.08.2017 Сообщений: 3	Может кто подскажет, что именно нужно почитать или посмотреть по данной теме?