JavaScriptで実装された小さな機能-フロントエンドQ&A-php.cn

JavaScriptで実装された小さな機能

王林

リリース： 2023-05-09 17:47:07

オリジナル

545 人が閲覧しました

JavaScript は、HTML および CSS と組み合わせて強力な Web アプリケーションを作成できる、高レベルの動的オブジェクト指向プログラミング言語です。この記事では、JavaScript のアプリケーションをより深く理解できるように、JavaScript を使用して実装されたいくつかの小さな関数を紹介します。

ボタンをクリックしてテキストを変更します。

これは非常に基本的な JavaScript アプリケーションであり、実装方法も非常に簡単です。ボタンを作成し、それに onclick イベントハンドラーを追加できます。ボタンをクリックすると、JavaScript コードが関連付けられたテキストを変更します。例:

<!DOCTYPE html>
<html>
<head>
  <title>点击按钮改变文本</title>
</head>
<body>
  <h1 id="header">欢迎来到我的网站</h1>
  <button onclick="changeText()">点击修改标题</button>

  <script>
    function changeText() {
      var header = document.getElementById("header");
      header.innerHTML = "欢迎访问我的个人博客";
    }
  </script>
</body>
</html>

ログイン後にコピー

Timer

JavaScript を使用してタイマーを作成することもできます。これは、タイミングを必要とする一部のアプリケーションで非常に役立ちます。 setInterval() 関数を使用してタイマーを実装できます。例:

<!DOCTYPE html>
<html>
<head>
  <title>计时器</title>
</head>
<body>
  <h1>倒计时：</h1>
  <p id="timer"></p>

  <script>
    var count = 60;
    var timer = document.getElementById("timer");

    var interval = setInterval(function(){
      count--;
      timer.innerHTML = count + "秒";
      if (count === 0) {
        clearInterval(interval);
        timer.innerHTML = "时间到！";
      }
    }, 1000);
  </script>
</body>
</html>

ログイン後にコピー

確認ダイアログボックス

操作を実行するかどうかをユーザーに確認する必要がある場合があります。 JavaScript を使用して、ユーザーが選択できる確認ダイアログボックスを作成できます。例:

<!DOCTYPE html>
<html>
<head>
  <title>确认对话框</title>
</head>
<body>
  <button onclick="showConfirm()">点击删除</button>

  <script>
    function showConfirm() {
      var choice = confirm("您确定要删除这个文件吗？");
      if (choice) {
        alert("文件已成功删除！");
      } else {
        alert("删除操作已取消。");
      }
    }
  </script>
</body>
</html>

ログイン後にコピー

フォーム検証

フォーム検証は、非常に一般的な JavaScript アプリケーションです。フォームをチェックして、ユーザーが入力した内容が要件を満たしていることを確認できます。例:

<!DOCTYPE html>
<html>
<head>
  <title>表单验证</title>
  <script>
    function validateForm() {
      var name = document.forms["myForm"]["name"].value;
      var phone = document.forms["myForm"]["phone"].value;

      if (name === "") {
        alert("请输入您的姓名。");
        return false;
      }

      if (phone === "") {
        alert("请输入您的电话号码。");
        return false;
      }

      // 电话号码必须是数字
      if (isNaN(phone)) {
        alert("电话号码必须是数字。");
        return false;
      }
    }
  </script>
</head>
<body>
  <h1>请填写以下表单：</h1>
  <form name="myForm" onsubmit="return validateForm()">
    姓名：<input type="text" name="name"><br>
    电话：<input type="text" name="phone"><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

ログイン後にコピー

Picture Carousel

JavaScript を使用して動的な画像カルーセルを作成することもできます。 JavaScript を使用して複数の画像を含む div 要素を設定し、setInterval() 関数を使用して画像を切り替えることができます。例:

<!DOCTYPE html>
<html>
<head>
  <title>图片轮播</title>
  <style>
    #slideshow {
      width: 400px;
      height: 300px;
      position: relative;
      overflow: hidden;
    }
    #slideshow img {
      width: 400px;
      height: 300px;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div id="slideshow">
    <img src="img1.jpg" />
    <img src="img2.jpg" />
    <img src="img3.jpg" />
  </div>

  <script>
    var currentImg = 0;
    var imgList = document.querySelectorAll("#slideshow img");

    setInterval(function() {
      imgList[currentImg].style.opacity = 0;
      currentImg = (currentImg + 1) % imgList.length;
      imgList[currentImg].style.opacity = 1;
    }, 2000);
  </script>
</body>
</html>

ログイン後にコピー

概要

JavaScript は、さまざまな Web アプリケーションの作成に使用できる非常に強力なプログラミング言語です。この記事では、ボタンクリック時のテキストの変更、タイマー、確認ダイアログ、フォーム検証、画像カルーセルなど、JavaScript の使用法をいくつか紹介します。これらの例が JavaScript アプリケーションの理解を深めるのに役立つことを願っています。

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