jquery+Bootstrap作品实现教程

一、需求分析

要求：作品实现本地存储和增删改查

由于当时没有规定作品必须写什么，所以这时候就是发挥创意，这里写了一个原神角色展示页面，在这个基础上结合作品要求，与官网页面有差距。

二、最终结果

三、代码实现

1. 由于用到了jQuery和Bootstrap，所以要先去官网引入相关标签

因为我的Bootstrap是下载下来的，所以直接是本地路径，jQuery是引用网上的

2. HTML代码

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

</ul>

</div>

</div>

</ul>

<li>

魈

</div>

CV：

kinsen

</div>

点击修改角色cv

</div>

</li>

</ul>

</li>

</div>

</ul>

</div>

</div>

<form>

<div>

</div>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

<form>

</div>

</div>

</form>

</div>

</div>

</div>

</div>

</body>

</html>

3. css代码

body{

margin: 0;

padding: 0;

}

ul,li,ol{list-style-type: none;padding: 0;margin: 0;}

a{text-decoration: none;}

.container{

margin: 0;

width: 100%;

max-width: 100%;

padding: 0;

}

.header{

background-color: rgba(90, 90, 90,.6);

width: 100%;

height: 66px;

position: relative;

z-index: 4;

}

.header-wrap{

background-color: rgba(90, 90, 90,.6);

width: 100%;

height: 66px;

}

.header-wrap ul{

float: left;

display: flex;

}

.header-wrap ul li{

font-size: 20px;

font-weight: normal;

font-stretch: normal;

letter-spacing: 0px;

color: #ccc;

text-align: center;

cursor: pointer;

margin: 0 30px ;

height: 66px;

line-height: 66px;

}

.header-active{

border-top: 5px solid #69e0ff;

}

.header-wrap-found{

float: right;

margin: 15px 30px 0 0;

}

.header-wrap-found input{

background-color: rgb(194, 194, 194);

height: 30px;

line-height: 30px;

border-radius: 5px;

outline: none;

}

.header-wrap-found button{

background-color: rgb(194, 194, 194);

height: 35px;

line-height: 30px;

border-radius: 5px;

}

.center{

position: relative;

top: -70px;

bottom: 0;

left: 0;

right: 0;

}

.center img{

width: 100%;

height: 760px;

}

.center-city{

position: absolute;

top: 300px;

left: 40px;

position: absolute;

z-index: 9;

width: 370px;

height: 100%;

box-sizing: border-box;

height: 216px;

}

.center-city li{

padding-left: 30px;

cursor: pointer;

height: 54px;

line-height: 40px;

font-size: 18px;

color: #fff;

width: 100%;

background-repeat: no-repeat !important;

background-position: 20px 0 0 0;

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpERTgyOUEzQkFBMDQxMUU5QjQ2REMwOUFGODE3Qzc5MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpERTgyOUEzQ0FBMDQxMUU5QjQ2REMwOUFGODE3Qzc5MiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRFODI5QTM5QUEwNDExRTlCNDZEQzA5QUY4MTdDNzkyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRFODI5QTNBQUEwNDExRTlCNDZEQzA5QUY4MTdDNzkyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+8pIp1gAAAHhJREFUeNrs18EKgCAQRVGNftsJ6sNHW0QuXNUzBroPZiUMB0ZFs7unyFlS8AAECBAgQIAAAQLsY62KtOP5YBXV5neKqu8MnBQ5C3fF3vZX7EF/uPbpHrTIIx4hZYdkFV4IezfWQ9U08y8GCBAgQIAAAQL8NbAKMAD/HXfdYwQY6gAAAABJRU5ErkJggg==) ;

}

#center-active{

width: 370px;

height: 54px;

line-height: 40px;

padding-left: 60px;

background: url(data:image/png;base64,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UmVhZHlxyWU8AAADIWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2NDFFRjZEN0IyQUUxMUU5ODU1QkFCMjQ5NTREREZBOSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2NDFFRjZENkIyQUUxMUU5ODU1QkFCMjQ5NTREREZBOSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTQ2NzVEOTNBRDNBMTFFOTg1MDU5MEQwQjhBQTc1MDAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTQ2NzVEOTRBRDNBMTFFOTg1MDU5MEQwQjhBQTc1MDAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Xwo20AAAYAklEQVR42uydf6wc11XH77k7u88v9rPfSwJJm8hOnN9pQtSkVP1BS9SWUCIQIEWkWIUqoiogQAKkIjV/AIIi0ar0rwohtUVKSdJW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);

}

.center-little{

display: flex;

position: absolute;

left: 0;

/* top: 0; */

bottom: 4px;

width: 100%;

height: 230px;

background-color: rgba(90, 90, 90,.4);

}

.center-little li img{

width: 106px;

height: 106px;

}

.person-name{

color: white;

font-size: 20px;

width: 106px;

height: 30px;

line-height: 30px;

text-align: center;

cursor: pointer;

}

.little-list{

width: 1000px;

margin: 0 auto;

box-sizing: border-box;

padding-top: 35px;

overflow-x: scroll;

}

.center-porsen{

position: absolute;

top: 0px;

left: 250px;

width: 1300px;

height: 100%;

}

.big-name{

position: absolute;

top: 200px;

left: 200px;

font-size: 80px;

color: white;

width: 400px;

height: 400px;

}

.person-cv{

position: absolute;

top: 350px;

left: 200px;

font-size: 30px;

border: 2px solid #f79b50;

background-color: #f3a86b;

width: 200px;

height: 50px;

line-height: 50px;

/* text-align: center; */

}

.cv-name{

width: 130px;

position: absolute;

top: 0px;

left: 70px;

}

.little-list li{

float: left;

margin-right: 40px;

}

.rev{

font-size: 16px;

position: absolute;

top: 60px;

left: 0;

}

.revl{

font-size: 18px;

color: white;

position: absolute;

left: 70px;

top: 55px;

}

.delet{

margin-left: 30px;

}

3. js代码

//本地存储数组

function getList() {

let data = localStorage.getItem('todolist');

if (data !== null) {

//本地存储的数据是字符串格式的，但是要转化对象格式

// console.log( JSON.parse(data));

return JSON.parse(data);

} else {

return [];

}

var flag = false;

//数组去重

function arrsa(newInput, flag) {

let data = getList();

for (let i = 0; i < data.length; i++) {

if (data[i].name == newInput) {

flag = true;

break;

}

return flag;

}

load();

//渲染

function load() {

let data = getList();

for (let i = 0; i < data.length; i++) {

if (data[i].disp == true) {

$(".big-name").text(data[i].name)

$(".cv-name").text(data[i].cv1)

$("#big-picture").attr("src", data[i].pot)

}

$(".little-list").empty();

$.each(data, function (i, n) {

$(".little-list").append(`<li id = ` + i + ` class="list">

</li>

})

}

//保存本地存储的数据

function setDat(dat) {

localStorage.setItem('todolist', JSON.stringify(dat));

}

$(document).on("click", ".aad", function () {

let data = getList();

let inputname = $("#name").val();

let inputcv = $("#cv").val();

let littleImg = '/原神/jq_原神/小头像_' + inputname + '.png'

let imgUrl = "/原神/jq_原神/" + inputname + ".png";

if ($("#name").val().trim() !== '' && $("#cv").val().trim() != '' && !arrsa(inputname, flag)) {

// console.log('dsf');

data.push({

name: inputname,

cv1: inputcv,

pot: imgUrl,

litte: littleImg,

disp: false

})

}

setDat(data);

load();

})

//这是修改功能

$(document).on("click", ".olk", function () {

let data = getList();

// let oldCv = $("#reusr").val();

// console.log($("#reusr").val());

let newCv = $("#reusrnum").val();

if ($("#reusr").val().trim() !== '' && $("#reusrnum").val().trim() !== '') {

for (let i = 0; i < data.length; i++) {

if ($("#reusr").val() == data[i].cv1) {

data[i].cv1 = newCv;

break;

}

setDat(data);

load();

} else {

alert('输入值不能为空');

}

})

//这是删除功能

$(document).on("click", ".delet", function () {

// alert('被双击了');

let data = getList();

let m = $(this).index(".delet");

console.log(m);

data.splice(m, 1);

if (data[m].disp == true) {

for (let i = 0; i < data.length; i++) {

data[i].disp = false;

}

data[m - 1].disp = true;

$(".big-name").text(data[m - 1].name)

$(".cv-name").text(data[m - 1].cv1)

$("#big-picture").attr("src", data[m - 1].pot)

}

setDat(data);

load();

})

//点击将小头像显示为大图

$(document).on("click", ".list", function () {

// console.log(m);

let data = getList();

let m = $(this).index(".list");

for (let i = 0; i < data.length; i++) {

data[i].disp = false;

}

data[m].disp = true;

$(".big-name").text(data[m].name)

$(".cv-name").text(data[m].cv1)

$("#big-picture").attr("src", data[m].pot)

setDat(data);

load();

})

//查找功能

$(document).on("click", "#found", function () {

let data = getList();

// console.log($("#found-person").val());

for (let i = 0; i < data.length; i++) {

data[i].disp = false;

if (data[i].name == $("#found-person").val()) {

data[i].disp = true;

$(".big-name").text(data[i].name)

$(".cv-name").text(data[i].cv1)

$("#big-picture").attr("src", data[i].pot)

}

// $("#found-person").val() = ''

setDat(data);

load();

})

四、概述

1. 作品中需要的图片是从官网下载的

2. 页面不可以在“蒙德”和“璃月”或者“稻妻”之前切换，上面的导航栏也不能切换，原因是，作品不需要，另外时间紧张

3. 一点点题外话，我爱胡桃

jquery+Bootstrap作品实现教程相关推荐

禁用/启用按钮和链接的最简单方法是什么（jQuery + Bootstrap）
本文翻译自:What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap) Sometimes I u ...
25个非常棒的jQuery滑块插件和教程
图像滑块和幻灯片效果,已成为网页设计的基本要素.它们以有趣的方式展示视觉内容.如果你一直想知道这是如何实现的,那么这里的25个非常棒的 jQuery 图片滑块制作教程将帮助您实现这种效果. 1.Cre ...
类操作是什么意思？jQuery的类操作教程分享
类操作就是通过操作元素的类名进行元素样式操作,当元素样式比较复杂时,如果通过css()方法实现,需要在CSS里编写很长的代码,既不美观也不方便.而通过写一个类名,把类名加上或去掉就会显得很方便.下面通 ...
推荐40个简单的 jQuery 导航插件和教程【下篇】
在这篇文章中,我为大家收集了40款非常棒的 jQuery 导航插件和教程.导航作为网站重要的组成部分,能够帮助用户找到他们想要的内容,因此导航设计的好坏决定了用户能够在你的网站停留更长的时间,浏览更多 ...
40个新鲜出炉的 jQuery 插件和免费教程【上篇】转载自：梦想天空
40个新鲜出炉的 jQuery 插件和免费教程[上篇] 转载于:https://www.cnblogs.com/chenjunLovefan/archive/2012/07/23/2605003.ht ...
jQuery - Bootstrap 3 and Youtube in Modal
1. 效果一 HTML <a href="#" class="btn btn-default" data-toggle="modal" ...
8个很棒的 jQuery 倒计时插件和教程
jQuery 是最流行也是使用最广泛的 JavaScript 框架,它简化了 HTML 文档操作,事件处理,动画效果和 Ajax 交互.下面向大家分享8个优秀的 jQuery倒计时插件和教程. jQu ...
jquery+bootstrap 创建日历表格
jquery创建日历表格 jquery+bootstrap 创建日历表格 #写的不太好欢迎留言赐教 <meta charset="utf-8"><meta na ...
jQuery+Bootstrap美化弹出框
项目中很多弹出的警告框是通过alert()弹出的浏览器警告框,样式比较丑陋且和页面使用的Bootstrap框架样式不吻合,因此需要修改弹出框样式. 采用jQuery+Bootstrap的方式这样弹出的 ...
ie8浏览器的兼容性问题及解决（jquery,bootstrap）
ie8浏览器的兼容性问题及解决(jquery,bootstrap) 参考文章: (1)ie8浏览器的兼容性问题及解决(jquery,bootstrap) (2)https://www.cnblogs. ...

jquery+Bootstrap作品实现教程

jquery+Bootstrap作品实现教程相关推荐

最新文章

热门文章