Heim > Artikel > Web-Frontend > Welche Funktionsbeispiele werden von Javascript implementiert?

Welche Funktionsbeispiele werden von Javascript implementiert?

PHPzOriginal: 2023-04-21 14:16:22662Durchsuche

JavaScript ist eine häufig verwendete Skriptsprache, die häufig beim Design und der Entwicklung von Webseiteninteraktivität verwendet wird. Heute stellen wir einige praktische Funktionsbeispiele vor, die in JavaScript implementiert sind.

Einfacher Rechner

Mit JavaScript können einfache Rechner erstellt werden. Dieses Code-Snippet verwendet Schaltflächen und Eingabefelder in HTML sowie JavaScript, um die Rechnerlogik zu verwalten. Der Benutzer gibt Zahlen, Operatoren und Operanden ein und klickt dann auf das Gleichheitszeichen, um die Berechnung auszuführen und das Ergebnis anzuzeigen.

<!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

Mit JavaScript können Countdown-Timer erstellt werden, die von einem bestimmten Datum und einer bestimmten Uhrzeit bis zu einer bestimmten Zielzeit herunterzählen. Dieses Code-Snippet verwendet ein Date-Objekt, um die aktuelle Uhrzeit und die Zielzeit abzurufen, die Differenz zu berechnen und sie auf der HTML-Seite anzuzeigen.

<!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>

Bilderkarussell

JavaScript kann verwendet werden, um ein Bilderkarussell zu erstellen, in dem eine Reihe von Bildern abwechselnd auf einer Webseite angezeigt werden. Dieses Code-Snippet verwendet das Bildelement in der HTML- und JavaScript-Logik, um eine Liste von Bildern in einem Array zu speichern und das aktuelle Bild in einem angegebenen Intervall zu aktualisieren.

<!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>

Formularvalidierung

JavaScript kann zur Validierung von Benutzereingaben verwendet werden, um sicherzustellen, dass Format und Inhalt der Eingabedaten korrekt sind. Dieses Code-Snippet verwendet HTML-Formularelemente und JavaScript-Logik, um Benutzereingaben zu validieren, indem jedes Formularelement überprüft wird.

<!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>

Zusammenfassung

Dies sind Beispiele für in JavaScript implementierte Funktionen, die praktische Funktionen wie Taschenrechner, Countdown-Timer, Bildkarussells und Formularvalidierung abdecken. Dies ist natürlich nur die Spitze des Eisbergs der JavaScript-Anwendungsmöglichkeiten. JavaScript hat viele andere Einsatzmöglichkeiten und Anwendungsszenarien im Webdesign und in der Entwicklung.

Das obige ist der detaillierte Inhalt vonWelche Funktionsbeispiele werden von Javascript implementiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was bedeutet HTML-Escape?Nächster Artikel：Was bedeutet HTML-Escape?

In Verbindung stehende Artikel

Mehr sehen