console
<!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>
<script src="echarts.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.tab {
width: 1500px;
height: 700px;
background-color: rgba(20, 25, 158, 0.767);
margin: auto;
margin-top: 20px;
position: relative;
}
.tab_list ul {
background-color: rgb(45, 26, 151);
position: absolute;
}
.tab_list ul li {
width: 200px;
height: 100px;
background-color: rgb(206, 193, 178);
line-height: 100px;
padding: 9 20px;
text-align: center;
font-size: 20px;
transition: all 10s inherit;
font-size: 20px;
font-weight: unset;
}
.tab_list ul>span {
line-height: 125px;
padding-left: 20px;
}
.tab_content {
width: 1300px;
height: 610px;
background-color: rgb(67, 136, 38);
position: absolute;
top: 0px;
right: 0;
}
.tab_content>.item {
width: 1300px;
height: 610px;
color: rgb(36, 138, 36);
transition: all 8s;
display: none;
}
#bac {
background-color: rgb(231, 229, 208);
}
.tab_list ul li div {
width: 200px;
height: 500px;
background-color: rgb(139, 0, 53);
}
#box_1 {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: bisque;
float: left;
margin-top: 15px;
margin-left: 25px;
}
.p1 {
float: left;
width: 30px;
height: 30px;
background-color: aqua;
margin-top: 31px;
margin-left: 10px;
text-align: center;
line-height: 30px;
border-radius: 50%;
}
.p2,
.p3 {
float: right;
padding: 20px;
line-height: 50px;
color: rgb(175, 33, 54);
text-shadow: 200px 60px 400px 0 rgb(142, 192, 25);
}
.box111 {
width: 1300px;
height: 120px;
background-color: rgb(234, 235, 235);
box-shadow: 0 0 10px 0 rgb(177, 36, 36);
}
#boc dl {
float: left;
width: 300px;
height: 100px;
border: 3px solid #ccc;
margin-top: 7px;
margin-left: 10px;
background-color: rgb(221, 195, 195);
}
#boc dl dt {
float: left;
float: left;
margin-top: 20px;
margin-left: 10px;
}
#boc dl dd {
width: 200px;
height: 20px;
margin-top: 18px;
margin-left: 100px;
font-size: 12px;
color: rgb(214, 26, 26);
}
#box_11 {
float: left;
width: 1240px;
height: 420px;
background-color: rgb(216, 219, 216);
margin-top: 40px;
margin-left: 30px;
}
#boc dl:hover {
background-color: rgb(177, 122, 51);
box-shadow: 0px 10px 40px rgb(26, 17, 17);
transition: 8s all inherit;
}
#box_11:hover {
box-shadow: 0px 10px 40px 10px rgb(20, 4, 4);
transition: 10s all inherit;
}
#box_12 {
width: 1300px;
height: 620px;
background-color: rgb(178, 204, 195);
position: absolute;
top: 100px;
left: 220px;
display: none;
}
#box_13 {
width: 700px;
height: 620px;
background-color: azure;
margin: auto;
}
#tet_1 {
outline: none;
background-color: azure;
border: 0;
margin-left: 30px;
}
#_p4 {
float: left;
margin-left: 100px;
margin-top: 20px;
}
#_p5 span {
width: 50px;
height: 50px;
background-color: blueviolet;
}
#_p5 {
float: left;
margin-left: 100px;
margin-top: 10px;
}
#_p6 {
margin-top: 15px;
float: left;
margin-left: 40px;
width: 70px;
height: 70px;
background-color: rgba(109, 103, 114, 0.397);
}
#_p7,
#_p8,
#_p9,
#_p10,
#_p11,
#_p11,
#_p13,
#_p14,
#_p15 {
margin-top: 10px;
margin-left: 100px;
}
#text_2,
#text_3,
#text_4 {
margin-left: 40px;
width: 300px;
}
#te {
margin-left: 10px;
}
#text_5 {
margin-left: 10px;
width: 300px;
}
#ra,
#re {
margin-left: 40px;
margin-left: 40px;
}
#se {
width: 70px;
margin-left: 40px;
}
#ta {
margin-left: 20px;
}
#bu_1,
#bu_2 {
float: left;
margin-left: 100px;
margin-top: 10px;
width: 100px;
height: 40px;
}
#box_it {
float: left;
width: 1280px;
height: 40px;
background-color: azure;
margin-left: 10px;
margin-top: 20px;
}
#_p16,
#_p17 {
line-height: 40px;
padding: 0 12px;
}
#box_it1 {
float: left;
margin-top: 30px;
width: 1280px;
height: 70px;
margin-left: 10px;
background-color: blanchedalmond;
}
#but11 {
float: right;
width: 100px;
height: 40px;
margin-top: 15px;
margin-right: 20px;
background-color: rgb(192, 218, 218);
color: #fff;
outline: none;
text-shadow: 1px 2px 3px #000;
}
#but11:hover {
box-shadow: 10px 1px 2px #000;
text-shadow: 1px 2px 3px 10px #000;
}
#box_it2 {
float: left;
margin-left: 10px;
width: 1280px;
height: 400px;
background-color: rgb(179, 196, 179);
margin-top: 30px;
position: relative;
}
#but_bb {
background-color: rgb(199, 221, 199);
width: 40px;
height: 30px;
}
#tab {
border-collapse: collapse;
margin: auto;
}
#tab tr th {
width: 560px;
height: 30px;
border: 1px solid rgb(19, 16, 16);
}
#box_bb2 {
width: 1280px;
height: 400px;
background-color:
rgba(202, 195, 177, 0.6);
position: absolute;
top: 0;
left: 0;
color: #000;
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<div id="box1" style="width:200px; height:180px; background-color: rgb(194, 190, 214);">
<div id="box_1"></div>
</div>
<ul>
<li id="bac">仪表盘 <span id="span1">></span></li>
<li>分类管理 <span id="span1">></span></li>
<li>讲师管理 <span id="span1">></span></li>
<li>课程管理 <span id="span1">></span></li>
</ul>
<div class="tab_content">
<div id="box3" style="height:90px;background-color: rgb(234, 223, 243);">
<p class="p1">��</p>
<p class="p3">退出</p>
<p class="p2">个人中心</p>
</div>
<div class="item" id="itemw" style="display: block; background-color: rgb(204, 184, 184);">
<div class="box111">
<div id="boc" style=" position: relative;"></div>
</div>
<div id="box_11">
<div id="boxs_1"
style="width:600px; height:400px; background-color: azure; float: left; margin-left:50px;">
</div>
</div>
</div>
<div class="item" style="background-color:rgb(194, 178, 186);"></div>
<div class="item" style="background-color: rgb(180, 163, 163);">
<div id="box_it">
<p id="_p16" style="float: left;">讲师管理</p>
<p id="_p17" style="float: left;">讲师列表</p>
</div>
<div id="box_it1"><button id="but11">添加老师</button></div>
<div id="box_it2">
<input type="text" id="ter" style="width: 200px; height:30px; margin-top:10px;">
<input type="button" value="搜索" id="but_bb">
<table id="tab">
<tr>
<th>编号</th>
<th>姓名</th>
<th>昵称</th>
<th>出生年月</th>
<th>教师类型</th>
<th>性别</th>
<th>手机号</th>
<th>操作</th>
</tr>
</table>
<div id="box_bb1"></div>
<div id="box_bb2">
<p id="_p20" style="margin-left:100px;margin-top:20px;">姓名<label for=""><input type="text"
placeholder="老师名称" id="tet_a"
style="margin-left:29px; width:200px; height:30px;"></label></p>
<p id="_p21" style="margin-left:100px;margin-top:20px;">昵称<label for=""><input type="text"
placeholder="" id="tet_b"
style="margin-left:29px; width:200px; height:30px;"></label></p>
<p id="_p21" style="margin-left:100px;margin-top:20px;">生日<label for=""><input type="date"
placeholder="" id="tet_d"
style="margin-left:29px; width:200px; height:30px;"></label></p>
<p id="_p23" style="margin-left:100px;margin-top:20px;"><label for="">手机<input type="text"
placeholder="" id="tet_e"
style="margin-left:29px; width:200px; height:30px;"></label></p>
<p id="_p22" style="margin-left:100px;margin-top:20px;">
<label for=""><label for="">讲师类型
<select name="" id="select">
<option value="1">讲师</option>
<option value="2">班主任</option>
<option value="3">讲师</option>
<option value="4">班主任</option>
</select></label>
</p>
<p id="_p22" style="margin-left:100px;margin-top:20px;">性别
<input type="radio" name="c1" id="nan" style="margin-left:29px;">男
<input type="radio" name="c1" id="nv">女
</p>
<button id="but_in" style="margin-left:100px;margin-top:20px;">保存</button>
<button id="but_in1" style="margin-left:100px;margin-top:20px;">取消</button>
</div>
</div>
</div>
<div class="item" style="background-color: rgb(161, 152, 153);"></div>
</div>
</div>
</div>
<div id="box_12">
<div id="box_13">
<p id="_p4"><label for="">姓名:<input type="text" id="tet_1" disabled></label></p>
<div style="clear: both;"></div>
<p id="_p5">图像</p>
<p id="_p6"></p>
<div style="clear: both;"></div>
<p id="_p7"> 昵称<input type="text" id="text_2"></label></p>
<div style="clear: both;"></div>
<p id="_p8">性别<input type="radio" name="cc" id="ra">男<input type="radio" name="cc" id="re">女</p>
<p id="_p9">籍贯
<select name="" id="se">
<option value=""></option>
</select>
<select name="" id="se">
<option value=""></option>
</select>
<select name="" id="se">
<option value=""></option>
</select>
</p>
<p id="_p10">出生日期<input type="date" id="ta"></p>
<p id="_p11">手机<input type="tel" id="text_3"></label></p>
<p id="_p13">邮箱 <input type="email" id="text_4"></label></p>
<p id="_p14">入职日期 <input type="text" id="text_5"></label></p>
<p id="_p15">个人简介<textarea name="remark" cols="36" rows="8" id="content" style="border: 1 solid #888888;LINE-HEIGHT:18px;padding: 3px ;width:330px;
height:170px;max-width: 370px;max-height: 170px;resize: none;" id="te"></textarea>
</p>
<button id="bu_1">提交</button>
<button id="bu_2">取消</button>
</div>
</div>
<script>
window.onload = function () {
var myChart = echarts.init(document.getElementById('boxs_1'));
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
var lis = document.getElementsByTagName('li');
var items = document.getElementsByClassName('item');
var _span1 = document.getElementById("span1")
console.log(lis)
console.log(items)
for (var i = 0; i < lis.length; i++) {
lis[i].index = i
lis[i].onmouseover = function () {
for (var j = 0; j < items.length; j++) {
lis[j].style.background = '';
lis[j].style.border = "0"
items[j].style.display = "none"
lis[j].style.color = "#000";
}
this.style.background = "#fff";
this.style.color = "red";
this.style.border = "0.1px solid red"
items[this.index].style.display = "block"
}
}
}
var _p1 = document.querySelector(".p1");
var _box = document.querySelector(".box111");
var flag = true;
_p1.addEventListener('click', function () {
if (flag) {
_p1.innerHTML = "��"
_box.style.display = 'none';
} else {
_p1.innerHTML = "��"
_box.style.display = 'block';
}
console.log(!flag)
flag = !flag
});
var arr7 = [{ "ss": "<img src='1.png'>", wo: "我的收入", qian: "$123.1" },
{ "ss": "<img src='1.png'>", wo: "课程数量", qian: "$123.1" },
{ "ss": "<img src='1.png'>", wo: "用户数量", qian: "$123.1" },
{ "ss": "<img src='1.png'>", wo: "浏览量", qian: "$123.1" }];
var _dl = ""
arr7.forEach((items) => {
_dl += "<dl id='dl2'>"
_dl += `<p><dt>${items.ss}</p></dt>`
_dl += `<p id='_p1'><dd>${items.wo}</p></dd>`
_dl += `<p id='_p2'><dd>${items.qian}</p></dd>`
_dl += "</dl>"
});
boc.innerHTML = _dl;
var _p3 = document.querySelector(".p3");
_p3.onclick = function () {
var timer = null;
var ru = 5;
alert("是否退出")
timer = setInterval(function () {
window.open("1.html")
}, 1000)
}
bu_2.onclick = function () {
box_12.style.display = "none"
}
var _p2_2 = document.querySelector(".p2");
_p2_2.onclick = function () {
box_12.style.display = "block"
}
_p16.onclick = function () {
_p16.style.color = "red"
_p17.style.color = "#000"
}
_p17.onclick = function () {
_p16.style.color = "#000"
_p17.style.color = "red"
}
var _but11 = document.getElementById("but11");
_but11.onclick = function () {
box_bb2.style.display = "block"
}
but_in1.onclick = function () {
box_bb2.style.display = "none"
}
function fn() {
let xhr = new XMLHttpRequest();
xhr.open("get", "http://120.92.101.187/index.php/index/teacher/teacherlist");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
let date = JSON.parse(xhr.responseText);
let but = "<button id='bns_1'>删除</button>"
let but1 = "<button id='but_m'>查看</button>"
let but2 = "<button id='but_c'>编辑</button>"
let _tab = "<table id='tab'>"
date.data.data.forEach(item => {
_tab += "<tr>"
_tab += `<th>${item.id}</th>`
_tab += `<th>${item.name}</th>`
_tab += `<th>${item.nick}</th>`
_tab += `<th>${item.birthdata}</th>`
_tab += `<th>${item.sex}</th>`
_tab += `<th>${item.teachertype}</th>`
_tab += `<th>${item.iphone}</th>`
_tab += "<th>" + but + "" + but1 + "" + but2 + "</th>"
_tab += "</tr>"
});
_tab += "</table>"
box_bb1.innerHTML = _tab;
let fs = document.querySelectorAll("#bns_1");
for (let n = 0; n < fs.length; n++) {
fs[n].onclick = function () {
console.log(date.data.data[n].id)
let ss = date.data.data[n].id
let xhr4 = new XMLHttpRequest();
xhr4.open("get", `http://120.92.101.187/index.php/index/teacher/delteacher?id=${ss}`);
xhr4.onreadystatechange = function () {
if (xhr4.readyState == 4 && xhr4.status == 200) {
console.log(xhr4.responseText);
}
}
xhr4.send()
fn()
}
}
}
}
xhr.send()
}
fn()
var _but_in = document.querySelector("#but_in");
_but_in.onclick = function () {
let xhr1 = new XMLHttpRequest();
xhr1.open("post", "http://120.92.101.187/index.php/index/index/addteacher");
xhr1.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr1.onreadystatechange = function () {
if (xhr1.readyState == 4 && xhr1.status == 200) {
console.log(xhr1.responseText);
}
}
let sum = null;
if (nan.value == true) {
sum = 0;
} else {
sum = 1;
}
xhr1.send(`name=${tet_a.value}&nick=${tet_b.value}&sex=${sum}&birthdata=${tet_d.value}&iphone=${Number(tet_e.value)}&teachertype=${select.value}`)
fn();
};
var _but_bb = document.getElementById("but_bb");
_but_bb.onclick = function () {
alert(1)
let xhr3 = new XMLHttpRequest();
xhr3.open("GET", `http://120.92.101.187/index.php/index/teacher/getsearch?name=${ter.value}`);
xhr3.onreadystatechange = function () {
if (xhr3.readyState == 4 && xhr3.status == 200) {
console.log(xhr3.responseText);
let date = JSON.parse(xhr3.responseText);
let but = "<button id='but_v'>删除</button>"
let but1 = "<button id='but_m'>查看</button>"
let but2 = "<button id='but_c'>编辑</button>"
let _tab = "<table id='tab'>"
date.data.data.forEach(item => {
_tab += "<tr>"
_tab += `<th>${item.id}</th>`
_tab += `<th>${item.name}</th>`
_tab += `<th>${item.nick}</th>`
_tab += `<th>${item.birthdata}</th>`
_tab += `<th>${item.sex}</th>`
_tab += `<th>${item.teachertype}</th>`
_tab += `<th>${item.iphone}</th>`
_tab += "<th>" + but + "" + but1 + "" + but2 + "</th>"
_tab += "</tr>"
});
_tab += "</table>"
box_bb1.innerHTML = _tab;
}
}
xhr3.send();
}
</script>
</body>
</html>