编写js，当点击按钮的时候，发生网页字符串的改变、弹出网页警示框

最新推荐文章于 2023-04-05 21:25:41 发布

爱睡觉的小馨

最新推荐文章于 2023-04-05 21:25:41 发布

阅读量957

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_45696288/article/details/109398218

版权

js 专栏收录该内容

24 篇文章 7 订阅

订阅专栏

网页字符串的改变：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="demo">
        <!-- 123是不能够输出的，输出id属性为demo的js代码 -->
        123
    </div>

    <input type="button" value="改变" onclick="change()">

</body>


 <script>

       //语句是JS向浏览器发出的命令，它的作用是告诉浏览器要做什么
        // document.getElementById("demo").innerHTML  =  "hi,js!";

        //函数（JavaScript严格区分大小写）
        function change(){
            document.getElementById("demo").innerHTML  =  "hi,js!";
        }

    </script>
  

</html>

在这里插入图片描述

当点击 “改变” 按钮的时候，字符串会发生改变：

在这里插入图片描述

弹出网页警示框：

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <input type="button" value="改变" onclick="javascript : alert('欢迎你');">


</body>
</html>

在这里插入图片描述

方法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <input type="button" value="点击我" onclick="change()");>



    <script>

        function change (){
            javascript:alert('欢迎进入 JavaScript 页面');
        }

    </script>

    
</body>
</html>

在这里插入图片描述

实战举例：

请编写代码，使弹出的网页一开始提示欢迎信息，然后网页中显示出两个按钮，其中一个按钮的作用是：点击按钮后网页提示是否删除的信息，点击确定则提示删除成功，否则提示删除失败。
另一个按钮的作用是：点击按钮后弹出文本框的输入页面（默认一个名字），当点击确定的时候，提示欢迎信息，输入内容为空的时候提示并进行重新输入，否则提示已取消输入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <input type="button" value="点击我1" onclick="show_on()");>
    <input type="button" value="点击我2" onclick="show_prom()");>
    
    <script>

        alert('欢迎');//文本警示框

        function show_on(){
            var  result = confirm("是否删除");//文本确认框

            if(result){
                alert("删除成功");
            }
            else {
                alert("删除失败");
            }
        }


        function show_prom(){
            var value=prompt("请输入你的名字","马云");//马云设置为默认值，可以在弹出的文本框中修改
            if(value==null)//点击取消按钮的时候
                alert("已取消输入");
            else if(value==""){
                alert("输入内容为空，请重新输入");
                show_prom()
                }
            else
                alert("你好"+value);
        }

    </script>

</body>
</html>

在这里插入图片描述

实战举例：

根据输入的成绩类型，提示相应的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <input type="button" value="点击我输入成绩" onclick="choise()");>


    <script>

        function choise(){
            var value=prompt("请输入你的成绩类型","B");

            switch(value){

                case 'A':alert("高手，佩服");   break;

                case 'B':alert("不错哦");   break;

                case 'C':alert("勉强及格");  break;

                case 'D':alert("恭喜你，又挂了");  break;

                default:
                    alert("抱歉，你输入的成绩类型有误，请重新输入");
                    choise();
                

            }
        }

    </script>


</body>
</html>

在这里插入图片描述

爱睡觉的小馨

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
编写js，当点击按钮的时候，发生网页字符串的改变、弹出网页警示框

网页字符串的改变：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> .
复制链接

扫一扫