当前位置：首页 > JavaScript

js实现新闻

2026-03-14 00:04:41JavaScript

JavaScript 实现新闻功能

使用 JavaScript 实现新闻功能通常涉及新闻数据的获取、展示和交互。以下是常见的实现方法和步骤：

获取新闻数据

新闻数据可以通过 API 接口获取，常见的新闻 API 包括 NewsAPI、腾讯新闻开放平台等。使用 fetch 或 axios 发送请求获取数据。

fetch('https://newsapi.org/v2/top-headlines?country=us&apiKey=YOUR_API_KEY')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    displayNews(data.articles);
  })
  .catch(error => console.error('Error:', error));

展示新闻列表

将获取到的新闻数据渲染到页面上，可以使用 DOM 操作或模板引擎（如 Handlebars、Mustache）。

function displayNews(articles) {
  const newsContainer = document.getElementById('news-container');
  newsContainer.innerHTML = articles.map(article => `
    <div class="news-item">
      <h3>${article.title}</h3>
      <p>${article.description}</p>
      <a href="${article.url}" target="_blank">Read more</a>
    </div>
  `).join('');
}

实现新闻搜索

通过输入框和事件监听实现新闻搜索功能。

document.getElementById('search-button').addEventListener('click', () => {
  const query = document.getElementById('search-input').value;
  fetch(`https://newsapi.org/v2/everything?q=${query}&apiKey=YOUR_API_KEY`)
    .then(response => response.json())
    .then(data => displayNews(data.articles));
});

分页加载

实现新闻列表的分页加载，提升用户体验。

let currentPage = 1;
document.getElementById('load-more').addEventListener('click', () => {
  currentPage++;
  fetch(`https://newsapi.org/v2/top-headlines?country=us&page=${currentPage}&apiKey=YOUR_API_KEY`)
    .then(response => response.json())
    .then(data => {
      const newsContainer = document.getElementById('news-container');
      data.articles.forEach(article => {
        newsContainer.innerHTML += `
          <div class="news-item">
            <h3>${article.title}</h3>
            <p>${article.description}</p>
            <a href="${article.url}" target="_blank">Read more</a>
          </div>
        `;
      });
    });
});

新闻分类筛选

通过分类按钮实现新闻的分类筛选。

js实现新闻

document.querySelectorAll('.category-btn').forEach(button => {
  button.addEventListener('click', () => {
    const category = button.getAttribute('data-category');
    fetch(`https://newsapi.org/v2/top-headlines?country=us&category=${category}&apiKey=YOUR_API_KEY`)
      .then(response => response.json())
      .then(data => displayNews(data.articles));
  });
});