자바스크립트로 변환 온도 쓰기-프런트엔드 Q&A-php.cn

자바스크립트로 변환 온도 쓰기

PHPz

풀어 주다： 2023-05-26 17:21:09

원래의

1045명이 탐색했습니다.

일상생활에서 섭씨를 화씨로 변환해야 하는 경우가 많습니다. 이 기능은 JavaScript를 사용하여 코드를 작성하면 쉽게 구현할 수 있습니다. 이 기사에서는 JavaScript를 사용하여 간단한 온도 변환 프로그램을 작성하는 방법을 살펴보겠습니다.

1단계: HTML 페이지

먼저 사용자가 온도 값을 입력하여 변환을 수행할 수 있도록 HTML 페이지를 만들어야 합니다. 다음은 HTML 코드입니다.

<!DOCTYPE html>
<html>
<head>
    <title>温度转换器</title>
</head>
<body>
    <h1>温度转换器</h1>
    <form>
        <label>输入要转换的温度：</label>
        <input type="text" id="temperature">
        <br><br>
        <input type="radio" name="converter" value="celsius">摄氏度转华氏度
        <input type="radio" name="converter" value="fahrenheit">华氏度转摄氏度
        <br><br>
        <input type="button" value="转换" onclick="convertTemperature()">
    </form>
    <br>
    <p id="result"></p>
</body>
</html>

로그인 후 복사

위 코드에는 제목과 입력 상자, 라디오 버튼 및 "변환" 버튼을 포함한 양식이 포함됩니다. 또한 변환된 결과를 표시하기 위해 페이지 아래에 단락을 추가했습니다.

2단계: JavaScript 함수

다음으로 사용자가 "변환" 버튼을 클릭할 때 온도 변환을 수행하는 JavaScript 함수를 작성해야 합니다. 다음은 JavaScript 코드입니다.

function convertTemperature() {
    var input = document.getElementById("temperature");
    var temperature = input.value;
    var radio = document.getElementsByName("converter");
    var result = document.getElementById("result");

    if (radio[0].checked) {
        var fahrenheit = (temperature * 9 / 5) + 32;
        result.innerHTML = temperature + " 摄氏度 = " + fahrenheit + " 华氏度";
    } else {
        var celsius = (temperature - 32) * 5 / 9;
        result.innerHTML = temperature + " 华氏度 = " + celsius + " 摄氏度";
    }
}

로그인 후 복사

위 코드는 getElementById, getElementsByName 및 innerHTML 함수를 사용하여 사용자가 입력한 온도 값을 얻고, 사용자가 선택한 변환 유형을 가져와 변환 결과를 표시합니다.

사용자가 "섭씨를 화씨로"를 선택하면 프로그램은 데이터 유형을 숫자 유형으로 대체하고 이를 변수 온도에 할당한 다음 입력 값에 9/5를 곱하고 32를 더하여 해당 화씨를 계산하여 변환을 출력합니다. 결과.

반대로, 사용자가 "화씨에서 섭씨로"를 선택하면 프로그램은 데이터 유형도 숫자 유형으로 대체하고 이를 변수 온도에 할당한 다음 거기에서 32를 빼고 5/9를 곱하여 계산합니다. 해당 섭씨를 입력하고 변환 결과도 출력합니다.

3단계: 프로그램 실행

마지막으로 브라우저에서 프로그램을 실행하면 간단한 온도 변환기가 표시됩니다. 온도 변환 결과를 본 후 섭씨를 화씨로, 화씨를 섭씨로 쉽게 변환할 수 있습니다. 온도 값, 변환 유형 및 출력 결과를 얻고 처리하려면 JavaScript 코드가 정확하고 DOM(문서 개체 모델)을 따르는지 확인하세요.

요약:

위의 간단한 단계를 통해 매우 실용적인 JavaScript 온도 변환기를 작성할 수 있습니다. 이 프로그램은 간단하지만 확장성이 뛰어나고 장치 선택 추가, 더 많은 온도 체제 지원 등과 같은 다양한 요구 사항을 충족하기 위해 더 많은 기능을 구현할 수 있습니다. 이는 또한 범용 스크립팅 언어로서 JavaScript의 강력한 유용성을 보여줍니다.

위 내용은 자바스크립트로 변환 온도 쓰기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!