当前位置：首页 > JavaScript

js实现仿豆瓣网页

2026-03-01 18:41:52JavaScript

以下是使用JavaScript实现仿豆瓣网页的关键步骤和代码示例：

页面结构设计

HTML部分需要包含导航栏、内容展示区和页脚。导航栏使用<nav>标签，内容区用<div>划分模块，页脚用<footer>。

<nav class="navbar">
  <div class="logo">豆瓣</div>
  <ul class="nav-links">
    <li><a href="#">电影</a></li>
    <li><a href="#">图书</a></li>
    <li><a href="#">音乐</a></li>
  </ul>
</nav>

<div class="content">
  <div class="movie-list" id="movieContainer"></div>
</div>

<footer class="footer">
  <p>© 2023 仿豆瓣网页</p>
</footer>

数据获取与渲染

使用Fetch API获取电影数据并动态渲染到页面：

const fetchMovies = async () => {
  try {
    const response = await fetch('https://api.example.com/movies');
    const data = await response.json();

    const movieContainer = document.getElementById('movieContainer');
    data.forEach(movie => {
      const movieCard = document.createElement('div');
      movieCard.className = 'movie-card';
      movieCard.innerHTML = `
        <img src="${movie.image}" alt="${movie.title}">
        <h3>${movie.title}</h3>
        <p>评分: ${movie.rating}</p>
      `;
      movieContainer.appendChild(movieCard);
    });
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

window.addEventListener('DOMContentLoaded', fetchMovies);

样式实现

CSS部分实现豆瓣风格的布局和视觉效果：

.navbar {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  background-color: #f7f7f7;
}

.movie-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.movie-card {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
}

.movie-card img {
  width: 100%;
  height: auto;
}

交互功能实现

为电影卡片添加悬停效果和点击事件：

document.querySelectorAll('.movie-card').forEach(card => {
  card.addEventListener('mouseenter', () => {
    card.style.transform = 'scale(1.05)';
    card.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
  });

  card.addEventListener('mouseleave', () => {
    card.style.transform = 'scale(1)';
    card.style.boxShadow = 'none';
  });

  card.addEventListener('click', () => {
    const title = card.querySelector('h3').textContent;
    alert(`你点击了: ${title}`);
  });
});

响应式设计

通过媒体查询实现移动端适配：

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
  }

  .movie-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

本地存储功能

使用localStorage存储用户偏好：

// 存储主题偏好
const setTheme = (theme) => {
  localStorage.setItem('theme', theme);
  document.body.className = theme;
};

// 初始化时读取
const savedTheme = localStorage.getItem('theme') || 'light';
document.body.className = savedTheme;

以上代码组合可以实现一个基本的仿豆瓣网页，包含数据获取、动态渲染、交互效果和响应式设计等核心功能。实际开发中需要根据具体需求调整API接口和样式细节。

js实现仿豆瓣网页