Maison >interface Web >Questions et réponses frontales >Calcul de la valeur d'entrée JavaScript

Calcul de la valeur d'entrée JavaScript

WBOYoriginal: 2023-05-27 11:40:071221parcourir

JavaScript est un langage de programmation Web couramment utilisé qui peut être utilisé pour obtenir divers effets interactifs. Cet article explique comment utiliser JavaScript pour saisir le rayon d'un cercle, puis calculer et afficher son aire et sa circonférence.

1. Entrez le rayon

La saisie du rayon est la première étape pour calculer la circonférence et l'aire d'un cercle. Ceci peut être réalisé avec une simple page HTML. Tout d'abord, nous devons créer une zone de texte et un bouton dans un fichier HTML pour saisir le rayon et lancer le calcul. Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>求圆面积和周长</title>
</head>
<body>
    <p>请输入圆的半径：</p>
    <input type="number" id="radius"></input>
    <button onclick="calculate()">计算</button>
    <p id="area"></p>
    <p id="circumference"></p>
    <script src="circle.js"></script>
</body>
</html>

Cette page HTML contient une zone de texte et un bouton de calcul, et contient également deux espaces vides. paragraphes Utilisé pour afficher les résultats. Parmi eux, l'ID de la zone de texte est « rayon », qui est utilisé pour obtenir la valeur d'entrée du rayon. L'événement onclick du bouton est lié à une fonction JavaScript "calculate()", qui est utilisée pour calculer la circonférence et l'aire d'un cercle. Les résultats seront affichés en deux paragraphes, représentés par des balises avec respectivement les identifiants « zone » et « circonférence ».

2. Calculer la surface et le périmètre

Dans le fichier HTML, nous avons introduit un fichier JavaScript nommé "circle.js". Dans ce fichier, nous écrirons des fonctions pour calculer l'aire et la circonférence d'un cercle. Le code est le suivant :

function calculate() {
    var radius = document.getElementById("radius").value;

    // 计算面积
    var area = Math.PI * Math.pow(radius, 2);
    document.getElementById("area").innerHTML = "面积: " + area + "平方厘米";

    // 计算周长
    var circumference = 2 * Math.PI * radius;
    document.getElementById("circumference").innerHTML = "周长: " + circumference + "厘米";
}

Cette fonction comporte trois étapes principales. Premièrement, il utilise les méthodes DOM de JavaScript pour obtenir la valeur de la zone de texte, qui correspond au rayon du cercle saisi par l'utilisateur. Il calcule ensuite l'aire du cercle à l'aide de la constante PI et de la fonction pow() de la bibliothèque Math. Enfin, il calcule la circonférence du cercle à l'aide de la bibliothèque Math et du rayon saisi, et affiche les résultats dans deux paragraphes dans une page HTML. Dans cet exemple, nous générons la zone et le périmètre sous forme de chaînes, mais vous pouvez les formater selon vos besoins.

3. Tests et expansion

Nous pouvons maintenant ouvrir le fichier HTML dans le navigateur et commencer les tests. Entrez une valeur dans la zone de texte, puis cliquez sur le bouton "Calculer" et la page affichera l'aire et la circonférence du cercle. Comme indiqué ci-dessous :

Calcul de la valeur dentrée JavaScript

Vous pouvez essayer de modifier les valeurs d'entrée et de cliquer plusieurs fois sur le bouton "Calculer" pour tester l'exactitude de la fonction de calcul. De plus, vous pouvez étendre ce simple programme JavaScript pour accepter et générer d'autres variables, ou fournir des options interactives plus complexes à l'utilisateur.

Conclusion

Dans cet article, nous avons présenté comment utiliser JavaScript pour saisir le rayon d'un cercle et calculer son aire et sa circonférence. JavaScript est un outil courant pour effectuer de telles opérations interactives. Il peut facilement manipuler le HTML et d'autres API de navigateur, ce qui rend l'écriture d'applications et de pages Web plus facile et plus amusante.

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!

JavaScript html 常量 math 字符串 JS 事件 dom

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：Comment appeler CSSArticle suivant：Comment appeler CSS

Articles Liés

Voir plus