Apakah contoh berfungsi yang dilaksanakan oleh javascript?-Soal Jawab bahagian hadapan-php.cn

JavaScript ialah bahasa skrip yang biasa digunakan yang digunakan secara meluas dalam reka bentuk dan pembangunan interaktiviti halaman web. Hari ini, kami akan memperkenalkan beberapa contoh fungsi praktikal yang dilaksanakan dalam JavaScript.

Kalkulator Mudah

JavaScript boleh digunakan untuk mencipta kalkulator ringkas. Coretan kod ini menggunakan butang dan kotak input dalam HTML dan JavaScript untuk mengendalikan logik kalkulator. Pengguna memasukkan nombor, operator dan operan, kemudian mengklik tanda sama untuk menjalankan pengiraan dan memaparkan hasilnya.

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

Salin selepas log masuk

Pemasa Kira detik

JavaScript boleh digunakan untuk mencipta pemasa kira detik yang mengira detik dari tarikh dan masa yang ditetapkan sehingga masa sasaran tertentu. Coretan kod ini menggunakan objek Tarikh untuk mendapatkan masa semasa dan masa sasaran, mengira perbezaan dan memaparkannya pada halaman 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>

Salin selepas log masuk

Karusel Imej

JavaScript boleh digunakan untuk mencipta karusel imej, di mana satu set imej muncul secara bergilir pada halaman web. Coretan kod ini menggunakan elemen imej dalam HTML dan logik JavaScript untuk menyimpan senarai imej dalam tatasusunan dan mengemas kini imej semasa pada selang waktu tertentu.

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

Salin selepas log masuk

Pengesahan Borang

JavaScript boleh digunakan untuk mengesahkan input pengguna bagi memastikan format dan kandungan data input adalah betul. Coretan kod ini menggunakan elemen borang HTML dan logik JavaScript untuk mengesahkan input pengguna dengan menyemak setiap elemen borang.

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

Salin selepas log masuk

Ringkasan

Ini ialah contoh fungsi yang dilaksanakan dalam JavaScript, meliputi fungsi praktikal seperti kalkulator, pemasa undur, karusel imej dan pengesahan borang. Sudah tentu, ini hanyalah sebahagian besar daripada keupayaan aplikasi JavaScript JavaScript mempunyai banyak kegunaan lain dan senario aplikasi dalam reka bentuk dan pembangunan web.

Atas ialah kandungan terperinci Apakah contoh berfungsi yang dilaksanakan oleh javascript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!