21xrx.com
2024-09-20 06:36:30 Friday
登录
文章检索 我的文章 写文章
JS实现英雄联盟角色介绍弹窗
2023-06-17 15:55:38 深夜i     --     --
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("抱歉,没有找到该英雄的信息!");

  }

}

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

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复