JavaScript幾種彈窗事件的使用
更新時間：2022年02月25日 08:30:47 作者：酷爾。
這篇文章主要介紹了JavaScript幾種彈窗事件的使用,彈窗事件就是在我們執(zhí)行某操作的時候,彈出信息框給出提示。或收集數(shù)據(jù)的時候,彈出窗口收集信息,不想收集可以取消隱藏,下文介紹需要的朋友可以參考一下
一、彈窗事件是什么？
彈窗事件就是在我們執(zhí)行某操作的時候,彈出信息框給出提示。或收集數(shù)據(jù)的時候,彈出窗口收集信息,不想收集可以取消隱藏。
二、簡述幾種彈窗的使用
1.警告框
①效果展示
②代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
</head>
<body>
? ? ? ? <script>
? ? ? ? function myFunction() {
? ? ? ? ??
? ? ? ? ? ? ? ? alert("你好，我是一個警告框！");
? ? ? ? }
? ? ? ?
? ? </script>
? ? <div id="demo2"></div>
? ? <div id="demo1"></div>
? ? <input type="button" value="彈窗" onclick="myFunction()">
</body>
</html>2.選擇框
①效果展示：
②代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
</head>
<body>
? ? ? ? <script>
? ? ? ? function myFunction1(){
? ? ? ? ? ? var x;
? ? ? ? ? ? var r=confirm("按下按鈕!");
? ? ? ? ? ? if (r==true){
? ? ? ? ? ? ? ? x="你按下了\"確定\"按鈕!";
? ? ? ? ? ? }
? ? ? ? ? ? else{
? ? ? ? ? ? ? ? x="你按下了\"取消\"按鈕!";
? ? ? ? ? ? }
? ? ? ? ? ? document.getElementById("demo1").innerHTML=x;
? ? ? ? }
? ? </script>
? ? <div id="demo2"></div>
? ? <div id="demo1"></div>
? ? <input type="button" value="選擇框" onclick="myFunction1()">
</body>
</html>3.信息錄入框
①效果展示：
②代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
</head>
<body>
? ? ? ? <script>
? ? ? ? function myFunction2(){
? ? ? ? ? ? var x;
? ? ? ? ? ? var person=prompt("請輸入你的名字","Harry Potter");
? ? ? ? ? ? if (person!=null && person!=""){
? ? ? ? ? ? ? ? x="你好 " + person + "! 今天感覺如何?";
? ? ? ? ? ? ? ? document.getElementById("demo2").innerHTML=x;
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
? ? <div id="demo2"></div>
? ? <div id="demo1"></div>
? ? <input type="button" value="填信息框" onclick="myFunction2()">
</body>
</html>總結：
這幾種彈窗方法比較簡單,使用盒子的隱藏與展示,自己也可以定制一個彈窗。感興趣的小伙伴可以進行嘗試。
到此這篇關于JavaScript幾種彈窗事件的使用的文章就介紹到這了,更多相關JavaScript彈窗事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
javascript實現(xiàn)動態(tài)顯示顏色塊的報表效果
本文主要介紹了javascript實現(xiàn)動態(tài)顯示顏色塊的報表效果的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
在開發(fā)小程序的時候我們總是能遇到各種奇怪的需求,下面這篇文章主要給大家介紹了關于微信小程序返回上一頁的各種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了如何在JavaScript中正確處理變量，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
JavaScript去掉空格的方法集合，腳本之家以前發(fā)布過很多的去除空格的代碼，這個更多更全面。2010-12-12
這篇文章介紹了JS文本框追加多個下拉框的值的例子，有需要的朋友可以參考一下2013-07-07
學習框架的我，又來了。看到 String 對象擴展這一部分，對 trim() 這個經(jīng)常被來來說的方法比較感興趣2011-10-10
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)圖片壓縮，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要為大家詳細介紹了js實現(xiàn)櫥窗展示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要為大家詳細介紹了微信小程序排坑指南，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要為大家詳細介紹了JS實現(xiàn)圖片瀑布流，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09