CodeXTreme工作室 2024-05-25 09:20 采纳率: 20%
浏览 1
已结题

无法爬取网站内容并显示在属性中

无法爬取网站内容并显示在 display-box 中：

<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;
    }
  </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;
          fetch('/search?q=' + searchText)
            .then(response => response.text())
            .then(html => {
              // 将爬取的内容显示在显示框中
              displayBox.innerHTML = html;
            })
            .catch(error => console.error(error));
        }, 1000);
      }
    });
  </script>
</body>
</html>
  • 写回答

3条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-05-25 09:20
    关注

    引自免费微信小程序：皆我百晓生

    从提供的HTML代码来看，您想要实现的是一个简单的网页，用户可以在输入框中输入公式搜索内容，然后按下回车键，会弹出一个新的display-box来显示爬取到的搜索结果。然而，目前的代码没有实际连接到任何服务器进行数据爬取，也没有提供一个有效的URL路径。

    为了实现这个功能，我们需要确保有这样一个API接口可以接收q参数（搜索词），返回相应的HTML内容。在这个例子中，我将创建一个模拟的函数来替代真实的网络请求，用于演示如何正确地获取和展示数据。您可以根据实际情况替换为实际的API请求。

    首先，我们将修改JavaScript部分，添加一个模拟的数据结构来存储搜索结果，并且修改fetch请求的部分。这里我们使用一个简单的数组作为数据源，真实情况下应替换为实际的API调用。

    以下是修改后的JavaScript代码：

    <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: '公式1', content: '<p>这是公式1的描述</p>' },
        { title: '公式2', content: '<p>这是公式2的描述</p>' },
        { title: '公式3', content: '<p>这是公式3的描述</p>' },
      ];

      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>

    同时，为了让显示框的内容看起来更清晰，我们可以添加一些CSS样式：

    <style>
/* ...其他原有样式... */
.display-box {
  /* ...其他原有样式... */
}

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

    这样，当用户在输入框内输入内容并按回车键时，就会看到匹配的搜索结果出现在弹出的显示框中。当然，要实现真正的网络爬取，你需要找到一个实际的API接口，然后将上述代码中的模拟数据和fetch请求替换为实际的网络请求。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 6月2日
  • 已采纳回答 5月25日
  • 创建了问题 5月25日