Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

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

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

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

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

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

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

Накидал простенькую 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, 13:03   #5
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,655
Репутация: 1993
По умолчанию

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

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

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


16:45.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru