By GokiSoft.com|
19:24 27/03/2021|
Học JQuery
[Share Code] Thiết kế website truyện tranh - Lập trình Bootstrap/jQuery 2021-03-27
#index.html
<!DOCTYPE html>
<html>
<head>
<title>Web Truyen Tranh</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="bi bi-house-fill"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cuoi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tho</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Truyen Ma</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Truyen Teen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tieu Thuyet</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tam Su</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tim Truyen</a>
</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top: 10px;">
<div class="row">
<div class="col-md-3">
<button class="btn btn-lg btn-info">Dang Truyen Ngan</button>
<button class="btn btn-lg btn-danger">Dang Truyen Ngan</button>
<button class="btn btn-lg btn-warning">Dang Truyen Ngan</button>
<button class="btn btn-lg btn-success">Dang Truyen Ngan</button>
<button class="btn btn-lg btn-primary">Dang Truyen Ngan</button>
<button class="btn btn-lg btn-info">Dang Truyen Ngan</button>
<button class="btn btn-lg btn-warning">Dang Truyen Ngan</button>
<button class="btn btn-lg btn-info">Dang Truyen Ngan</button>
<button class="btn btn-lg btn-success">Dang Truyen Ngan</button>
</div>
<div class="col-md-9">
<div class="row" id="result">
<!-- Start Item -->
<div class="col-md-3">
<p class="title">Trung Sinh Chi To Gia</p>
<div class="thumbnail" style="background-image: url('https://cn.i.cdn.ti-platform.com/cnapac/content/2017/showpage/ben-10/sa/showicon.png');">
<label class="top">0 Diem Vote</label>
<label class="bottom">10 Luot Xem</label>
</div>
</div>
<!-- Stop Item -->
<!-- Start Item -->
<div class="col-md-3">
<p class="title">Trung Sinh Chi To Gia</p>
<div class="thumbnail" style="background-image: url('https://cn.i.cdn.ti-platform.com/cnapac/content/2017/showpage/ben-10/sa/showicon.png');">
<label class="top">0 Diem Vote</label>
<label class="bottom">10 Luot Xem</label>
</div>
</div>
<!-- Stop Item -->
<!-- Start Item -->
<div class="col-md-3">
<p class="title">Trung Sinh Chi To Gia</p>
<div class="thumbnail" style="background-image: url('https://cn.i.cdn.ti-platform.com/cnapac/content/2017/showpage/ben-10/sa/showicon.png');">
<label class="top">0 Diem Vote</label>
<label class="bottom">10 Luot Xem</label>
</div>
</div>
<!-- Stop Item -->
<!-- Start Item -->
<div class="col-md-3">
<p class="title">Trung Sinh Chi To Gia</p>
<div class="thumbnail" style="background-image: url('https://cn.i.cdn.ti-platform.com/cnapac/content/2017/showpage/ben-10/sa/showicon.png');">
<label class="top">0 Diem Vote</label>
<label class="bottom">10 Luot Xem</label>
</div>
</div>
<!-- Stop Item -->
<!-- Start Item -->
<div class="col-md-3">
<p class="title">Trung Sinh Chi To Gia</p>
<div class="thumbnail" style="background-image: url('https://cn.i.cdn.ti-platform.com/cnapac/content/2017/showpage/ben-10/sa/showicon.png');">
<label class="top">0 Diem Vote</label>
<label class="bottom">10 Luot Xem</label>
</div>
</div>
<!-- Stop Item -->
<!-- Start Item -->
<div class="col-md-3">
<p class="title">Trung Sinh Chi To Gia</p>
<div class="thumbnail" style="background-image: url('https://cn.i.cdn.ti-platform.com/cnapac/content/2017/showpage/ben-10/sa/showicon.png');">
<label class="top">0 Diem Vote</label>
<label class="bottom">10 Luot Xem</label>
</div>
</div>
<!-- Stop Item -->
<!-- Start Item -->
<div class="col-md-3">
<p class="title">Trung Sinh Chi To Gia</p>
<div class="thumbnail" style="background-image: url('https://cn.i.cdn.ti-platform.com/cnapac/content/2017/showpage/ben-10/sa/showicon.png');">
<label class="top">0 Diem Vote</label>
<label class="bottom">10 Luot Xem</label>
</div>
</div>
<!-- Stop Item -->
<!-- Start Item -->
<div class="col-md-3">
<p class="title">Trung Sinh Chi To Gia</p>
<div class="thumbnail" style="background-image: url('https://cn.i.cdn.ti-platform.com/cnapac/content/2017/showpage/ben-10/sa/showicon.png');">
<label class="top">0 Diem Vote</label>
<label class="bottom">10 Luot Xem</label>
</div>
</div>
<!-- Stop Item -->
</div>
<!-- FORM -->
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header bg-info">
NHAP THONG TIN TRUYEN MOI
</div>
<div class="card-body">
<form method="post" id="MyForm">
<div class="form-group">
<label for="title">Tieu De:</label>
<input required="true" type="text" name="title" id="title" class="form-control" placeholder="Enter title">
</div>
<div class="form-group">
<label for="thumbnail">Thumbnail:</label>
<input required="true" type="text" name="thumbnail" id="thumbnail" class="form-control" placeholder="Enter thumbnail">
</div>
<div class="form-group">
<label for="vote">Diem Vote:</label>
<input required="true" type="number" name="vote" id="vote" class="form-control" placeholder="Enter vote">
</div>
<div class="form-group">
<label for="view">Luot Xem:</label>
<input required="true" type="number" name="view" id="view" class="form-control" placeholder="Enter view">
</div>
<button class="btn btn-success">THEM TRUYEN MOI</button>
</form>
</div>
</div>
</div>
</div>
<!-- FORM End -->
</div>
</div>
</div>
</body>
</html>#script.js
var dataList = []
$(function() {
json = localStorage.getItem('data_list')
if(json != null && json != "") {
dataList = JSON.parse(json)
}
//Hien thi du lieu ra
for (var i = 0; i < dataList.length; i++) {
obj = dataList[i]
$('#result').append(`<div class="col-md-3">
<p class="title">${obj.title}</p>
<div class="thumbnail" style="background-image: url('${obj.thumbnail}');">
<label class="top">${obj.vote} Diem Vote</label>
<label class="bottom">${obj.view} Luot Xem</label>
</div>
</div>`)
}
$('#MyForm').submit(function() {
title = $('#title').val()
thumbnail = $('#thumbnail').val()
vote = $('#vote').val()
view = $('#view').val()
obj = {
"title": title,
"thumbnail": thumbnail,
"vote": vote,
"view": view
}
dataList.push(obj)
$('#result').append(`<div class="col-md-3">
<p class="title">${title}</p>
<div class="thumbnail" style="background-image: url('${thumbnail}');">
<label class="top">${vote} Diem Vote</label>
<label class="bottom">${view} Luot Xem</label>
</div>
</div>`)
//Luu tru du lieu lai
//Chuyen array -> json string
json = JSON.stringify(dataList)
//Luu lai
localStorage.setItem('data_list', json)
return false;
})
})#style.css
.navbar {
padding: 0px !important;
}
.navbar-nav .nav-item a {
border-right: solid #9db0b0 1px;
}
.row .col-md-3 button {
border-radius: 0px;
margin-bottom: 3px;
width: 100%;
}
.title {
background-color: grey;
text-align: center;
color: white;
padding: 15px;
margin: 0px;
margin-bottom: 3px;
}
.thumbnail {
background-color: grey;
background-repeat: no-repeat;
background-size: contain;
min-height: 180px;
position: relative;
}
.top {
background-color: rgb(191, 191, 189, 0.5);
width: 100%;
text-align: center;
color: #dbdbdb;
}
.bottom {
background-color: rgb(191, 191, 189, 0.8);
text-align: center;
padding-left: 10px;
padding-right: 10px;
color: white;
bottom: 0px;
right: 5px;
position: absolute;
}
.row .col-md-3 {
margin-bottom: 10px;
}Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)