闲着无聊做了一个公式查询网，核心思路主要就是把数据库里面的内容找出来。比较低级。
<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>
![【Linux】-Redis安装部署[15]](http://pic.xiahunao.cn/【Linux】-Redis安装部署[15])
![P1003 [NOIP2011 提高组] 铺地毯](http://pic.xiahunao.cn/P1003 [NOIP2011 提高组] 铺地毯)
