JavaScript幾種彈窗事件的使用

2022-02-25 10:01:40

一、彈窗事件是什麼？

彈窗事件就是在我們執行某操作的時候,彈出資訊框給出提示。或收集資料的時候,彈出視窗收集資訊,不想收集可以取消隱藏。

二、簡述幾種彈窗的使用

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彈窗事件內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

JavaScript幾種彈窗事件的使用

目錄

一、彈窗事件是什麼？

二、簡述幾種彈窗的使用

1.警告框

2.選擇框

3.資訊錄入框

熱門文章