Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 01.08.2017, 11:23   #1
Васелек
 
Регистрация: 01.08.2017
Сообщений: 3
По умолчанию Как реализовать данный функционал в JS

Доброго времени, помогите (направьте), как решить данную задачу с помощью js. В js ещё совсем зелёный, поэтому хотелось бы услышать подробный способ решения данного материала.
С чего начать?
Как реализовать стрелку?
Задачу прикрепляю в картинках.
Изображения
Тип файла: jpg 1.jpg (67.9 Кб, 156 просмотров)
Тип файла: jpg 2.jpg (66.9 Кб, 131 просмотров)
Тип файла: jpg 3.jpg (51.7 Кб, 155 просмотров)
Тип файла: jpg 4.jpg (47.3 Кб, 156 просмотров)
Тип файла: jpg 5.jpg (50.4 Кб, 163 просмотров)
Васелек вне форума Ответить с цитированием
Старый 01.08.2017, 22:57   #2
Васелек
 
Регистрация: 01.08.2017
Сообщений: 3
По умолчанию

Может кто подскажет, что именно нужно почитать или посмотреть по данной теме?
Васелек вне форума Ответить с цитированием
Старый 02.08.2017, 00:58   #3
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от Васелек Посмотреть сообщение
С чего начать?
С логики приложения, пользовательский интерфейс тут (как и всегда) вторичен
Цитата:
Сообщение от Васелек Посмотреть сообщение
Как реализовать стрелку?
SVG, canvas или CSS — не важно. Стрелка простенькая, я бы на CSS нарисовал.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 02.08.2017, 07:59   #4
Васелек
 
Регистрация: 01.08.2017
Сообщений: 3
По умолчанию

Накидал простенькую 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. Кто что думает?
Васелек вне форума Ответить с цитированием
Старый 03.08.2017, 12:03   #5
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

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


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


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