JavaScriptで実装された機能例は何ですか?-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

JavaScriptで実装された機能例は何ですか?

PHPz

Apr 21, 2023 pm 02:16 PM

JavaScript は、Web ページのインタラクティブ性の設計と開発で広く使用されている、一般的に使用されるスクリプト言語です。今回はJavaScriptで実装した実用的な関数例をいくつか紹介します。

単純な計算機

JavaScript を使用して、単純な計算機を作成できます。このコードスニペットでは、HTML のボタンと入力ボックス、および JavaScript を使用して計算ロジックを処理します。ユーザーは数値、演算子、オペランドを入力し、等号をクリックして計算を実行し、結果を表示します。

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

ログイン後にコピー

カウントダウンタイマー

JavaScript を使用して、指定した日時から特定の目標時刻までカウントダウンするカウントダウンタイマーを作成できます。このコードスニペットは、Date オブジェクトを使用して現在時刻と目標時刻を取得し、その差を計算して、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>

ログイン後にコピー

画像カルーセル

JavaScript を使用して、画像のグループが Web ページ上で回転して表示される画像カルーセルを作成できます。このコードスニペットは、HTML および JavaScript ロジックの image 要素を使用して、画像のリストを配列に保存し、指定された間隔で現在の画像を更新します。

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

ログイン後にコピー

フォーム検証

JavaScript を使用してユーザー入力を検証し、入力データの形式と内容が正しいことを確認できます。このコードスニペットは、HTML フォーム要素と JavaScript ロジックを使用して、各フォーム要素をチェックすることでユーザー入力を検証します。

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

ログイン後にコピー

概要

これらは JavaScript で実装された機能例で、電卓、カウントダウンタイマー、画像カルーセル、フォーム検証などの実用的な機能をカバーしています。もちろん、これは JavaScript アプリケーション機能の氷山の一角にすぎず、JavaScript には Web デザインや開発において他にも多くの用途やアプリケーションシナリオがあります。

以上がJavaScriptで実装された機能例は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。