闲着无聊做了一个公式查询网，核心思路主要就是把数据库里面的内容找出来。比较低级。
html
<DOCTYPE !html>
<html>
<head>
<meta charset="utf-8">
<title>公式查询网</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
body {
background: black;
}
.container {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 300px;
height: 100px;
}
.container .search {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background: crimson;
border-radius: 50%;
transition: all 1s;
z-index: 4;
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.2);
}
.container .search:hover {
cursor: pointer;
}
.container .search::before {
content: "";
position: absolute;
margin: auto;
top: 22px;
right: 0;
bottom: 0;
left: 22px;
width: 12px;
height: 2px;
background: white;
transform: rotate(45deg);
transition: all 0.5s;
}
.container .search::after {
content: "";
position: absolute;
margin: auto;
top: -5px;
right: 0;
bottom: 0;
left: -5px;
width: 25px;
height: 25px;
border-radius: 50%;
border: 2px solid white;
transition: all 0.5s;
}
.container input {
font-family: "Inconsolata", monospace;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 50px;
height: 50px;
outline: none;
border: none;
background: crimson;
color: white;
text-shadow: 0 0 10px crimson;
padding: 0 80px 0 20px;
border-radius: 30px;
box-shadow: 0 0 25px 0 crimson, 0 20px 25px 0 rgba(0, 0, 0, 0.2);
transition: all 1s;
opacity: 0;
z-index: 5;
font-weight: bolder;
letter-spacing: 0.1em;
}
.container input:hover {
cursor: pointer;
}
.container input:focus {
width: 300px;
opacity: 1;
cursor: text;
}
.container input:focus ~ .search {
right: -250px;
background: #151515;
z-index: 6;
}
.container input:focus ~ .search::before {
top: 0;
left: 0;
width: 25px;
}
.container input:focus ~ .search::after {
top: 0;
left: 0;
width: 25px;
height: 2px;
border: none;
background: white;
border-radius: 0%;
transform: rotate(-45deg);
}
.container input::placeholder {
color: white;
opacity: 0.5;
font-weight: bolder;
}
.display-box {
position: absolute;
width: 600px;
height: 450px;
top: 30%;
left: 0;
right: 0;
margin: auto;
background: white;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: all 0.5s;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.display-box.visible {
opacity: 1;
visibility: visible;
}
.result {
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
}
.result h2 {
margin-top: 0;
margin-bottom: 5px;
font-size: 1.2em;
color: #333;
}
.result p {
color: #666;
}
</style>
</head>
<body>
<div class="container">
<input type="text" placeholder="搜索公式...">
<div class="search"></div>
</div>
<script>
window.addEventListener('keydown', function(event) {
if (event.keyCode === 13) {
var container = document.querySelector('.container');
var input = document.querySelector('input');
var search = document.querySelector('.search');
// 移动搜索框和搜索按钮
container.style.transform = 'translateY(-150px)';
input.style.transform = 'translateY(-150px)';
search.style.transform = 'translateY(-150px)';
// 创建显示框元素
var displayBox = document.createElement('div');
displayBox.classList.add('display-box');
displayBox.innerHTML = '';
document.body.appendChild(displayBox);
// 等待一段时间后显示显示框
setTimeout(function() {
displayBox.classList.add('visible');
// 模拟爬取网站内容
var searchText = input.value;
var mockData = [
{ title: '正方形的周长', content: 'C = 4a' },
{ title: '长方形的周长', content: 'C = 2(a+b)' },
{ title: '正三角形的周长', content: 'C = 3a' },
{ title: '等腰三角形的周长', content: 'C = 2a + b' },
{ title: '直角三角形的周长', content: 'C = a + b + c' },
{ title: '梯形的周长', content: 'C = a + b + c + d' },
{ title: '平行四边形的周长', content: 'C = 2(a + b)' },
{ title: '菱形的周长', content: 'C = 4a' },
{ title: '扇形的周长', content: 'C = 2πr + 2a' },
{ title: '圆形的周长', content: 'C = 2πr' },
{ title: '椭圆的周长', content: 'C = 2π√((a²+b²)/2)' },
{ title: '正方形的面积', content: 'A = a²' },
{ title: '长方形的面积', content: 'A = ab' },
{ title: '正三角形的面积', content: 'A = (a²√3)/4' },
{ title: '等腰三角形的面积', content: 'A = (ab)/2' },
{ title: '直角三角形的面积', content: 'A = (ab)/2' },
{ title: '梯形的面积', content: 'A = (a+b)h/2' },
{ title: '平行四边形的面积', content: 'A = bh' },
{ title: '菱形的面积', content: 'A = (d₁d₂)/2' },
{ title: '扇形的面积', content: 'A = (θπr²)/360' },
{ title: '圆形的面积', content: 'A = πr²' },
{ title: '椭圆的面积', content: 'A = πab' },
{ title: '正四面体的体积', content: 'V = (a³√2)/12' },
{ title: '正六面体的体积', content: 'V = a³' },
{ title: '正八面体的体积', content: 'V = (√2a³)/3' },
{ title: '金字塔的体积', content: 'V = (1/3)Bh' },
{ title: '圆柱体的体积', content: 'V = πr²h' },
{ title: '圆锥体的体积', content: 'V = (1/3)πr²h' },
{ title: '圆台的体积', content: 'V = (1/3)π(h(r₁² + r₂² + r₁r₂))' },
{ title: '棱柱的体积', content: 'V = Bh' },
{ title: '棱锥的体积', content: 'V = (1/3)Bh' },
{ title: '棱台的体积', content: 'V = (1/3)(B₁+B₂+√(B₁B₂))h' },
{ title: '椎体的体积', content: 'V = (1/3)πr²h' },
{ title: '球体的体积', content: 'V = (4/3)πr³' },
{ title: '椭球的体积', content: 'V = (4/3)πabc' },
{ title: '钻石体的体积', content: 'V = (d₁d₂d₃)/6√3' },
{ title: '镂空球体的体积', content: 'V = (4/3)π(r₁³-r₂³)' },
{ title: '镂空圆柱体的体积', content: 'V = πh(r₁²-r₂²)' },
{ title: '镂空圆锥体的体积', content: 'V = (1/3)π(r₁²-r₂²)h' },
];
var filteredData = mockData.filter(item => item.title.includes(searchText));
// 将爬取的内容显示在显示框中
filteredData.forEach(function(result) {
var resultDiv = document.createElement('div');
resultDiv.className = 'result';
resultDiv.innerHTML = `
<h2>${result.title}</h2>
${result.content}
`;
displayBox.appendChild(resultDiv);
});
}, 1000);
}
});
</script>
</body>
</html>