HTML公式查询网

最新推荐文章于 2024-06-16 06:54:38 发布

AICodeThunder

最新推荐文章于 2024-06-16 06:54:38 发布

阅读量497

点赞数 3

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/joe_g12345/article/details/139201718

版权

闲着无聊做了一个公式查询网，核心思路主要就是把数据库里面的内容找出来。比较低级。

<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>