Maison > Article > interface Web > Écrire la température de conversion en javascript

Écrire la température de conversion en javascript

PHPzoriginal: 2023-05-26 17:21:091013parcourir

Dans la vie quotidienne, nous avons souvent besoin de convertir les degrés Celsius en Fahrenheit. Cette fonctionnalité peut être facilement obtenue en écrivant du code à l'aide de JavaScript. Dans cet article, nous allons explorer comment écrire un programme simple de conversion de température à l'aide de JavaScript.

Étape 1 : Page HTML

Tout d'abord, nous devons créer une page HTML afin que les utilisateurs puissent effectuer des conversions en saisissant des valeurs de température. Voici le code 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>

Le code ci-dessus comprend : un titre et un formulaire, comprenant une zone de saisie, un bouton radio et un bouton "Convertir". Nous avons également ajouté un paragraphe sous la page pour afficher les résultats convertis.

Étape 2 : Fonction JavaScript

Ensuite, nous devons écrire une fonction JavaScript pour effectuer la conversion de la température lorsque l'utilisateur clique sur le bouton "Convertir". Voici le code 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 + " 摄氏度";
    }
}

Le code ci-dessus utilise les fonctions getElementById, getElementsByName et innerHTML pour obtenir la valeur de température saisie par l'utilisateur, obtenir le type de conversion sélectionné par l'utilisateur et afficher le résultat de la conversion. .

Si l'utilisateur sélectionne "Celsius en Fahrenheit", le programme remplacera le type de données Nombre par le type de valeur et l'attribuera à la température variable, puis multipliera la valeur d'entrée par 9/5 et ajoutera 32 pour calculer le degré Fahrenheit correspondant, et enfin afficher le résultat de la conversion.

D'un autre côté, si l'utilisateur sélectionne "Fahrenheit en Celsius", le programme remplacera également le type de données par le type Nombre et l'attribuera à la température variable, puis en soustraira 32 et multipliera il par 5/9, Ainsi, les degrés Celsius correspondants sont calculés et le résultat de la conversion est également affiché.

Troisième étape : Exécutez le programme

Enfin, exécutez le programme dans votre navigateur et vous devriez voir un simple convertisseur de température, facilement après avoir consulté les résultats de la conversion de température. Convertissez Celsius en Fahrenheit ou Fahrenheit en Celsius. Assurez-vous que le code JavaScript est correct et suit le modèle d'objet de document (DOM) pour obtenir et traiter les valeurs de température, les types de conversion et les résultats de sortie.

Résumé :

Grâce aux étapes simples ci-dessus, nous pouvons écrire un convertisseur de température JavaScript très pratique. Bien que ce programme soit simple, il est hautement extensible et peut implémenter plus de fonctions pour répondre à vos différents besoins, comme l'ajout de sélections d'unités, la prise en charge de plus de régimes de température, etc. Cela illustre également la puissante utilité de JavaScript en tant que langage de script à usage général.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Convertir une chaîne javascript en expression régulièreArticle suivant：Convertir une chaîne javascript en expression régulière

Articles Liés

Voir plus