JavaScript基础应用----消息对话框综合应用

最新推荐文章于 2024-05-20 15:17:08 发布

这个函数可导

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量116

点赞数 2

分类专栏：前端工程设计上机实验文章标签： javascript 前端 css html

本文链接：https://blog.csdn.net/qq_62573714/article/details/134811285

版权

前端工程设计上机实验专栏收录该内容

6 篇文章 0 订阅

订阅专栏

【问题描述】

按照图1消息对话框初始页面和图2提示信息框页面所示的效果完成代码编写。

图1 消息对话框初始页面

图2 提示信息框页面

【代码实现】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消息对话框综合应用</title>
    <style type="text/css">
        fieldset {
            background: #99ff99;
            border: 8px ridge #3333cc;
            width: 300px;
            height: 150px;
        }
        legend {
            color: #0000cc;
        }
        form {
            margin: 20px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>消息对话框综合应用</legend>
        <form method="POST" action="">
            你的姓名：<input type="text" name="" id="name1" maxlength="10" readonly><br><br>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" value="输入姓名" onclick="inputName();">
            <input type="reset" name="clear" value="清空">
        </form>
        <script type="text/javascript">
            function inputName() {
                var name = prompt("请输入你的姓名：", "");
                if (name != null) {
                    alert("你的姓名是：" + name);
                    document.getElementById("name1").value = name;
                } else {
                    alert("请你输入姓名！")
                }
            }
        </script>
    </fieldset>
</body>
</html>