jQuery实现王者荣耀英雄列表
2024-05-12 16:06:42
用jQuery实现了王者荣耀的英雄列表，包含对英雄的增删改查功能，并且实现了本地存储功能
一、作品介绍
1、作品使用到的技术栈
- 开发工具：Vscode
- 语言：html、css、jQuery
2、作品实现功能
- 可以增加各种英雄到列表中
- 可以将英雄从列表中删除
- 可以在列表中搜索想要展示的英雄到列表
- 点击英雄名字可以修改英雄
- 所有数据都实现了在本地存储
二、作品展示
作品主页
删除英雄
查找英雄界面
修改英雄
三、作品代码
项目基本结构
html代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../css/hero.css"><script src="../js/jquery.min.js"></script><script src="../js/hero.js"></script>
</head><body><header><section><label for="title"><img src="../images/logo.png" alt=""></label><input type="text" id="search" name="search" placeholder="查找英雄" required="required" autocomplete="off"><input type="text" id="title" name="title" placeholder="添加英雄" required="required" autocomplete="off"></section></header><section class="hero-box"><div class="max-box"><div class="box-tit"><div class="have">共3个英雄</div><div class="return">返回列表</div><h3>英雄列表</h3><div class="del">全部删除</div></div><div class="box-content"><div class="main-list"><ol></ol><ul></ul></div></div></div></section></body></html>jQuery代码
$(function() {// 按下回车 把完整的数据 存储到本地存储里面// 存储的数据格式 var hero = [{title : "xxx"}]load();// 添加英雄$("#title").on("keydown", function(event) {if (event.keyCode === 13) {if ($(this).val() == "" || $(this).val() == " ") {alert("请输入英雄名");} else {$("h3").text("英雄列表");// 清空 ol 内容$("ol").empty();// 先读取本地存储原来的数据var local = getDate();// 把 local 数组进行更新数据 把最新的数据追加给 local 数组local.push({ title: $(this).val() });// 把这个数组 local 存储给本地存储 传递参数是为了把 local 传递给函数saveDate(local);// hero 本地存储数据渲染加载到页面load();// 清空 input 内容$(this).val("");}}});// 查找英雄$("#search").on("keydown", function(event) {if (event.keyCode === 13) {if ($(this).val() == "" || $(this).val() == " ") {alert("请输入英雄名");} else {// 修改标题$("h3").text("查找结果");// 把返回列表给显示出来$(".return").show();// 先读取本地存储原来的数据var data = getDate();var count = 0;$("ol, ul").empty();// 遍历数组$.each(data, function(i, n) {if ($("#search").val() == n.title) {// $("ul").empty();$("ol").prepend("<li><img src = '../images/" + n.title + ".webp' alt = ''><div class = 'list-cont'><span>" + n.title + "</span></div><div class = 'small-del' id = " + i + "></div></li>")count++;}})$(".have").text("共" + count + "个英雄");// 清空 input 内容$("#search").val("");}}})// 添加返回列表$(".return").on("click", function() {// 刷新页面location.reload(true);});// 删除全部$(".del").click(function() {// 先获取本地存储var data = getDate();// 得到 data 的长度var index = data.length;// 删除数据 从第 0 个开始删，删除 index 个（数组的长度）data.splice(0, index);// 保存到本地存储saveDate(data);// 重新渲染页面load();});// 读取本地存储的数据function getDate() {var data = localStorage.getItem("hero");if (data !== null) {// 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的return JSON.parse(data);} else {return [];}}// 保存本地存储数据function saveDate(data) {localStorage.setItem("hero", JSON.stringify(data));}// 渲染加载数据function load() {// 读取本地存储数据var data = getDate();// 遍历之前先要清空 ul 里面的元素内容$("ul").empty();var count = 0;// 遍历这个数据$.each(data, function(i, n) {$("ul").prepend("<li id = " + i + "><img src = '../images/" + n.title + ".webp' alt = ''><div class = 'list-cont'><span>" + n.title + " </span> <input type='text' id='change' placeholder='' name='change' required='required' autocomplete='off' ></div><div class = 'small-del' id = " + i + "><img src = '../images/del.png' ></div></li>")count++;})$(".have").text("共" + count + "个英雄");// hero 删除单个操作$("li").on("click", ".small-del", function() {// 先获取本地存储var data = getDate();// 修改数据var index = $(this).attr("id"); // 获取自定义属性 得到索引号data.splice(index, 1);// 保存到本地存储saveDate(data);// 重新渲染页面load();})// 修改操作$("span").on("dblclick", function() {var index = $(this).parents("li").attr("id");$(this).hide();$(this).siblings("#change").show();// 当输入框出来的时候将光标锁定到输入框中 运用 focus() 方法$(this).siblings("#change").focus();// $("#change").focus(); 吗 $(this).siblings("#change").on("keydown", function(event) {if (event.keyCode === 13) {var data = getDate();data[index].title = $(this).val(); // 数组的 title 属性设置为输入的内容// 保存到本地存储saveDate(data);// hero 本地存储数据渲染加载到页面load();// 清空 input 内容$(this).val("");}})});}})下面附上作品源码，有需要的小伙伴可以下载
链接: https://pan.baidu.com/s/1b0x_oJABCwtFkBROEfAgMQ?pwd=gkvy
提取码: gkvy
jQuery实现王者荣耀英雄列表相关推荐
- python入门之爬虫------抓取王者荣耀英雄列表
抓取王者荣耀英雄列表及其对应的全部皮肤名称 目标 在王者荣耀官网抓取王者荣耀英雄列表,每个英雄拥有的皮肤数量,及其对应的全部皮肤名称. 过程分析 首先获得官网的herolist.json文件,里面包含 ...
- jquery制作王者荣耀英雄详情表
王者荣耀英雄详情表 HTML:数据表格 <table class="tab"><thead><tr><th>编号</th> ...
- 抓取王者荣耀英雄列表的爬虫笔记(python+requests)
在开始这个内容之前,我们先来一张效果图: 实现它,需要几个过程: 调用王者荣耀助手的数据接口获取所有英雄的图片 通过迭代,把所有图片转换成二进制数据流 把这些数据导入MySQL数据库中 由于项目需求, ...
- 基于jQuery实现王者荣耀英雄自定义增删改查功能 源码
使用JSON实现存储本地功能,此页仅有js部分代码 作品示例图 增 给添加按钮添加点击事件,获取输入框的值,添加判断,当值为空时不添加,否则将输入的值存储到本地的数组中,然后保存到本地 //----- ...
- 小案例：搭建简易版王者荣耀英雄购买商城网页版
目录 一.网页赏析: 二.代码分三部分: 1.html代码: 2.main.css赏析: 3.初始化reset.css代码: 三.主要素材下载地址: 一.网页赏析: 二.代码分三部分: 1.html ...
- python爬虫入门------王者荣耀英雄及皮肤数据爬取项目
王者荣耀英雄及皮肤数据爬取项目 一:做前需知 笔者这段学习了一些爬虫的知识,然后做了一个小项目.接下来,我会把项目的流程展示出来. 运行环境:python 3.6.3.pycharm 2019-3-3 ...
- Python爬取王者荣耀英雄的皮肤数据并下载皮肤图片项目
Python爬取王者荣耀英雄的皮肤数据,并下载皮肤图片!高清的图片用来做桌面也不错哟~ 网址:https://pvp.qq.com/web201605/herolist.shtml 1.获得英雄信息, ...
- 安卓开发笔记（八）—— 王者荣耀英雄大全 数据库部分
中山大学数据科学与计算机学院本科生实验报告 (2018年秋季学期) ps:如果需要该项目的王者荣耀数据库资源,在下面留言即可 数据库在下面这个GITHUB链接里面,觉得有用的,兄弟给个star谢谢! ...
- python爬虫------王者荣耀英雄及技能爬取并保存信息到excel
目录 前言 一.准备工作 二.具体步骤 1.获取王者荣耀官网所有英雄所在页面的网页的源代码 2.获取王者荣耀各个英雄的具体网址 response.textd的部分内容如下 3.提取其中的数据 4.把数 ...
最新文章
- jquery中的load()方法使用要点
- java环境变量设置详解_JAVA环境变量配置详解(Windows)
- 【Java】常见的异常和Throwable类
- 435. 无重叠区间（JavaScript）
- ubuntu10.10升级到11.4出错之问题解决
- C#时间的味道——任时光匆匆我只在乎你
- net 进阶学习 WebApi (2)
- 【图神经网络入门】GAT图注意力网络
- hadoop安装及简单的使用
- R语言KNN分类问题（kknn/class包在iris数据集上的实例）
- 解决conda install numpy 报错
- 北京商标权律师讲解商标使用应该注意什么事项？
- Charles使用及常用功能介绍
- Unity2D入门（八）：游戏场景中的UI（主菜单与暂停菜单）
- 宝哥面试题分享(07): Java中间件面试题
- STDERR: error: unable to open preload file “/etc/sysctl.d/90-omnibus-gitlab-net.core.somaxconn.conf“
- 改变PPT导出图片分辨率
- JavaWeb教务管理系统（选课评教，框架SpringMvc+Hibernate）
- 罗斯蒙特248温度变送器安装指南
- 神马VS百度，移动互联网战争全面升级!