javascript — любой способ сделать «в реальном времени» конвертация единиц в веб-приложении

Question

javascript — любой способ сделать «в реальном времени» конвертация единиц в веб-приложении

Я хочу создать сайт, который позволяет пользователю конвертировать Hz в bpm (обратите внимание, однако, что мой вопрос касается всех видов преобразования единиц). Я использую PHP и размещаю свой сайт на Apache.

Итак, мне было интересно, можно ли «привязать» поле ввода к элементу HTML, как мы это делаем в разработке WPF, где вы можете привязать область ввода к элементу WPF и применить какое-то преобразование данных, чтобы, если пользователь типы 12 bpmсвязанный элемент будет отображаться автоматически и сразу 0.2 Hz, Если пользователь затем добавляет «0», так 120 bpm будет автоматически и сразу преобразован в 2 Hz,

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

Как это достигается? Есть ли способ сделать это с помощью PHP? Я знаю об AJAX, но я действительно предпочел бы избегать использования Javascript для хранения моих математических функций. Поправьте меня, если я ошибаюсь, но я думаю, что это можно сделать с помощью Node.js? Должен ли я рассмотреть возможность перехода на узел?

-2

javascript php real-time unit-conversion

Решение

По вопросам рекламы [email protected]

Accepted Answer

Имея только DOM и JavaScript, вы можете использовать input событие в текстовом поле для получения немедленного обратного вызова, когда его значение изменяется в результате действий пользователя:

document.querySelector("selector-for-the-field").addEventListener("input", function() {
// Code here to do and display conversion
}, false);

Пример (по Цельсию / по Цельсию в Фаренгейт):

var f = document.getElementById("f");
document.querySelector("#c").addEventListener("input", function() {
var value = +this.value;
if (!isNaN(value)) {
value = (value * 9) / 5 + 32;
f.innerHTML = value;
}
}, false);

<div>
<label>
Enter centigrade:
<input type="text" id="c">
</label>
</div>
<div>
Fahrenheit: <span id="f"></span>
</div>

2

Другие решения

Я приведу пример преобразования «дюймов в см» в реальном времени.

Обратите внимание, чтобы этот пример работал, вам нужно будет включить jQuery.

HTML:

<div>
<label>Inches</label>
<input type="text" id="user_input" />
</div>
<div>
<label>Centimeters</label>
<input type="text" id="result" readonly />
</div>

JAVASCRIPT:

$(document).ready(function(){
$('#user_input').on('propertychange input keyup', function(){
var thisVal = $(this).val();
$('#result').val(thisVal * 2.54);
});
});

Скрипки: https://jsfiddle.net/captain_theo/t10z01cm/

Вы можете расширить это для любого типа конверсии.

Проверьте мою обновленную скрипку, которая включает в себя Гц до bpm также:

https://jsfiddle.net/captain_theo/t10z01cm/1/

Ура, Тео

0

Источник