79、使用 JavaScript 的 if-else 语句创建互动欢迎消息

pepper pepper 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 100+累计阅读 83平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄24年
关注
原创 最新推荐文章于 2026-03-11 04:32:25 发布 83 阅读 AI 写同款· GEO 优化 ›

使用 JavaScript 的 if-else 语句创建互动欢迎消息

JavaScript 是一种强大的编程语言，广泛应用于网页开发中。通过使用条件语句如 if 和 else ，我们可以根据用户的输入和选择来动态地改变网页的行为。本文将通过一个具体的示例，详细讲解如何使用 if-else 语句来创建一个互动的欢迎消息脚本。

1. 引言

在网页开发中，用户交互是非常重要的。通过使用 if-else 语句，我们可以根据用户的输入和选择来动态地改变网页的行为。本文将通过一个具体的示例，详细讲解如何使用 if-else 语句来创建一个互动的欢迎消息脚本。

2. 示例概述

我们将创建一个简单的网页，当用户打开页面时，会弹出一个提示框要求用户输入他们的名字。接着，会弹出一个确认框让用户确认他们输入的名字是否正确。如果用户确认无误，将会显示一条欢迎消息；如果用户不确定，将会重新询问用户的名字。

3. 代码实现

3.1 HTML 结构

首先，我们需要创建一个基本的 HTML 文件结构。这个文件将包含一个标题、一些样式以及一个 JavaScript 函数。以下是完整的 HTML 代码： 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <title>The Welcome Message - Javascript</title>
    <script type="text/javascript">
        function wlcmmsg() {
            var name = prompt('What is your name?', '');
            var correct = confirm('Are you sure your name is ' + name + '?');
            if (correct == true) {
                alert('Welcome ' + name);
            } else {
                wlcmmsg(); // 如果用户不确定，重新询问
            }
        }
    </script>
    <style type="text/css">
        body {
            background-color: #00aac5;
            color: #000;
        }
    </style>
</head>
<body onload="wlcmmsg()" onunload="alert('Goodbye ' + name)">
    <p>
        This script is dual-licensed under both,
        <a href="http://www.book.org/zen/xyz_Documentation_License">FDL</a> and
        <a href="XYZ General Public License">GPL</a>. 
        See <a href="http://textbook.zenbook.org/zen/Programming:Computer">zenbook</a>
    </p>
</body>
</html>

3.2 代码解释

3.2.1 prompt 函数

prompt 函数用于提示用户输入姓名。它接受两个参数：一个是提示信息，另一个是默认值。在这个例子中，我们提示用户输入他们的名字，默认值为空字符串。 

var name = prompt('What is your name?', '');
3.2.2 confirm 函数

confirm 函数用于确认用户输入的名字是否正确。它接受一个参数：提示信息。用户可以选择“确定”或“取消”。如果用户选择“确定”，则返回 true ；如果选择“取消”，则返回 false 。 

var correct = confirm('Are you sure your name is ' + name + '?');
3.2.3 if-else 语句

根据用户的确认结果，决定是显示欢迎消息还是重新询问名字。如果用户确认无误，则显示欢迎消息；如果用户不确定，则重新调用 wlcmmsg 函数。 

if (correct == true) {
    alert('Welcome ' + name);
} else {
    wlcmmsg(); // 如果用户不确定，重新询问
}
3.2.4 onload 事件

onload 事件在页面加载时触发，自动调用 wlcmmsg 函数。 

<body onload="wlcmmsg()">
3.2.5 onunload 事件

onunload 事件在页面关闭时触发，显示告别消息。 

<body onunload="alert('Goodbye ' + name)">

4. 用户交互流程

为了更好地理解用户交互流程，我们可以用流程图来表示： 

graph TD;
    A[页面加载] --> B(prompt 函数提示用户输入名字);
    B --> C(confirm 函数确认名字是否正确);
    C -->|用户选择确定| D(alert 显示欢迎消息);
    C -->|用户选择取消| E(wlcmmsg 函数重新询问);
    D --> F(页面关闭);
    E --> B;
    F --> G(onunload 事件显示告别消息);

5. 关键点总结

  • 用户输入 ：通过 prompt 函数获取用户的名字。
  • 用户确认 ：通过 confirm 函数确认用户输入的名字是否正确。
  • 条件判断 ：使用 if-else 语句根据用户的确认结果执行不同的操作。
  • 页面事件 ：利用 onload 和 onunload 事件在页面加载和关闭时触发相应的函数。

通过以上步骤，我们成功创建了一个简单的互动欢迎消息脚本。这个示例不仅展示了如何使用 if-else 语句，还结合了 prompt 、 confirm 和 alert 等基本的用户交互函数，使网页更加生动和友好。

接下来，我们将进一步探讨如何优化和扩展这个示例，以满足更复杂的需求。同时，我们还将介绍如何使用 switch 语句和其他条件语句来增强脚本的功能。此外，我们还会讨论如何处理用户输入的异常情况，确保脚本的健壮性和用户体验。

6. 优化与扩展

在实际应用中，我们可能需要对这个简单的欢迎消息脚本进行优化和扩展，以满足更复杂的需求。下面我们将介绍几种常见的优化和扩展方法。

6.1 输入验证

为了提高用户体验和脚本的健壮性，我们可以添加输入验证，确保用户输入的名字不是空字符串或无效字符。以下是改进后的代码： 

function wlcmmsg() {
    var name = prompt('What is your name?', '');

    // 输入验证
    if (name === "" || name === null) {
        alert('Please enter a valid name.');
        wlcmmsg(); // 重新询问
        return;
    }

    var correct = confirm('Are you sure your name is ' + name + '?');
    if (correct == true) {
        alert('Welcome ' + name);
    } else {
        wlcmmsg(); // 如果用户不确定，重新询问
    }
}

6.2 使用 switch 语句

除了 if-else 语句，我们还可以使用 switch 语句来处理多种情况。假设我们想根据用户输入的名字显示不同的欢迎消息，可以这样做： 

function wlcmmsg() {
    var name = prompt('What is your name?', '');

    // 输入验证
    if (name === "" || name === null) {
        alert('Please enter a valid name.');
        wlcmmsg(); // 重新询问
        return;
    }

    var correct = confirm('Are you sure your name is ' + name + '?');
    if (correct == true) {
        switch (name.toLowerCase()) {
            case 'john':
                alert('Welcome John! How are you doing today?');
                break;
            case 'jane':
                alert('Welcome Jane! Hope you had a great day!');
                break;
            default:
                alert('Welcome ' + name + '! Nice to meet you.');
        }
    } else {
        wlcmmsg(); // 如果用户不确定，重新询问
    }
}

6.3 处理异常情况

为了确保脚本的健壮性，我们需要处理一些异常情况。例如，用户可能关闭了 prompt 或 confirm 对话框，这时我们需要捕获这些异常并做出适当的响应。以下是改进后的代码： 

function wlcmmsg() {
    try {
        var name = prompt('What is your name?', '');

        // 输入验证
        if (name === "" || name === null) {
            throw new Error('Please enter a valid name.');
        }

        var correct = confirm('Are you sure your name is ' + name + '?');
        if (correct == true) {
            alert('Welcome ' + name);
        } else {
            wlcmmsg(); // 如果用户不确定，重新询问
        }
    } catch (error) {
        alert(error.message);
        wlcmmsg(); // 重新询问
    }
}

7. 进阶应用

在实际开发中，我们可能会遇到更复杂的需求，例如根据用户输入的名字显示个性化的欢迎消息，或者根据用户的选择跳转到不同的页面。下面我们将介绍一些进阶的应用场景。

7.1 个性化欢迎消息

我们可以根据用户输入的名字显示个性化的欢迎消息。例如，如果用户输入的是“John”，我们可以显示一条特别的欢迎消息。以下是实现代码： 

function wlcmmsg() {
    var name = prompt('What is your name?', '');

    // 输入验证
    if (name === "" || name === null) {
        alert('Please enter a valid name.');
        wlcmmsg(); // 重新询问
        return;
    }

    var correct = confirm('Are you sure your name is ' + name + '?');
    if (correct == true) {
        if (name.toLowerCase() === 'john') {
            alert('Welcome John! How are you doing today?');
        } else {
            alert('Welcome ' + name + '! Nice to meet you.');
        }
    } else {
        wlcmmsg(); // 如果用户不确定，重新询问
    }
}

7.2 页面跳转

根据用户的选择，我们可以跳转到不同的页面。例如，如果用户选择了“确定”，我们可以跳转到一个欢迎页面；如果用户选择了“取消”，我们可以跳转到一个错误页面。以下是实现代码： 

function wlcmmsg() {
    var name = prompt('What is your name?', '');

    // 输入验证
    if (name === "" || name === null) {
        alert('Please enter a valid name.');
        wlcmmsg(); // 重新询问
        return;
    }

    var correct = confirm('Are you sure your name is ' + name + '?');
    if (correct == true) {
        alert('Welcome ' + name);
        window.location.href = 'welcome.html'; // 跳转到欢迎页面
    } else {
        window.location.href = 'error.html'; // 跳转到错误页面
    }
}

8. 用户体验优化

为了提升用户体验，我们可以对脚本进行一些优化。例如，我们可以使用 CSS 来美化对话框，或者使用更友好的提示信息。以下是优化后的代码： 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <title>The Welcome Message - Javascript</title>
    <script type="text/javascript">
        function wlcmmsg() {
            var name = prompt('What is your name?', '');

            // 输入验证
            if (name === "" || name === null) {
                alert('Please enter a valid name.');
                wlcmmsg(); // 重新询问
                return;
            }

            var correct = confirm('Are you sure your name is ' + name + '?');
            if (correct == true) {
                alert('Welcome ' + name);
            } else {
                wlcmmsg(); // 如果用户不确定，重新询问
            }
        }
    </script>
    <style type="text/css">
        body {
            background-color: #00aac5;
            color: #000;
        }
        .prompt-box {
            font-size: 18px;
            font-weight: bold;
        }
    </style>
</head>
<body onload="wlcmmsg()" onunload="alert('Goodbye ' + name)">
    <p class="prompt-box">
        This script is dual-licensed under both,
        <a href="http://www.book.org/zen/xyz_Documentation_License">FDL</a> and
        <a href="XYZ General Public License">GPL</a>. 
        See <a href="http://textbook.zenbook.org/zen/Programming:Computer">zenbook</a>
    </p>
</body>
</html>

8.1 使用 CSS 美化对话框

通过添加 CSS 类 .prompt-box ，我们可以使对话框的文字更大、更醒目，从而提升用户体验。

8.2 更友好的提示信息

我们可以使用更友好的提示信息来引导用户。例如，当用户输入空字符串时，我们可以提示他们“请输入您的名字”，而不是简单的“请输入有效的名字”。

9. 总结与展望

通过本文的介绍，我们详细讲解了如何使用 if-else 语句创建一个互动的欢迎消息脚本。我们不仅展示了如何使用 prompt 、 confirm 和 alert 等基本的用户交互函数，还介绍了如何通过输入验证、 switch 语句、异常处理等方式优化和扩展脚本。此外，我们还探讨了如何根据用户输入显示个性化的欢迎消息以及如何根据用户选择跳转到不同的页面。

通过这些改进，我们可以创建更加健壮和友好的网页应用程序，提升用户体验。在未来，我们可以进一步探索更多高级的 JavaScript 功能和技术，如 AJAX、异步编程等，以实现更复杂和高效的网页应用。

为了更好地理解用户交互流程，我们可以用表格来总结各个步骤：

步骤 描述
页面加载 触发 onload 事件，调用 wlcmmsg 函数
提示用户输入名字 使用 prompt 函数获取用户的名字
确认用户输入 使用 confirm 函数确认用户输入的名字是否正确
显示欢迎消息 如果用户确认无误，使用 alert 函数显示欢迎消息
重新询问 如果用户不确定，重新调用 wlcmmsg 函数
页面关闭 触发 onunload 事件，显示告别消息

通过以上步骤，我们成功创建了一个简单而实用的互动欢迎消息脚本。这个示例不仅展示了如何使用 if-else 语句，还结合了多种用户交互函数，使网页更加生动和友好。

标签
#JavaScript # if-else # 用户交互

相关推荐

Ubuntu 24.04 搭建 Squid 代理服务器终极指南：从入门到 HTTPS 缓存AI模型

本文详细指导在Ubuntu 24.04系统部署Squid代理服务器，实现AI大模型文件的高效缓存。重点内容包括：1) 安装squid及必备的squid-openssl扩展包；2) 配置HTTPS拦截(SSL-Bumping)功能，创建CA证书和SSL数据库；3) 优化缓存策略，设置4TB存储空间并强制缓存常见大文件格式；4) 结合华为防火墙实现透明代理。文章特别强调实际部署中的关键注意事项和常见错误解决方案，如证书路径配置、权限设置等问题，帮助用户快速搭建企业级缓存代理服务。

zlt315的博客 1920

LAMMPS实战：如何用ReaxFF力场模拟碳氢化合物热解（附完整脚本）

本文提供了一份使用LAMMPS软件中ReaxFF反应力场模拟碳氢化合物热解过程的完整实战指南。内容涵盖从环境准备、力场参数选择、能量最小化，到升温恒温动力学模拟的完整脚本编写，并介绍了基于轨迹文件的产物分析方法，帮助计算化学与材料科学研究者快速上手这一关键的分子动力学仿真技术。

soda5的博客 1091

SAP Script表单开发中ABAP preform方法的实战应用与调试技巧

本文深入探讨了在SAP Script表单开发中调用ABAP程序（preform方法）的实战应用与调试技巧。通过一个获取供应商版本名称的实例，详细讲解了如何在SE71中嵌入PERFORM指令、编写ABAP子程序进行数据查询与处理，并重点介绍了使用SAP Script Debugger进行高效调试的方法，帮助开发者灵活扩展表单功能，实现复杂业务逻辑。

o0p1q2r3的博客 551

【雷达通信】雷达信号处理仿真【含Matlab源码 2509期】

雷达信号处理仿真 完整的代码，方可运行；可提供运行操作视频！适合小白！

订阅付费专栏Matlab（奶茶价版），可赠送奶茶价版付费专栏指定代码1份； 903

《HiVT: Hierarchical Vector Transformer for Multi-Agent Motion Prediction》论文阅读之HiVT

目录摘要1.介绍2.相关工作3.方法3.1. 总体框架3.2 场景表示 3.3 分层向量Transformer3.3.1 局部编码器3.3.2 全局交互模块3.3.3 多模态未来解码器3.4 训练4.实验4.1 实验设置4.2 消融研究 4.3. 结果5.结论 准确预测周围交通参与者的未来运动对于自动驾驶车辆的安全至关重要。最近，矢量化方法由于能够捕捉交通场景中的复杂交互而在运动预测领域占据主导地位。然而，现有的方法忽略了问题的对称性并且受到昂贵的计算成本的影响，面临着在不牺牲预测性能的情况

Gavinmiaoc的博客 3337

鱼鹰优化算法（OOA）详解：从猛禽捕食智能到优化算法实现

鱼鹰优化算法（Osprey Optimization Algorithm, OOA）是2023年提出的一种新型元启发式优化算法，灵感来源于鱼鹰（一种中型猛禽）高效的捕食策略。算法模拟了鱼鹰从空中识别水下鱼类位置并俯冲捕食，然后将捕获的鱼带至安全位置享用的全过程，以此抽象出全局探索和局部开发两个核心阶段。OOA算法具有参数少、结构简单、收敛速度快、全局寻优能力强等特点。自提出以来，已在函数优化、机器学习参数调优（如CatBoost模型）、路径规划等多个领域展现出良好性能，为解决复杂优化问题提供了新的有效工具。

qq_42212808的博客 272

【ZYNQ】VDMA 的使用

VDMA, Video Direct Memory Access 是 Xilinx 官方提供的高速内存存取 IP，采用 AXI4-Stream 与 AXI4 协议实现存储映射接口（Memory Map）与非存储映射接口（Non-Memory Map）接口的转换，主要用于视频数据缓存，同时提供帧缓存与帧同步控制功能。本文主要介绍 AXI VDMA 的配置与使用方法。

洋洋Young的博客 1576

Multisim14.0仿真（五十九）基于74LS161的24进制计数器应用设计

它具有同步预置、异步清零功能，支持并行数据加载，并可在计数使能控制下进行二进制计数。：低电平时，在下一个时钟上升沿加载输入数据（A, B, C, D）。（多个 74LS161D 串联构成 8 位、12 位等更长计数器）。低电平时，下一个时钟上升沿加载输入数据（A, B, C, D）。：低电平有效，立即清零计数器（不受时钟控制）。均为高电平时，每个时钟上升沿计数。：两者均为高电平时，计数器才能递增。：立即清零计数器（不受时钟控制）。（通过预置初始值控制计数范围）。（计数范围：0 ~ 15，即。

corlin6688的博客 4758

OV9734 DATASHEET，完整规格书

OV9734完整规格书，包括电气参数，尺寸规格，寄存器配置表等

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

老版QQ原生表情gif动态

这是老版的QQ表情，不过全是动态的的，Windows照片查看器是不会动的，可以右击用浏览器打开查看，再说一遍是老版的，只是分享给宁愿用老版也要动态的人。

VC中sqlite的使用

在VC中对sqlite的使用，实现数据库大批数据的快速插入，读取数据库中的数据在ListCtrl中显示
上一篇： 55、Hyper-V 与 VMware 技术对比全解析
下一篇： 17、利用NetBoot、NetInstall和NetRestore管理客户端计算机
点赞 0
评论 0
书签 书签 0
pepper
pepper
博客等级 码龄24年 118粉丝 1792原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值