web实验（6）
1.计算圆的面积
<!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>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h2>计算圆的面积</h2>
<div>圆的半径：<input type="text" id="r"></div>
<div>圆的面积：<input type="text" readonly="readonly" id="s"></div>
<div>
<span><input type="button" value="计算圆的面积" id="btn"></span>
<span><input type="button" value="重置" id="reset"></span>
</div>
<script>
function area(radius) {
return radius * radius * Math.PI;
}
function show() {
let r = document.querySelector('#r').value;
let ans = area(r);
ans = ans.toFixed(2);
document.querySelector('#s').value = ans;
}
let btn = document.querySelector('#btn');
let reset = document.querySelector('#reset');
btn.onclick = function() {
show();
}
reset.onclick = function() {
document.querySelector('#r').value = '';
document.querySelector('#s').value = '';
}
</script>
</body>
</html>
2.邮件
<!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/login.css">
</head>
<body>
收件箱
<table border="1">
<thead>
<tr>
<th>状态</th>
<th>发件人</th>
<th>主题</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
<div>
<span><input type="button" value="全选" id="all"></span>
<span><input type="button" value="取消" id="none"></span>
<span><input type="button" value="反选" id="un"></span>
<span><input type="button" value="删除" id="del"></span>
</div>
<script src="js/jquery-1.11.2.min.js"></script>
<script>
$(function() {
$('#all').on('click', function() {
$('tbody input').prop('checked', 'true');
})
$('#none').on('click', function() {
let checkeds = $('tbody input');
for (let i = 0; i < checkeds.length; i ++) {
if (checkeds[i].checked) {
checkeds[i].checked = false;
}
}
})
$('#un').on('click', function() {
let checkeds = $('tbody input');
for (let i = 0; i < checkeds.length; i++) {
if (checkeds[i].checked) {
checkeds[i].checked = false;
} else {
checkeds[i].checked = true;
}
}
})
$('#del').on('click', function() {
let checkeds = $('tbody input');
for (let i = 0; i < checkeds.length; i++) {
if (checkeds[i].checked) {
checkeds[i].parentNode.parentNode.remove();
}
}
})
})
</script>
</body>
</html>
css：
* {
margin: 0;
padding: 0;
}
table {
width: 400px;
}
th {
background-color: green;
text-align: center;
font-size: 24px;
}
td {
text-align: center;
font-size: 24px;
}
登陆：
<!--login.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/login.css">
</head>
<body>
<div>
<div>工号</div>
<div><input type="text" placeholder="请输入工号" id="user"></div>
</div>
<div>
<div>密码</div>
<div><input type="password" placeholder="请输入密码" id="pw"></div>
</div>
<div>
<span><input type="button" value="登陆" id="login"></span>
<span><input type="button" value="取消" id="none"></span>
</div>
<script src="js/jquery-1.11.2.min.js"></script>
<script>
$(function() {
$('#login').on('click', function() {
if ($('#user').val() == '' || $('#pw').val() == '') {
alert('必须输入');
}
$.get(
'http://120.79.153.0:8080/login.aspx',
{
userno: "202020202020",
userpwd: "123",
},
function (res) {
if (res == 'TRUE') {
alert('登陆成功');
location.href = 'main.html';
} else {
alert('登陆失败');
}
}
)
})
$('#none').on('click', function() {
$('#user').val('');
$('#pw').val('');
})
})
</script>
</body>
</html>
css：
* {
margin: 0;
padding: 0;
}
div div {
display: inline-block;
}
div div:nth-child(1) {
width: 100px;
text-align: right;
}
div div:nth-child(2) {
width: 350px;
text-align: left;
}
信息展示
<!-- main.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>主页面</title>
</head>
<frameset cols="20%,80%" frameborder="no" border="0">
<frame src="left.html">
<frame name="show">
</frameset>
</html>
左边
<!-- left.html -->
<html>
<head>
<style>
#left {
background-color: #025802;
width: 100%;
height: 100%;
color: white;
margin-right: 0px;
background-size: cover;
}
#frist {
font-size: 20px;
line-height: 50px;
padding-left: 5px;
}
#second {
padding-top: 25px;
padding-left: 60px;
font-size: 15px;
}
#second a:nth-child(2) {
padding-top: 20px;
}
#second-left {
color: white;
}
#second-right {
margin-top: 25px;
color: white;
}
#last {
padding-top: 25px;
padding-left: 60px;
font-size: 15px;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div id="left">
<div id="frist">页面导航</div>
<div id="second">
<a href="right_1.html" target="show" id="second-left">使用说明</a><br>
</div>
<div id="last">
<a href="right_2.html" target="show" id="second-right">查看信息</a>
</div>
</div>
</body>
</html>
右边1
<!-- right_1.html -->
<html>
<head>
<style>
#shang {
font-size: 30px;
color: #025802;
width: 100%;
border-bottom: 1px solid gray;
padding-bottom: 15px;
text-align: center;
}
.frist {
margin-top: 25px;
font-size: 20px;
line-height: 20px;
color: blue;
padding-left: 20px;
}
#last {
color: blue;
font-size: 20px;
line-height: 20px;
margin-top: 25px;
margin-right: 20px;
text-align: right;
}
</style>
</head>
<div id="shang">使用说明</div>
<div id="xia">
<div class="frist">各位同学：你们好！</div>
<div class="frist">按图书馆规定，每个人只能一次性借阅10本书</div>
<div id="last">计算机科学学院</div>
</div>
</html>
右边2
<!--right_2.html-->
<!--right_2.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#frist {
border: 2px solid gray;
height: 100px;
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
.wenzi {
width: 65px;
float: left;
margin-left: 2px;
}
.kuang {
width: 120px;
float: left;
}
#hang {
margin-left: 20%;
margin-top: 35px;
}
#anniu {
margin-left: 2px;
height: 21px;
}
table {
width: 100%;
margin-top: 100px;
margin-right: 0px;
border-collapse: collapse;
}
td {
text-align: center;
}
thead tr {
background-color: yellow;
}
</style>
</head>
<body>
<div id="frist">
<div id="hang">
<div class="wenzi">图书编号</div>
<input type="text" class="kuang">
<div class="wenzi">图书名字</div>
<input type="text" class="kuang">
<div class="wenzi">出版社</div>
<input type="text" class="kuang">
<input type="button" value="确定添加" id="anniu">
</div>
<div id="last">
<table border="1">
<thead>
<tr>
<th>图书编号</th>
<th>图书名字</th>
<th>出版社</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</body>
<script src="js\\jquery-1.11.2.min.js"></script>
<script>
$().ready(function () {
$.get(
"http://120.79.153.0:8080/getBooks.aspx?userno=202020202020",
function (res) {
console.log(res);
for (let i = 0; i < res.length; i ++) {
let temp = $(`
<tr>
<td>${res[i].bookNo}</td>
<td>${res[i].bookName}</td>
<td>${res[i].bookPublisher}</td>
</tr>
`)
temp.appendTo('tbody');
}
},
'json'
);
})
</script>
</html>