Rumah > Artikel > hujung hadapan web > Fungsi kecil dilaksanakan dengan javascript

Fungsi kecil dilaksanakan dengan javascript

王林asal: 2023-05-09 17:47:07437semak imbas

JavaScript ialah bahasa pengaturcaraan peringkat tinggi, dinamik dan berorientasikan objek yang boleh digabungkan dengan HTML dan CSS untuk mencipta aplikasi web yang berkuasa. Artikel ini akan memperkenalkan beberapa fungsi kecil yang dilaksanakan menggunakan JavaScript untuk membantu anda memahami dengan lebih baik aplikasi JavaScript.

Klik butang untuk menukar teks

Ini adalah aplikasi JavaScript yang sangat asas, dan kaedah pelaksanaannya juga sangat mudah. Anda boleh membuat butang dan menambah pengendali acara onclick padanya. Apabila butang diklik, kod JavaScript akan mengubah suai teks yang berkaitan. Contohnya:

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

Pemasa

JavaScript juga boleh digunakan untuk mencipta pemasa, yang sangat berguna untuk sesetengah aplikasi yang memerlukan pemasaan. Anda boleh menggunakan fungsi setInterval() untuk melaksanakan pemasa. Contohnya:

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

Kotak dialog Pengesahan

Kadangkala perlu meminta pengguna mengesahkan sama ada hendak melakukan operasi. JavaScript boleh digunakan untuk membuat kotak dialog pengesahan yang membolehkan pengguna membuat pilihan. Contohnya:

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

Pengesahan borang

Pengesahan borang ialah aplikasi JavaScript yang sangat biasa. Anda boleh menyemak borang untuk memastikan kandungan yang dimasukkan oleh pengguna memenuhi keperluan. Contohnya:

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

Karusel Gambar

JavaScript juga boleh digunakan untuk mencipta karusel gambar dinamik. Anda boleh menggunakan JavaScript untuk menetapkan elemen div yang mengandungi berbilang imej, dan kemudian gunakan fungsi setInterval() untuk menukar imej. Contohnya:

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

Ringkasan

JavaScript ialah bahasa pengaturcaraan yang sangat berkuasa yang boleh digunakan untuk mencipta pelbagai aplikasi web. Artikel ini memperkenalkan beberapa kegunaan JavaScript, termasuk menukar teks pada klik butang, pemasa, dialog pengesahan, pengesahan borang dan karusel imej. Semoga contoh ini akan membantu anda memahami aplikasi JavaScript dengan lebih baik.

Atas ialah kandungan terperinci Fungsi kecil dilaksanakan dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Laman utama vue tidak menjalankan JavaScriptArtikel seterusnya：Laman utama vue tidak menjalankan JavaScript

Artikel berkaitan

Lihat lagi