Heim > Artikel > Web-Frontend > Kleine Funktionen mit Javascript implementiert

Kleine Funktionen mit Javascript implementiert

王林Original: 2023-05-09 17:47:07538Durchsuche

JavaScript ist eine dynamische, objektorientierte Programmiersprache auf hohem Niveau, die mit HTML und CSS kombiniert werden kann, um leistungsstarke Webanwendungen zu erstellen. In diesem Artikel werden einige kleine Funktionen vorgestellt, die mit JavaScript implementiert werden, damit Sie die Anwendung von JavaScript besser verstehen.

Klicken Sie auf die Schaltfläche, um den Text zu ändern

Dies ist eine sehr einfache JavaScript-Anwendung, und die Implementierungsmethode ist ebenfalls sehr einfach. Sie können eine Schaltfläche erstellen und ihr einen Onclick-Ereignishandler hinzufügen. Wenn auf die Schaltfläche geklickt wird, ändert der JavaScript-Code den zugehörigen Text. Zum Beispiel:

<!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 kann auch zum Erstellen von Timern verwendet werden, was für einige Anwendungen, die ein Timing erfordern, sehr nützlich ist. Mit der Funktion setInterval() können Sie einen Timer implementieren. Zum Beispiel:

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

Bestätigungsdialogfeld

Manchmal ist es notwendig, den Benutzer zu bitten, zu bestätigen, ob ein Vorgang ausgeführt werden soll. Mithilfe von JavaScript können Bestätigungsdialogfelder erstellt werden, in denen Benutzer eine Auswahl treffen können. Zum Beispiel:

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

Formularvalidierung

Formularvalidierung ist eine sehr verbreitete JavaScript-Anwendung. Sie können das Formular überprüfen, um sicherzustellen, dass der vom Benutzer eingegebene Inhalt den Anforderungen entspricht. Zum Beispiel:

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

Bildkarussell

JavaScript kann auch zum Erstellen dynamischer Bildkarussells verwendet werden. Sie können JavaScript verwenden, um ein div-Element festzulegen, das mehrere Bilder enthält, und dann die Funktion setInterval() verwenden, um die Bilder zu wechseln. Zum Beispiel:

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

Zusammenfassung

JavaScript ist eine sehr leistungsfähige Programmiersprache, mit der sich eine Vielzahl von Webanwendungen erstellen lassen. In diesem Artikel werden einige JavaScript-Anwendungen vorgestellt, darunter das Ändern von Text bei Klicks auf Schaltflächen, Timer, Bestätigungsdialoge, Formularvalidierung und Bildkarussells. Wir hoffen, dass Ihnen diese Beispiele dabei helfen, JavaScript-Anwendungen besser zu verstehen.

Das obige ist der detaillierte Inhalt vonKleine Funktionen mit Javascript implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html 面向对象表单验证对象事件

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：Die vue-Homepage führt kein JavaScript ausNächster Artikel：Die vue-Homepage führt kein JavaScript aus

In Verbindung stehende Artikel

Mehr sehen