21xrx.com
2024-12-23 02:09:08 Monday
登录
文章检索 我的文章 写文章
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']}}
()
回复
回复