Maison > Article > interface Web > Quels sont les exemples fonctionnels implémentés par javascript ?

Quels sont les exemples fonctionnels implémentés par javascript ?

PHPzoriginal: 2023-04-21 14:16:22603parcourir

JavaScript est un langage de script couramment utilisé dans la conception et le développement d'interactivité de pages Web. Aujourd'hui, nous allons présenter quelques exemples fonctionnels pratiques implémentés en JavaScript.

Calculatrice simple

JavaScript peut être utilisé pour créer des calculatrices simples. Cet extrait de code utilise les boutons et les zones de saisie en HTML et JavaScript pour gérer la logique de la calculatrice. L'utilisateur saisit des nombres, des opérateurs et des opérandes, puis clique sur le signe égal pour exécuter le calcul et afficher le résultat.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Simple Calculator</title>
   </head>
   <body>
      <form name="calculator">
         <input type="text" name="answer" id="answer">
         <br>
         <input type="button" value=" 1 " onclick="calculator.answer.value += &#39;1&#39;">
         <input type="button" value=" 2 " onclick="calculator.answer.value += &#39;2&#39;">
         <input type="button" value=" 3 " onclick="calculator.answer.value += &#39;3&#39;">
         <input type="button" value=" + " onclick="calculator.answer.value += &#39;+&#39;">
         <br>
         <input type="button" value=" 4 " onclick="calculator.answer.value += &#39;4&#39;">
         <input type="button" value=" 5 " onclick="calculator.answer.value += &#39;5&#39;">
         <input type="button" value=" 6 " onclick="calculator.answer.value += &#39;6&#39;">
         <input type="button" value=" - " onclick="calculator.answer.value += &#39;-&#39;">
         <br>
         <input type="button" value=" 7 " onclick="calculator.answer.value += &#39;7&#39;">
         <input type="button" value=" 8 " onclick="calculator.answer.value += &#39;8&#39;">
         <input type="button" value=" 9 " onclick="calculator.answer.value += &#39;9&#39;">
         <input type="button" value=" * " onclick="calculator.answer.value += &#39;*&#39;">
         <br>
         <input type="button" value=" c " onclick="calculator.answer.value = &#39;&#39;">
         <input type="button" value=" 0 " onclick="calculator.answer.value += &#39;0&#39;">
         <input type="button" value=" = " onclick="calculator.answer.value = eval(calculator.answer.value)">
         <input type="button" value=" / " onclick="calculator.answer.value += &#39;/&#39;">
         <br>
      </form>
   </body>
</html>

Countdown Timer

JavaScript peut être utilisé pour créer des comptes à rebours qui comptent à rebours à partir d'une date et d'une heure spécifiées jusqu'à une heure cible spécifique. Cet extrait de code utilise un objet Date pour obtenir l'heure actuelle et l'heure cible, calculer la différence et l'afficher sur la page HTML.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>CountDown Timer</title>
   </head>
   <body>
      <div id="countdown"></div>
      <script>
         // Set the date we're counting down to
         var countDownDate = new Date("Jan 1, 2022 00:00:00").getTime();
         // Update the count down every 1 second
         var x = setInterval(function() {
             // Get today's date and time
             var now = new Date().getTime();
             // Find the distance between now and the count down date
             var distance = countDownDate - now;
             // Time calculations for days, hours, minutes and seconds
             var days = Math.floor(distance / (1000 * 60 * 60 * 24));
             var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
             var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
             var seconds = Math.floor((distance % (1000 * 60)) / 1000);
             // Output the result in an element with id="countdown"
             document.getElementById("countdown").innerHTML = days + "d " + hours + "h "
             + minutes + "m " + seconds + "s ";
             // If the count down is over, write some text 
             if (distance < 0) {
                 clearInterval(x);
                 document.getElementById("countdown").innerHTML = "EXPIRED";
             }
         }, 1000);
      </script>
   </body>
</html>

Carrousel d'images

JavaScript peut être utilisé pour créer un carrousel d'images, où un ensemble d'images apparaissent en rotation sur une page Web. Cet extrait de code utilise l'élément image dans la logique HTML et JavaScript pour stocker une liste d'images dans un tableau et mettre à jour l'image actuelle à un intervalle spécifié.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Image Slider</title>
   </head>
   <body>
      <div id="slider">
         <img id="sliderImg" src="">
      </div>
      <script>
         var images = [
             "img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg"
         ];
         var current = 0;
         function changeImage(){
             current++;
             if(current >= images.length){
                 current = 0;
             }
             document.getElementById("sliderImg").src = images[current];
         }
         setInterval(changeImage, 3000);
      </script>
   </body>
</html>

Validation de formulaire

JavaScript peut être utilisé pour valider la saisie de l'utilisateur afin de garantir que le format et le contenu des données saisies sont corrects. Cet extrait de code utilise des éléments de formulaire HTML et une logique JavaScript pour valider les entrées de l'utilisateur en vérifiant chaque élément de formulaire.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Form Validation</title>
      <style>
         .error{
             color: red;
         }
      </style>
   </head>
   <body>
      <form id="myForm">
         <label for="name">Name:</label>
         <input type="text" id="name" name="name"><br>
         <label for="email">Email:</label>
         <input type="email" id="email" name="email"><br>
         <label for="phone">Phone:</label>
         <input type="text" id="phone" name="phone"><br>
         <input type="submit" value="Submit">
      </form>
      <script>
         document.getElementById("myForm").addEventListener("submit", function(event){
             var name = document.getElementById("name").value;
             var email = document.getElementById("email").value;
             var phone = document.getElementById("phone").value;
             var nameError = document.getElementById("nameError");
             var emailError = document.getElementById("emailError");
             var phoneError = document.getElementById("phoneError");
             if(!name){
                 nameError.innerHTML = "Please enter your name.";
                 event.preventDefault();
             }
             if(!email){
                 emailError.innerHTML = "Please enter your email.";
                 event.preventDefault();
             }
             if(!phone){
                 phoneError.innerHTML = "Please enter your phone number.";
                 event.preventDefault();
             }
         });
      </script>
   </body>
</html>

Résumé

Ceci sont des exemples de fonctions implémentées en JavaScript, couvrant des fonctions pratiques telles que les calculatrices, les comptes à rebours, les carrousels d'images et la validation de formulaires. Bien entendu, ce n’est que la pointe de l’iceberg des capacités des applications JavaScript. JavaScript a de nombreuses autres utilisations et scénarios d’application dans la conception et le développement Web.

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：Que signifie l’échappement HTML ?Article suivant：Que signifie l’échappement HTML ?

Articles Liés

Voir plus