Калькулятор: "Сантиметры - Дюймы - Пиксели"

vla · 27.12.2011

Калькулятор на JavaScript

Сантиметры - Дюймы - Пиксели"

Здравствуйте! Продолжаю делать онлайн калькулятор по переводу вышеуказанных величин. Точнее его модернизирую.

Столкнулся с рядом проблем. Некоторые получилось решить самому, к некоторым даже не знаю как подступиться (тк я недавно познакомился с JS).

Делать черновой вариант калькулятора мне помогали советами в теме: Обработка формы form (input) событием onchange. Еще раз всем учавствующим мое спасибо! Там пользователь [member=lekzd] посоветовал его доработать!

Получилось сделать самому:
1. Округлить значения до целого с помощью:
px = Math.round(px);
2. Округлить до определенного знака после запятой. Полистав интернет, нашел нужный способ и упростил для своей задачи. Получилось примерно так:
inch = Math.round(inch*10000)/10000;
3. Визуально представить пропорции листа. Передавая линейные значения блоку DIV наглядно видно как меняются его размеры при вводе размеров. Но это надо еще доделать - главный минус - вводишь большое значение и нарисованный лист (DIV) становится очень большим. Пока схема такова:
document.getElementById("list").style.width = cm + "px";
4. Разместил стандартные форматы бумаги (A4, A3, A2, Letter...). При нажатии на формат в поле с сантиметрами забиваются значения длины и ширины формата. Догадываюсь, что этот пункт реализовал не самым умным способом, но пока оставлю как есть - работает и ладно...

Не знаю как быть:

как контролировать значения введенные пользователем?

1. Как при вводе пользователем значений заменять "запятую" (набранную им ошибочно) как "точку". Будет удобно, если функции, использованные для полей ввода (INPUT) будут воспринимать ЗАПЯТУЮ КАК ТОЧКУ (в смысле математический символ).
2. Не давать пользователю вводить в форму буквы и символы (кроме "точки" и "запятой"). На данный момент программа выводит некрасиво "NaN"

По ходу дела в этой теме буду задавать вопросы и демонстрировать решения!

Сейчас ОНЛАЙН-КАЛЬКУЛЯТОР "Сантиметры-Дюймы-Пиксели" выглядет так:

Калькулятор: Сантиметры и Пиксели - HTML

Код - JavaScript

Стили - CSS

Постарался убрать всё лишнее, скрипт выделил в отдельный файл. стили примененные к калькулятору тоже

medwoodu · 27.12.2011

ООО, вы хотите сантиметры в пиксели переводить?

http://ithappens.ru/story/1612

про символы и запятые читайте "регулярные выражения в js" и "валидация с помощью js"

я бы на вашем месте таки посмотрел в сторону jquery , это как день потерять, потом за пол часа долететь.

Aristotel · 27.12.2011

в обоих случаях вам помогут регулярные выражения.
http://javascript.ru...ular-expression

сказать честно я не плохо знаю в пхп регулярные выражения а вот в js я не очень так что помочь не смогу.

вам бы еще ограничения поставить чтобы за рамки серого окошка не вылезало.

vla · 27.12.2011

Medwoodu сказал(а):
ООО, вы хотите сантиметры в пиксели переводить?

Ну да, это звучит смешно, согласен )))
Это условности конечно... Просто хочу избавится от вопосов:
У меня есть картинка JPEG 1200X1200... На какой формат ее можно распечатать?
Или наоборот... Я хочу сам сделать маме плакат на формат А1, каких размеров в пикселях он должен быть?
ИТД

Смысл калькулятора - отвечать на эти несложные вопросы...
И заодно мне потренироваться в JS

czp · 27.12.2011

bb = 'tronpxtron';
b = bb.replace("px","AAAA")
alert(b)//только это писать не надо для теста

замена точки

на текст, а точнее цифры

if (form.input1.value.replace(/^d+$/,'').length > 0)

как то так бы сделал

Aristotel · 27.12.2011

идея классная, но по моему, многое еще зависит от настройки принтера а также настройки программы через которую печатают картинку.

medwoodu · 27.12.2011

vla сказал(а):
Или наоборот... Я хочу сам сделать маме плакат на формат А1, каких размеров в пикселях он должен быть?

делайте в векторе

но так задумку понял, тоже тема. На jquery легко определяются размеры экрана, плюс все операции кроссбраузерно, плюс есть готовые плагины валидации форм, так что думайте. что искать -я вам кинул

ScripT · 27.12.2011

Маладец vla =) Надо и мне взяться за javascript, ато пока-что так знаю, на уровне подключить готовый скрипт, вывести некое сообщение, минималная работа с dom. Времени все никак нехватает =(

vla · 27.12.2011

Aristotel сказал(а):
многое еще зависит от настройки принтера

Много от чего зависит... И, как ни странно - от настроек - далеко не в первую очередь (ну, если черновое качество не ставить)
- от бумаги - значимый фактор
- от расходников (краски, головы, барабаны...)

Согласен, калькулятор дает примерное представление пропорций САНТИМЕТРЫ-ПИКСЕЛИ, в первую очередь для тех, кто вообще не вдупляет как так... Как я в ЯваСкрипт ))))

А так, очень рад, что тебе [member=Aristotel], идея понравилась. Приятно!

ScripT сказал(а):
Надо и мне взяться за javascript

[member=ScripT], да идеи появляются, когда время нет! пропорция строго обратная...
Просто так тренироваться не интересно, делать велосипед тоже не ахти... Думаю ты согласен!
Могу предложить идею,того же уровня сложности, на нейтральную тему!

Medwoodu сказал(а):
делайте в векторе

К сожалению, попадаются и такие, которым я так скажу, а в результате придется обяснять что такое векторное изображение

Завтра изучу все посоветованные ссылки и код, который посоветовал [member=czp]! Покажу результат... Благодарю за отзывы и советы все откликнувшихся!

ScripT · 27.12.2011

Согласен) спасибо конечно vla, но правда, времени не хватает. Если я сейчас отдыхаю 2-3 часа в сутки, то если еще и на js подсяду - это будет труба(

vla · 28.12.2011

Подходят к логическому концу вычислительные задачи!

Я специально всё исправил в строке "ширина" и оставил как было в строке "высота".
На данный момент вы можете посмотреть разницу - как было и как стало...

"Запятую" и близлежащие символы заменил на "точку":

Код:

function f_tochka(input){
var cont = input.value;
cont = cont.replace(",",".");
cont = cont.replace("б",".");
cont = cont.replace("ю",".");
cont = cont.replace("?",".");
cont = cont.replace("/",".");
input.value = cont;}

Возможно, синтаксис replace неправильно понял... Это можно сделать проще?

Проверку символов оставил на будующее, тк [member=Medwoodu] велел изучать jquery. Так и поступлю.

Если есть советы/пожелания по поводу работы калькулятора, внимательно слушаю и всеми силами стараюсь!

Далее перехожу к визуальной части. Правда я еще не решил - как оно должно быть.
Поэтому не буду торопиться спрашивать как сделать )

Aristotel · 28.12.2011

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

vla · 28.12.2011

[member=Aristotel], честно говоря не уверен, что это будет удобне чем сейчас, тк в отличае от калькулятора полей ввода - аж шесть штук!
"Калькулятор" - ну, это я так назвал. А так не знаю что это

В виде кнопочек - сделаю стандартные форматы, когда буду заниматься оформлением!

lekzd · 28.12.2011

vla сказал(а):
Возможно, синтаксис replace неправильно понял... Это можно сделать проще?

Учите регулярные выражения

Код:

cont = cont.replace(/[,бю?]/,".");

Aristotel · 28.12.2011

lekzd сказал(а):
vla сказал(а):

Возможно, синтаксис replace неправильно понял... Это можно сделать проще?

Нажмите, чтобы раскрыть...

Учите регулярные выражения

Код:

cont = cont.replace(/[,бю?]/,".");

вот таким образом я бы заменил все буквы и знаки на пробел или пустоту если это возможна. в регулярных выражениях есть короткие обозначения групп знаков, цифр, символов.

vla · 28.12.2011

lekzd сказал(а):
Учите регулярные выражения

Хорошо, у меня в книге есть об этом, просто не дошел еще, а руки чешутся...

Aristotel сказал(а):
в регулярных выражениях есть короткие обозначения групп знаков, цифр, символов

Ну да, об этом можн было догадаться... Переделаю!

Калькулятор: "Сантиметры - Дюймы - Пиксели"

vla

Well-Known Member

medwoodu

Злобный модер

Aristotel

Well-Known Member

vla

Well-Known Member

czp

czp

Aristotel

Well-Known Member

medwoodu

Злобный модер

ScripT

Fighter

vla

Well-Known Member

ScripT

Fighter

vla

Well-Known Member

Aristotel

Well-Known Member

vla

Well-Known Member

lekzd

parse error: parse error, unexpected T_STRING...

Aristotel

Well-Known Member

vla

Well-Known Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей