Maison > Article > interface Web > Petites fonctions implémentées avec javascript

Petites fonctions implémentées avec javascript

王林original: 2023-05-09 17:47:07542parcourir

JavaScript est un langage de programmation dynamique et orienté objet de haut niveau qui peut être combiné avec HTML et CSS pour créer de puissantes applications Web. Cet article présentera quelques petites fonctions implémentées à l'aide de JavaScript pour vous aider à mieux comprendre l'application de JavaScript.

Cliquez sur le bouton pour modifier le texte

Il s'agit d'une application JavaScript très basique, et la méthode d'implémentation est également très simple. Vous pouvez créer un bouton et y ajouter un gestionnaire d'événements onclick. Lorsque le bouton est cliqué, le code JavaScript modifiera le texte associé. Par exemple :

<!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 peut également être utilisé pour créer des minuteries, ce qui est très utile pour certaines applications nécessitant un timing. Vous pouvez utiliser la fonction setInterval() pour implémenter une minuterie. Par exemple :

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

Boîte de dialogue de confirmation

Parfois, il est nécessaire de demander à l'utilisateur de confirmer s'il doit effectuer une opération. JavaScript peut être utilisé pour créer des boîtes de dialogue de confirmation permettant aux utilisateurs de faire des choix. Par exemple :

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

Validation de formulaire

La validation de formulaire est une application JavaScript très courante. Vous pouvez vérifier le formulaire pour vous assurer que le contenu saisi par l'utilisateur répond aux exigences. Par exemple :

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

Carrousel d'images

JavaScript peut également être utilisé pour créer des carrousels d'images dynamiques. Vous pouvez utiliser JavaScript pour définir un élément div contenant plusieurs images, puis utiliser la fonction setInterval() pour changer d'image. Par exemple :

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

Summary

JavaScript est un langage de programmation très puissant qui peut être utilisé pour créer une variété d'applications Web. Cet article présente certaines utilisations de JavaScript, notamment la modification du texte lors des clics sur les boutons, les minuteries, les boîtes de dialogue de confirmation, la validation des formulaires et les carrousels d'images. Espérons que ces exemples vous aideront à mieux comprendre les applications JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：la page d'accueil de vue n'exécute pas JavaScriptArticle suivant：la page d'accueil de vue n'exécute pas JavaScript

Articles Liés

Voir plus