Rumah > hujung hadapan web > tutorial js > Tiga cara untuk muncul kotak dialog dalam petua JavaScript_javascript

Tiga cara untuk muncul kotak dialog dalam petua JavaScript_javascript

WBOY
Lepaskan: 2016-05-16 15:08:26
asal
2220 orang telah melayarinya

Rakan yang telah mempelajari js akan mendapati bahawa kami telah menggunakan kaedah alert() , kaedah prompt() dan kaedah prompt() dalam beberapa keadaan Mereka semua muncul kotak dialog pada skrin dan memaparkan kurungan padanya. Kandungan di dalam, menggunakan kaedah ini menjadikan interaktiviti halaman lebih menarik Malah, kami sering menggunakan kotak dialog jenis ini apabila melayari halaman web sering digunakan apabila pengguna mempunyai komunikasi dua hala dengan aplikasi.

Tiga kotak dialog JavaScript diperoleh dengan memanggil tiga kaedah alert(), confirm() dan prompt() bagi objek tetingkap Kotak dialog ini boleh digunakan untuk melengkapkan input dan output daripada js. , laksanakan kod js yang boleh berinteraksi dengan pengguna.

Hari ini, editor akan memperkenalkan secara ringkas tiga kotak dialog pop timbul dalam js. Pertama sekali, editor akan menerangkan kaedah ini secara berasingan, dan kemudian membandingkan kaedah ini Okey, mari kita mulakan js kami. *∩_∩*)′......

Yang pertama: kaedah alert()

Kaedah amaran() adalah yang paling mudah digunakan di antara tiga kotak dialog Ia boleh digunakan untuk memaparkan maklumat teks dengan mudah dan jelas dalam kurungan amaran() dalam kotak dialog kotak di mana maklumat yang akan dipaparkan diletakkan dalam kurungan Kotak dialog mengandungi butang "Sahkan" Selepas pengguna selesai membaca maklumat yang dipaparkan, dia hanya perlu mengklik butang untuk menutup kotak dialog. Mari lihat contoh menggunakan kaedah alert() Kodnya adalah seperti berikut:

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //JavaScript脚本标注
alert("上联:山石岩下古木枯");//在页面上弹出上联
alert("下联:白水泉边少女妙");//在页面上弹出下联
</script>
</head>
</html>
Salin selepas log masuk

Laksanakan contoh kecil di atas, dan kotak dialog akan muncul pada halaman dan memaparkan ayat "Shanglian: Pokok purba layu di bawah batu dan batu", seperti ditunjukkan di bawah:

Kemudian, selepas mengklik butang "Sahkan", kotak dialog kedua akan dipaparkan dan "Gadis di sebelah mata air putih itu indah!", kesannya adalah seperti berikut;

Kotak dialog muncul pada halaman dan memaparkan ayat "Barisan pertama: Pokok purba layu di bawah batu." Selepas mengklik butang "Sahkan", kotak dialog kedua memaparkan dan memaparkan "Gadis di sebelah mata air putih." hebat!" Mari kita menganalisisnya. Berikut ialah contoh kecil:


a. Panggil kaedah amaran() dua kali dalam blok skrip

b. Tambahkan sekeping maklumat teks dalam setiap tanda kurungan() Apabila berjalan, halaman yang ditunjukkan di bawah akan muncul Apabila anda mengklik butang "OK" pada halaman dengan tetikus, halaman kedua akan muncul kemudian Klik butang "OK" untuk menutup kotak dialog pada halaman. Nota: Dua kotak dialog dipaparkan secara berasingan, bukannya satu menutup yang lain Ini kerana js sebenarnya melaksanakan amaran pertama() dan menunggu sehingga pengguna mengklik butang "Sahkan" sebelum melaksanakan amaran kedua( .

alert() ialah kaedah objek tetingkap js Apabila dipanggil, ia boleh ditulis sebagai window.alert() atau alert(). Fungsinya adalah untuk menghasilkan kotak dialog dengan butang pengesahan, yang memaparkan maklumat dalam kurungan ,

Kedua: kaedah confirm()

Kaedah confirm() sangat serupa dengan kaedah alert() Perbezaannya ialah sebagai tambahan kepada butang "confirm", kotak dialog jenis ini juga mempunyai butang "batal" jenis kotak dialog dipanggil pengesahan Dalam kotak dialog, anda tidak perlu menulis tetingkap apabila memanggil kaedah confirm() objek tetingkap dan kaedah prompt() yang diperkenalkan kemudian. Mari lihat contoh kecil tentang confirm(). Kodnya adalah seperti berikut:


<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //js脚本标注
confirm("上联:一但重泥拦子路;下联:两岸夫子笑颜回"); //在页面上弹出确认对话框
</script>
</head>
</html>
Salin selepas log masuk
Kesan paparan adalah seperti berikut:


Analisis contoh kecil ini:


a. Tambahkan kaedah confirm() dalam blok skrip

b. Sekeping maklumat teks ditambah dalam kurungan confirm() Kesan berjalan adalah seperti yang ditunjukkan dalam gambar di atas pengguna mengklik butang "Batal" , kaedah confirm() akan mengembalikan palsu, dan tidak kira butang mana yang dipilih pengguna, kotak dialog akan ditutup dan kod JavaScript akan terus dilaksanakan. Mengklik butang "Sahkan" atau "Batal" kedua-duanya menutup kotak dialog. Sebenarnya, sama ada mengklik butang "Sahkan" atau "Batal" akan mengembalikan nilai Boolean, supaya terdapat beberapa js. di belakang tabir Kod untuk memainkan peranan butang Sila lihat contoh di bawah untuk mengalami keindahan menggunakan confirm() untuk mengembalikan nilai Boolean. Kodnya adalah seperti berikut:


<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //js脚本标注
var con;
con=confirm("你喜欢玫瑰花么&#63;"); //在页面上弹出对话框
if(con==true)alert("非常喜欢!");
else alert("不喜欢!");
</script>
</head>
</html>
Salin selepas log masuk

我们来分析一下这个小例子:

a、在

Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan