<!DOCTYPE html>
<html lang="en">
<head>
<title>手机品牌管理</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0px;
}
.header_con {
height: 60px;
background-color: #101010;
overflow: hidden;
}
.header {
width: 960px;
margin: 0px auto;
overflow: hidden;
}
.header h1 {
margin: 0px;
padding: 0px;
font-size: 22px;
line-height: 60px;
font-weight: normal;
color: #f1f1f1;
letter-spacing: 1px;
float: left;
}
.header input {
float: right;
width: 240px;
height: 30px;
text-indent: 10px;
border-radius: 4px;
margin-top: 15px;
border: 0px;
outline: none;
}
.tb_title {
width: 960px;
height: 40px;
margin: 20px auto 0;
background-color: #3366cc;
overflow: hidden;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.tb_title h3 {
margin: 0px;
padding: 0px;
line-height: 40px;
font-size: 16px;
font-weight: normal;
text-indent: 15px;
float: left;
color: #fff;
}
.tb_title a {
float: right;
text-decoration: none;
background-color: #f3cd57;
color: #2c2203;
padding: 5px 10px;
font-size: 12px;
border-radius: 4px;
margin: 7px 15px 0 0;
}
.tb_title a:hover {
border: 1px solid rgba(255, 255, 255, 0.6);
background-color: transparent;
color: #fff;
}
.tb {
border-collapse: collapse;
width: 960px;
margin: 0 auto;
}
.tb th {
background-color: #f1f1f1;
color: #333;
font-size: 14px;
}
.tb td,
.tb th {
padding: 10px 0;
border: 1px solid #999;
text-align: center;
}
.tb td {
color: #666;
font-size: 14px;
}
.del {
text-decoration: none;
color: #f90
}
.add {
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -100px;
width: 400px;
height: 200px;
background-color: #fff;
border: 1px solid #999;
border-radius: 4px;
z-index: 100;
}
.add h3 {
padding: 0px;
margin: 0px;
background-color: #3366cc;
color: #fff;
font-size: 16px;
font-weight: normal;
line-height: 40px;
text-indent: 15px;
}
.add_form {
margin: 30px 0 0 50px;
}
.add_form label {
font-size: 14px;
padding-right: 10px;
}
.add_form input {
width: 200px;
height: 24px;
border: 1px solid #ccc;
outline: none;
text-indent: 10px;
border-radius: 4px;
}
.btns {
border-top: 1px solid #ccc;
margin-top: 50px;
padding-right: 10px;
}
.btns input {
width: 62px;
height: 30px;
border: 1px solid #dadce0;
border-radius: 4px;
background-color: #fff;
float: right;
margin: 10px 10px 0 0;
outline: none;
cursor: pointer;
;
}
.btns input:last-child {
background-color: #669df6;
color: #fff;
border-color: #5793f6;
}
.mask {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 99;
}
</style>
</head>
<body>
<div id="app">
<!-- 这里是顶部显示的内容 -->
<div class="header_con">
<div class="header">
<h1>手机品牌管理</h1>
<input type="text" placeholder="请输入搜索条件">
</div>
</div>
<!-- 显示内容的标题部分 -->
<div class="tb_title">
<h3>品牌列表</h3>
<a href="javascript:;">新增品牌</a>
</div>
<!-- 显示手机列表信息 -->
<table class="tb">
<thead>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
<td>小米</td>
<td>2019-07-01</td>
<td>
<a href="#" class="del">删除</a>
</td>
</tr> -->
</tbody>
<tfoot>
<tr style="display: none;">
<td colspan="4">没有品牌数据</td>
</tr>
</tfoot>
</table>
<!-- 新增品牌弹框 -->
<div class="add_con" style="display: none;">
<div class="add">
<h3>新增品牌</h3>
<div class="add_form">
<label>品牌名称:</label>
<input type="text">
</div>
<div class="btns">
<input type="button" value="取消">
<input type="button" value="添加">
</div>
</div>
<div class="mask"></div>
</div>
</div>
<script>
// $ 符号一般是指jQuery库,操作HTML元素
function $(olo) {
let res = document.querySelectorAll(olo);
return res.length == 1 ? res[0] : res;
}
//给新增品牌添加点击事件，点击时，隐藏的弹框出现
$('.tb_title a').onclick = function () {
$('.add_con').style.display = 'block';
}
//弹出框中确定以及取消的调用
function jiu() {
//取消按钮添加事件
$('.btns [type=button]')[0].onclick = function () {
$('.add_con').style.display = 'none';
}
// 确定按钮添加事件
$('.btns [type=button]')[1].onclick = addevet;
}
let arrlis = [
{
id: 1,
tname: '将近酒',
time: '2023/4/21'
},
{
id: 2,
tname: '杯莫停',
time: '2023/4/21'
},
{
id: 3,
tname: '与君歌一曲',
time: '2023/4/21'
},
{
id: 4,
tname: '把酒问青天',
time: '2023/4/21'
}
]
//arrlis 中元素的个数
let arr = arrlis.length
console.log(arr);
function addevet() {
// 拿到输入框中的值
var increve = $('.add_form input').value;
if(!$('.add_form input').value) return $('.add_con').style.display = 'none';
let arrObj = {};
arr++
arrObj.id = arr - 0;
arrObj.tname = increve;
arrObj.time = (new Date()).toLocaleDateString();
//console.log(arrObj);
arrlis.push(arrObj)
appdraw();
$('.add_con').style.display = 'none';
$('.add_form input').value = '';
}
jiu()
//封装函数并添加到页面之中
function appdraw() {
var resarr = arrlis.reduce(function (libai, b) {
libai += `<tr>
<td>${b.id}</td>
<td>${b.tname}</td>
<td>${b.time}</td>
<td>
<a href="#" class="del">删除</a>
</td>
</tr>`
return libai;
}, '')
$('.tb tbody').innerHTML = resarr;
deleve()
}
appdraw();
//实现删除效果
function deleve() {
if ($('.del').length) {
Array.from($('.del')).forEach((v, k) => {
v.onclick = function () {
console.log(k);
arrlis.splice(k, 1);
appdraw();
}
});
}else{
$('.del').onclick = function(){
var rr=arrlis.splice(0, 1);
appdraw();
}
}
}
</script>
</body>
</html>
1734
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
