CC ⇔ HP 변환기-JS 튜토리얼-php.cn

CC ⇔ HP 변환기

Patricia Arquette

풀어 주다： 2025-01-13 16:26:43

원래의

445명이 탐색했습니다.

CC ↔ HP Converter

CC ⇔ HP 변환기

이 글에서는 CC ← HP(입방센티미터 ← 마력) 변환기의 코드를 분석하겠습니다. 이 간단하면서도 실용적인 도구는 사용자가 차량과 엔진의 두 가지 필수 장치 사이를 변환하는 데 도움이 됩니다. 전체 코드를 살펴보고, 각 부분을 자세히 설명하고, CC ← HP 변환의 논리를 살펴보겠습니다. 개발자라면 코드를 개선할 수 있는 논리, 구조, 기회를 높이 평가할 것입니다!

그러나 시작하기 전에 아래 링크를 클릭하고 직접 계산기를 사용해 코드를 테스트해 보세요. ?

? 여기서 코드를 테스트해보세요! ?⚡ ?

CC ← HP 변환기의 주요 특징:

변환 계수: CC와 HP의 관계를 결정하는 사용자 정의 가능한 요소입니다.
변환 유형: CC에서 HP로 또는 그 반대로 전환하는 기능.
대화형 입력: 선택한 변환 유형에 따라 표시되는 두 개의 입력 필드
오류 처리: 사용자에게 유효한 값을 입력하도록 안내하는 메시지

코드의 상세한 분석

1. HTML 구조:

코드의 HTML 부분은 CC ← HP Converter 인터페이스의 구조를 정의합니다.

    <div>

<p>- <strong>Conversion Factor Input:</strong> This input allows users to specify the conversion factor, which defaults to 15 CC = 1 HP.</p>

<p>- <strong>Conversion Type Selector:</strong> This dropdown lets users switch between CC to HP and HP to CC conversions.</p>

<p>- <strong>CC and HP Input Fields:</strong> Depending on the selection in the dropdown, the relevant input field (either for CC or HP) will be displayed for user input.</p>

<p>- <strong>Convert Button:</strong> The button that triggers the conversion when clicked.</p>

<p>- <strong>Result Display:</strong> A place to show the result of the conversion.</p>

<p>- <strong>Error Message:</strong> This is where error messages will be displayed if the user enters invalid data.</p>

<h3>
  
  
  2. CSS Styling:
</h3>

<p>The styles provide a clean and user-friendly design for the converter. Here's the key CSS used for the layout:</p>

<pre class="brush:php;toolbar:false">    .cc-hp-body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 20px;
      background-color: #f4f4f4;
    }

    .cc-hp-calculator-container {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 10px;
      background: #fff;
    }

로그인 후 복사

- 일반 스타일: 전체 페이지는 중앙에 텍스트가 있는 밝은 배경과 깔끔하고 미니멀한 디자인을 사용합니다.

- 계산기 컨테이너: 컨테이너는 400px의 고정 너비로 중앙에 배치되며 간격을 위한 패딩을 포함합니다.

- 버튼 및 입력: 버튼에 호버 효과를 적용하여 크고 쉽게 상호 작용할 수 있도록 스타일이 지정되었습니다.

3. 자바스크립트 기능:

여기서 진정한 마법이 일어납니다. JavaScript 함수는 사용자 입력을 처리하고, 변환을 계산하고, 결과를 표시합니다.

토글입력 기능:

이 기능은 선택한 변환 유형(CC에서 HP로 또는 HP에서 CC로)에 따라 적절한 입력 필드를 표시하거나 숨깁니다.

    function toggleInputs() {
      const conversionType = document.getElementById("conversion-type").value;
      const ccInputGroup = document.getElementById("cc-input-group");
      const hpInputGroup = document.getElementById("hp-input-group");

      if (conversionType === "ccToHp") {
        ccInputGroup.style.display = "block";
        hpInputGroup.style.display = "none";
      } else {
        ccInputGroup.style.display = "none";
        hpInputGroup.style.display = "block";
      }
    }

로그인 후 복사

- 로직: 사용자가 "CC to HP"를 선택하면 CC 입력 필드가 표시됩니다. "HP to CC"를 선택하면 대신 HP 입력 필드가 나타납니다.

변환 기능:

입력값과 변환계수를 기준으로 변환을 수행하는 함수입니다.

    function convert() {
      const conversionFactor = parseFloat(document.getElementById("conversion-factor").value);
      const conversionType = document.getElementById("conversion-type").value;
      const errorMessage = document.getElementById("error-message");
      const resultDisplay = document.getElementById("result-display");

      // Clear previous error and result
      errorMessage.textContent = "";
      resultDisplay.textContent = "";

      if (conversionType === "ccToHp") {
        const ccValue = parseFloat(document.getElementById("cc-input").value);
        if (isNaN(ccValue) || ccValue <= 0) {
          errorMessage.textContent = "Please enter a valid CC value greater than 0.";
          return;
        }
        const hpValue = ccValue / conversionFactor;
        resultDisplay.textContent = `${ccValue} CC is approximately ${hpValue.toFixed(2)} HP.`;
      } else if (conversionType === "hpToCc") {
        const hpValue = parseFloat(document.getElementById("hp-input").value);
        if (isNaN(hpValue) || hpValue <= 0) {
          errorMessage.textContent = "Please enter a valid HP value greater than 0.";
          return;
        }
        const ccValue = hpValue * conversionFactor;
        resultDisplay.textContent = `${hpValue} HP is approximately ${ccValue.toFixed(2)} CC.`;
      }
    }

로그인 후 복사

- 논리: 먼저 변환 계수와 선택한 변환 유형을 검색합니다. 그런 다음 사용자가 유효한 값을 입력했는지 확인하고 공식(CC/conversionFactor for CC to HP, HP * ConversionFactor for HP to CC)을 기반으로 결과를 계산합니다.