Artikel ini menjelaskan metode menggunakan SetTimeout untuk mengimplementasikan kotak peringatan pop-up yang tertunda. Bagikan untuk referensi Anda. Dengan rincian sebagai berikut:
Pertama tunjukkan kode JS untuk jendela popup penundaan/waktunya/paksa
Parameter Penjelasan: Set waktu: lalu. Untuk mengubah ukuran) Dialogwidth: 800px (Lebar) DialogHeight: 600px (Tinggi) 3000 (waktu popup tunda, unit: milidetik.1 kedua = 1000ms) <!-iklan pop-up-> <bahasa skrip = "JavaScript"> Fungsi () {var kemudian = new date () lalu (lalu. Lalu. String (document.cookie) var cookieheader = "cookie1 =" var beginposition = cookiestring.indexof (cookieHeader) if (beginposition! = -1) {} else {document.cookie = "cookie1 = popwin; exires ="+ Kemudian.togmtString () focusId = setTimeout ("focus (); window.showmodelessdialog ('ttan.htm', '', 'gulir: 0; status: 0; BANTUAN: 0; dapat diputar ulang: 0; dialogwidth: 0px; dialogHeight: 0px ') ", 3000) window.focus ();}} get (); </script> <!-pop-up ---> Isi ttan.htm: <script language = "javascript"> <!-window.open ("http: // pop-up webpage/"); //-> </script> <script language = "javascript"> <!-setTimeOut ('window.close ();', 0) //-> </scripter> ite oVe out ('window.close ();', 0) //-> </scripter> itse Uping ('window.close ();', 0) //--> </scripter> ite Uping ('window.close ();', 0) //-> </scripter> ite Uping ('Window.close ();' Dan itu bisa mencapai pop up paksa! LaiSetelah kode berikut dijalankan, kotak peringatan akan muncul setelah mengklik tombol, yang terutama menunjukkan cara menggunakan setTimeout
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> tunda tampilan box prompt </ title> <tyle> #div1 {float: left; Lebar: 60px; Tinggi: 60px; Latar Belakang-Color: Aqua; } #div2 {position: relatif; float: kiri; margin: 0 10px; Lebar: 200px; Tinggi: 200px; Latar Belakang-Color: #CCCCCC; Tampilan: Tidak Ada; } </tyle> <script> window.onload = function () {var odiv1 = document.getElementById ('div1'); var odiv2 = document.geteLementById ('div2'); var timer = null; // odiv1.onmouseover = function () {// clearTimeout (timer); // odiv2.style.display = 'block'; // Div2 // Saat mouse bergerak ke div1}; //// odiv1.onmouseout = function () {// timer = setTimeout (function () {// odiv2.style.display = 'none'; // sembunyikan div2 //} Ketika mouse menghapus div1, 500); // Untuk pindah dari Div1 ke Div2, Div2 tersembunyi harus memiliki pengaturan penundaan //}; //// odiv2.onmouseOver = function () {// clearTimeout (timer); // Bersihkan pengaturan penundaan, ketika mouse pindah ke Div2, Div2 harus ditampilkan //}; //// odiv2.onmouseout = function () {// timer = setTimeOut (function () {// odiv2.style.display = 'none'; // Ketika mouse keluar dari Div2, Div2 harus disembunyikan //}, 500); // Ketika mouse pindah div2 dan ke Div1, Div2 akan berkedip dan ditampilkan lagi, atur penundaan untuk menghapus efek berkedip; // // Tetapi setelah mengatur penundaan dan ketika mouse bergerak ke Div1, Div2 disembunyikan karena setTimeout, // // penundaan harus dihapus, dan kode untuk penundaan ditambahkan dalam acara ODIV1.onmouseover untuk menghapus penundaan. //}; // Karena kode dalam empat peristiwa ini sama atau serupa, pemrosesan yang disederhanakan berikut dapat dilakukan: odiv1.onmouseover = odiv2.onmouseover = fungsi () {clearTimeout (timer); odiv2.style.display = 'block'; /* Ketika mouse pindah ke Div1, Div2 ditampilkan. Meskipun odiv2.onmouseover tidak ditulis dalam odiv2.style.display = 'block'; Tetapi pada kenyataannya ODIV2 dalam keadaan 'blok', menulis satu kode lagi tidak memiliki dampak substansial*/}; odiv1.onmouseout = odiv2.onmouseout = function () {timer = setTimeout (function () {odiv2.style.display = 'none'; // Sembunyikan div2 saat mouse menghapus div1}, 500); // Untuk pindah dari Div1 ke Div2, harus ada pengaturan penundaan ketika DIV1 dipindahkan dari DIV1}; // Hasil eksekusi kode yang disederhanakan persis sama dengan efek kode sebelumnya. } </script> </head> <body> <h2> tunda box prompt </h2> <div id = "div1"> </div> <div id = "div2"> </div> </body> </html>Poin -poin yang perlu diperhatikan saat menulis kotak Delay Prompt dicatat dalam komentar. Harap perhatikan satu per satu. Fungsi ini lebih halus setelah membaca tutorial video. Alasannya adalah bahwa sebelum menulis kode, daftar fungsi yang diperlukan diimplementasikan satu per satu. Jika ada masalah, jauh lebih baik untuk melakukan penyesuaian yang sesuai daripada menulis kode secara langsung.