Bagaimana untuk menyediakan kotak gesaan javascript

王林

Lepaskan： 2023-05-27 10:18:07

asal

647 orang telah melayarinya

JavaScript ialah bahasa skrip yang sangat berkuasa yang boleh digunakan untuk membuat kotak gesaan interaktif dalam halaman web. Petua alat boleh memberikan maklumat kepada pengguna, seperti amaran atau mesej ralat, atau hanya meminta pengesahan daripada pengguna. Artikel ini meneroka cara menggunakan JavaScript untuk mencipta pelbagai jenis petua alat dan menerangkan cara menyesuaikan penampilan dan gelagat petua alat ini.

Buat petua alat JavaScript asas

Pertama, kami akan mencipta petua alat JavaScript ringkas yang memaparkan mesej dan butang OK. Berikut ialah kod kotak gesaan ini:

alert("Hello, World!");

Salin selepas log masuk

Dalam kod ini, fungsi alert() digunakan untuk mencipta kotak gesaan. Ia menerima rentetan sebagai parameter, iaitu mesej yang anda mahu paparkan dalam kotak gesaan. Dalam contoh ini, kami memaparkan mesej ringkas "Hello, World!"

Anda boleh menyalin kod ini ke dalam dokumen HTML anda dan memuatkannya dalam halaman web. Apabila halaman web dimuatkan, petua alat akan muncul secara automatik untuk menunjukkan kepada pengguna mesej mudah. Pengguna boleh mengklik butang OK pada kotak gesaan untuk menutup kotak gesaan dan kembali ke halaman web.

Buat petua alat dengan butang sahkan dan batal

Anda boleh menggunakan petua alat JavaScript untuk meminta tindakan pengesahan daripada pengguna. Berikut ialah contoh yang menunjukkan cara membuat gesaan dengan butang sahkan dan batal:

var result = confirm("Are you sure you want to delete this file?");

if (result) {
  // 用户点击了确认按钮
} else {
  // 用户点击了取消按钮
}

Salin selepas log masuk

Dalam contoh ini, kami menggunakan fungsi confirm() untuk mencipta gesaan. Ia menerima rentetan sebagai parameter, iaitu maklumat yang anda perlukan untuk mengesahkan kepada pengguna. Dalam contoh ini, kami menunjukkan kepada pengguna soalan yang bertanya sama ada mereka pasti mahu memadamkan fail tersebut.

Apabila pengguna mengklik butang sahkan pada kotak gesaan, fungsi confirm() akan mengembalikan nilai Boolean benar. Apabila pengguna mengklik butang batal, fungsi confirm() akan mengembalikan palsu. Berdasarkan nilai pulangan, kami boleh melakukan logik yang sepadan dalam kod untuk bertindak balas kepada operasi pengguna.

Buat petua alat dengan kotak input

Selain memaparkan maklumat dan meminta pengesahan pengguna, petua alat JavaScript juga boleh digunakan sebagai kotak input. Berikut ialah contoh yang menunjukkan cara membuat kotak gesaan dengan kotak input:

var name = prompt("Please enter your name:", "");

if (name != null) {
  // 用户输入了一个名字
} else {
  // 用户点击了取消按钮
}

Salin selepas log masuk

Dalam contoh ini, kami menggunakan fungsi prompt() untuk mencipta kotak gesaan. Ia menerima dua parameter: rentetan yang digunakan untuk memaparkan mesej kepada pengguna yang meminta maklumat input dan nilai lalai pilihan. Dalam contoh ini, kami menunjukkan kepada pengguna mesej yang meminta mereka memasukkan nama mereka.

Apabila pengguna mengklik butang OK pada kotak gesaan, fungsi prompt() akan mengembalikan rentetan yang dimasukkan oleh pengguna. Apabila pengguna mengklik butang batal, fungsi prompt() mengembalikan null. Berdasarkan nilai pulangan, kami boleh melakukan logik yang sepadan dalam kod untuk bertindak balas kepada operasi pengguna.

Cara untuk menyesuaikan penampilan dan tingkah laku petua alat

Walaupun petua alat JavaScript menyediakan cara yang mudah dan mudah untuk memaparkan dan meminta maklumat, penampilan dan tingkah lakunya adalah terhad. Jika anda memerlukan lebih kawalan, anda boleh menggunakan JavaScript untuk membuat petua alat tersuai. Berikut ialah contoh yang menunjukkan cara membuat kotak gesaan tersuai:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Custom Dialog Box</title>
  <style>
    #overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      z-index: 99999;
    }
    #dialog {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 400px;
      background-color: #fff;
      border: 1px solid #000;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0,0,0,0.5);
      z-index: 999999;
    }
    #dialog h2 {
      margin-top: 0;
    }
    #dialog p {
      margin-bottom: 20px;
    }
    #dialog input[type="text"] {
      display: block;
      width: 100%;
      margin-bottom: 20px;
    }
    #dialog button {
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <button onclick="showDialog()">Show Dialog</button>
  <div id="overlay">
    <div id="dialog">
      <h2>Custom Dialog Box</h2>
      <p>Please enter your name:</p>
      <input type="text" id="name">
      <button onclick="hideDialog()">OK</button>
      <button onclick="cancelDialog()">Cancel</button>
    </div>
  </div>
  <script>
    function showDialog() {
      document.getElementById("overlay").style.display = "block";
    }
    function hideDialog() {
      var name = document.getElementById("name").value;
      alert("Hello, " + name + "!");
      document.getElementById("overlay").style.display = "none";
    }
    function cancelDialog() {
      document.getElementById("overlay").style.display = "none";
    }
  </script>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami mencipta kotak dialog tersuai yang mengandungi tajuk, mesej, kotak input dan dua butang (OK dan Batal). Kami menggunakan CSS untuk mentakrifkan rupa kotak dialog, dan JavaScript untuk menentukan tingkah laku kotak dialog. Apabila pengguna mengklik butang Tunjukkan Dialog, kami memaparkan kotak dialog tersuai ini kepada pengguna. Apabila pengguna mengklik butang OK, kami akan mendapat teks dalam kotak input dan memaparkan mesej menggunakan fungsi alert(). Apabila pengguna mengklik butang batal, kami akan menyembunyikan kotak dialog tanpa melakukan sebarang tindakan lain.

Contoh ini hanyalah permulaan petua alat tersuai. Anda boleh menukar rupa dan tingkah laku kotak dialog sendiri untuk memenuhi keperluan anda. Dengan menggunakan JavaScript dan CSS, anda boleh membuat petua alat tersuai yang sangat kompleks untuk memenuhi keperluan khusus anda.

Ringkasan

JavaScript menyediakan beberapa cara berbeza untuk mencipta kotak gesaan, termasuk fungsi alert(), confirm() dan prompt(). Anda boleh menggunakan fungsi ini untuk menyampaikan maklumat kepada pengguna, meminta tindakan pengesahan atau mendapatkan input. Jika anda memerlukan lebih kawalan, anda boleh menggunakan JavaScript dan CSS untuk menyesuaikan penampilan dan tingkah laku petua alat. Tidak kira kaedah yang anda pilih, JavaScript menyediakan cara yang sangat berkuasa dan mudah untuk mencipta petua alat interaktif.

Atas ialah kandungan terperinci Bagaimana untuk menyediakan kotak gesaan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!