Перевод из цельсия в кельвины в HTML

@PapaSushi · Регистрация: 25.12.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте,помогите создать веб-страницу с двумя текстовыми полями, шкалой Цельсия и Фаренгейта. Между ними есть кнопка конвертирования, которая преобразует Цельсию в Фаренгейт и Фаренгейт в цельсий,и пожалуйста укажите описание то что вы делаете и как работает если не сложно))

@Roman_Igorevich · 21.01.2019, 06:40

Здравствуйте. На чистом HTML и CSS к сожалению сделать не получится. Потребуется JavaScript и серверный язык программирования, например php. Если еще актуально, то могу написать скрипт на php.

@PapaSushi · 21.01.2019, 16:18 **[ТС]**

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

@amr-now · 21.01.2019, 20:39

Если надо извратиться одной кнопкой, значит надо...

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    Для начала конвертирования поле результата должно быть пустым!
    <div style="width: 200px">
        C: <input id="cc" />
        <div style="text-align: center; margin: 5px;"><input type="button" id="convert" value="Конвертировать"></div>
        F: <input id="ff" />
    </div>
    <script>
        document.getElementById("convert").onclick = converter;
        function converter() {
            let c = document.getElementById("cc"),
                f = document.getElementById("ff"),
                cvalue = c.value.trim(),
                fvalue = f.value.trim();
 
            if (cvalue && (!fvalue))
                f.value = CtoF(cvalue);
            else if ((!cvalue) && fvalue)
                c.value = FtoC(fvalue);
            else
                alert("Поле результата должно быть пустым!");
        }
 
        let CtoF = c => c * 9 / 5 + 32;
        let FtoC = f => (f - 32) * 5 / 9;
    </script>
</body>
</html>

@azariah · 21.01.2019, 22:53

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href='style.css' rel='stylesheet' type='text/css'>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="direction">
           <span id='direction-span' style="text-align: center">C->F</span>
            <br>
            <input type="button" id='btn-direction' value="Change direction">
        </div>
        <div>
            <input type="number" id="input-value" value="5">
            <input type="number" id="input-result" disabled>
            <br>
            <input type="button" id="btn-convert" value="Convert">
        </div>
    </div>
<script src="main.js"></script>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// Переменная направления
let directionFrom='C';
 
 
// Добавляем событие по клику, для кнопки #btn-direction.
// В этом событии мы меняем переменную с направлением перевода на другое.
// Затем, на основе этой переменной меняем в значение строки #direction-span ,чтобы отобразить текущее направление
document.getElementById('btn-direction').addEventListener('click',function () {
    if (directionFrom === 'C'){
        document.getElementById('direction-span').textContent = 'F->C';
        directionFrom = 'F';
    } else {
        document.getElementById('direction-span').textContent = 'C->F';
        directionFrom = 'C';
    }
});
 
 
// Добавляем событие по  для кнопки #btn-convert.
//В этом событии мы проверям, что поле #input-value  не пустое, вызываем функцию конвертации
// и выводим результат в #input-result
document.getElementById('btn-convert').addEventListener('click', function () {
   let value =  document.getElementById('input-value').value;
   if (value !== ''){
    document.getElementById('input-result').value= convert(value);
   }
 
});
 
//Функция конвертации
function convert(value) {
    if (directionFrom === 'C'){
        return 1.8*value + 32;
    } else {
        return (value - 32) / 1.8;
    }
 
}

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.container{
    top: 45%;
    left: 45%;
    position: absolute;
    text-align: center;
    background-color: aliceblue;
}
.direction{
    margin-bottom: 10px;
}
#btn-convert{
    margin-top: 10px;
}

@Mr_Sergo · 22.01.2019, 02:07

Сообщение от PapaSushi

есть кнопка конвертирования

Кнопки в топку

-> https://codepen.io/Mr_Sergo/pe... itors=1010

HTML5
1
2
3
<input type="text" class="celsius" placeholder="Введите Цельсии">
<input type="text" class="fahrenheit" placeholder="Введите Фаренгейты">
<div class="result">0</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
let celsius = document.querySelector('.celsius'),
    fahrenheit = document.querySelector('.fahrenheit'),
    result = document.querySelector('.result');
 
celsius.addEventListener('input',() => {
    fahrenheit.value = '';
    isNaN(celsius.value) ? celsius.value = celsius.value.replace(/[^\d]/,'') : result.innerHTML = celsius.value * 9 / 5 + 32;
});
 
fahrenheit.addEventListener('input',() => {
    celsius.value = '';
    isNaN(fahrenheit.value) ? fahrenheit.value = fahrenheit.value.replace(/[^\d]/,'') : result.innerHTML = (fahrenheit.value - 32) * 5 / 9;
});

Добавлено через 1 минуту
PapaSushi, ни че не хочу комментировать...

@Mr_Sergo · 22.01.2019, 18:38

Вот так наверное короче и вам понятней будет...

HTML5
1
2
3
<input type="number" class="celsius" placeholder="Цельсии">
<input type="number" class="fahrenheit" placeholder="Фаренгейты">
<div class="result">0</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
let celsius = document.querySelector('.celsius'),
    fahrenheit = document.querySelector('.fahrenheit'),
    result = document.querySelector('.result');
 
celsius.addEventListener('input',() => {
    fahrenheit.value = '';
    result.innerHTML = celsius.value * 9 / 5 + 32;
});
 
fahrenheit.addEventListener('input',() => {
    celsius.value = '';
    result.innerHTML = (fahrenheit.value - 32) * 5 / 9;
});

Добавлено через 1 час 5 минут
Если принципиально нужна кнопка для подсчета -> https://codepen.io/Mr_Sergo/pe... itors=1010

HTML5
1
2
3
4
<input type="number" class="celsius" placeholder="Цельсии">
<input type="number" class="fahrenheit" placeholder="Фаренгейты"><br><br>
<input type="button" class="button" value="Перевести в Фаренгейты"><br><br>
<span class="result">0</span>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let celsius = document.querySelector('.celsius'),
    fahrenheit = document.querySelector('.fahrenheit'),
    button = document.querySelector('.button'),
    result = document.querySelector('.result');
 
celsius.addEventListener('input',() => {
    button.value = 'Перевести в Цельсии'; fahrenheit.value = '';
});
 
fahrenheit.addEventListener('input',() => {
    button.value = 'Перевести в Фаренгейты'; celsius.value = '';
});
 
button.addEventListener('click',() => {
    fahrenheit.value == '' ? result.innerHTML = celsius.value * 9 / 5 + 32 : result.innerHTML = (fahrenheit.value - 32) * 5 / 9;
});

@PapaSushi · 25.01.2019, 17:37 **[ТС]**

HTML5
1
2
3
<input type="number" class="celsius" placeholder="Цельсии">
<input type="number" class="fahrenheit" placeholder="Фаренгейты">
<div class="result">0</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
let celsius = document.querySelector('.celsius'),
    fahrenheit = document.querySelector('.fahrenheit'),
    result = document.querySelector('.result');
 
celsius.addEventListener('input',() => {
    fahrenheit.value = '';
    result.innerHTML = celsius.value * 9 / 5 + 32;
});
 
fahrenheit.addEventListener('input',() => {
    celsius.value = '';
    result.innerHTML = (fahrenheit.value - 32) * 5 / 9;
});

Можете пояснения указать чтобы я мог презентовать это как будто я делал��))

@Mr_Sergo · 26.01.2019, 02:57

Сообщение от PapaSushi

пояснения указать

ну уговорили

HTML5
1
2
3
4
5
6
7
8
9
10
<input type="number" class="celsius" placeholder="Цельсии">
<input type="number" class="fahrenheit" placeholder="Фаренгейты">
<div class="result">0</div>
 
 
<!--
1   строка    -   создаем текстовое поле с типом для ввода данных "только цифры" с пояснением "Цельсии"
2   строка    -   создаем текстовое поле с типом для ввода данных "только цифры" с пояснением "Фаренгейты"
2   строка    -   создаем див для вывода в него результата расчета по формулам
-->

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
let celsius = document.querySelector('.celsius'),
    fahrenheit = document.querySelector('.fahrenheit'),
    result = document.querySelector('.result');
 
celsius.addEventListener('input',() => {
    fahrenheit.value = '';
    result.innerHTML = celsius.value * 9 / 5 + 32;
});
 
fahrenheit.addEventListener('input',() => {
    celsius.value = '';
    result.innerHTML = (fahrenheit.value - 32) * 5 / 9;
});
 
 
/*
 
Событие 'input' происходит тогда когда в инпуте происходят
какие-то изменения: ввод с клавиатуры, вставка текста из буфера обмена.
Подробнее -> https://learn.javascript.ru/events-change#sobytie-input
________________________________________________________________________
 
1   строка    -   создаем ссылку на элемент и заносим ее в переменную
2   строка    -   по-аналогии
3   строка    -   по-аналогии
5   строка    -   ставим слушателя (мониторинг) для события 'input' 
                на элемент с классом 'celsius' через раннее созданную
                ссылку на него в строке № 1
6   строка    -   при вводе, чего-либо с клавиатуры в этот инпут, очищаем его содержимое и
7   строка    -   выводим результат подсчета по формуле в див с классом 'result'
10  строка    -   по-аналогии из строки № 5
11  строка    -   по-аналогии из строки № 6
12  строка    -   по-аналогии из строки № 7
 
*/

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@PapaSushi 0 / 0 / 0 Регистрация: 25.12.2016 Сообщений: 3

	Перевод из цельсия в кельвины в HTML 20.01.2019, 20:13. Показов 6468. Ответов 8 Метки css, html, java (Все метки) Здравствуйте,помогите создать веб-страницу с двумя текстовыми полями, шкалой Цельсия и Фаренгейта. Между ними есть кнопка конвертирования, которая преобразует Цельсию в Фаренгейт и Фаренгейт в цельсий,и пожалуйста укажите описание то что вы делаете и как работает если не сложно)) 0

@Roman_Igorevich 0 / 0 / 0 Регистрация: 02.08.2018 Сообщений: 26
	21.01.2019, 06:40
	Здравствуйте. На чистом HTML и CSS к сожалению сделать не получится. Потребуется JavaScript и серверный язык программирования, например php. Если еще актуально, то могу написать скрипт на php. 0

@PapaSushi 0 / 0 / 0 Регистрация: 25.12.2016 Сообщений: 3
	21.01.2019, 16:18 [ТС]
	еще актуально,можете пожалуйста указать пояснения того что вы делаете и как можно проще))спасибо! 0

Перевод из цельсия в кельвины в HTML

Решение