21xrx.com
2025-03-16 13:06:06 Sunday
文章检索 我的文章 写文章
JS实现英雄联盟角色介绍弹窗
2023-06-17 15:55:38 深夜i     13     0
JavaScript alert弹窗 英雄联盟

英雄联盟(League of Legends,简称LOL)是一款在全球范围内非常受欢迎的多人在线战术竞技游戏。如果你是一名LOL的玩家,你一定非常熟悉各种英雄的技能和角色特点。而现在,我们将利用JS来实现一款英雄联盟角色介绍弹窗的功能,让你在学习游戏知识的同时,更方便快捷地查看每个英雄的详细信息。下面就让我们开始吧!

首先,我们需要在HTML中添加一个按钮,并绑定一个点击事件来触发弹窗的显示。代码如下所示:

查看英雄信息

接下来,我们需要编写JS代码来实现弹窗的功能。在JS中,我们可以使用alert()函数来显示一个消息框。而我们想要显示的消息就是英雄的详细信息。为了更好地展示英雄的信息,我们可以利用JS对象来存储每个英雄的详细属性。代码如下所示:

// 定义英雄属性的对象
var hero_info = {
  "盲僧":
    "移动速度": 350,
  "寒冰":
    "出场位置": "下路射手"
  ,
  "火男":
    "防御力": 20
};

在定义好英雄属性的对象后,我们需要编写showHero()函数来显示英雄信息。在这个函数中,我们可以通过prompt()函数来获取用户输入的英雄名称,并根据该名称从hero_info对象中获取英雄的详细属性,最后利用alert()函数来显示这些属性。代码如下所示:

// 显示英雄信息的函数
function showHero() {
  // 获取用户输入的英雄名称
  var hero_name = prompt("请输入英雄名称:");
  // 判断英雄属性对象中是否有该英雄
  if (hero_name in hero_info) {
    // 获取该英雄的属性对象
    var hero_attrs = hero_info[hero_name];
    // 构建英雄信息的字符串
    var hero_info_str = "英雄名称:" + hero_name + "\n";
    hero_info_str += "攻击力:" + hero_attrs["攻击力"] + "\n";
    hero_info_str += "防御力:" + hero_attrs["防御力"] + "\n";
    hero_info_str += "移动速度:" + hero_attrs["移动速度"] + "\n";
    hero_info_str += "出场位置:" + hero_attrs["出场位置"] + "\n";
    // 显示英雄信息
    alert(hero_info_str);
  } else {
    alert("抱歉,没有找到该英雄的信息!");
  }
}

现在,我们已经完成了整个程序的编写。测试一下效果吧!当我们点击“查看英雄信息”按钮后,弹出一个输入框,输入想要查看的英雄名称,就可以看到该英雄的详细属性信息了。

  
  

评论区