使用VSCode开发少儿编程项目：电影推荐系统（极简版）
我将为你创建一个简单而有趣的电影推荐系统，适合在VSCode中开发和学习。这个项目可以根据朋友喜欢的电影为你推荐新电影。
项目概述
这个项目将包含：
- 电影数据库（包含多种类型的电影）
- 朋友喜欢的电影选择界面
- 基于相似类型的推荐算法
- 直观的卡片式界面设计
代码实现
以下是完整的HTML文件，包含所有必要的HTML、CSS和JavaScript代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电影推荐系统 - 少儿编程项目</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
color: white;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: rgba(0, 0, 0, 0.3);
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.subtitle {
font-size: 1.2rem;
opacity: 0.9;
}
.app-area {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 30px;
}
.friend-section, .recommendation-section {
flex: 1;
min-width: 300px;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.section-title {
font-size: 1.5rem;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
.friend-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}
.friend-card {
background: rgba(255, 255, 255, 0.15);
border-radius: 10px;
padding: 15px;
cursor: pointer;
transition: all 0.3s ease;
flex: 1;
min-width: 120px;
text-align: center;
}
.friend-card:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-5px);
}
.friend-card.selected {
background: rgba(106, 17, 203, 0.7);
box-shadow: 0 5px 15px rgba(106, 17, 203, 0.4);
}
.friend-avatar {
font-size: 2rem;
margin-bottom: 5px;
}
.friend-name {
font-weight: bold;
margin-bottom: 5px;
}
.friend-movies {
font-size: 0.8rem;
opacity: 0.8;
}
.movie-selection {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.movie-tag {
background: rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 8px 15px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.movie-tag:hover {
background: rgba(255, 255, 255, 0.3);
}
.movie-tag.selected {
background: rgba(37, 117, 252, 0.7);
}
.recommend-btn {
background: #6a11cb;
color: white;
border: none;
padding: 12px 25px;
border-radius: 30px;
font-size: 1.1rem;
cursor: pointer;
margin-top: 20px;
width: 100%;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.recommend-btn:hover {
background: #5a0db6;
transform: translateY(-2px);
}
.recommendations {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
margin-top: 20px;
}
.movie-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.movie-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.movie-poster {
width: 100%;
height: 250px;
object-fit: cover;
}
.movie-info {
padding: 15px;
}
.movie-title {
font-weight: bold;
margin-bottom: 5px;
font-size: 1.1rem;
}
.movie-genre {
font-size: 0.8rem;
opacity: 0.8;
margin-bottom: 10px;
}
.movie-rating {
display: flex;
align-items: center;
font-size: 0.9rem;
}
.stars {
color: gold;
margin-right: 5px;
}
.no-recommendations {
text-align: center;
padding: 30px;
font-size: 1.1rem;
opacity: 0.7;
}
.reset-btn {
background: #ff4757;
color: white;
border: none;
padding: 10px 20px;
border-radius: 30px;
font-size: 1rem;
cursor: pointer;
margin-top: 20px;
transition: all 0.3s ease;
}
.reset-btn:hover {
background: #ff3742;
}
@media (max-width: 768px) {
.app-area {
flex-direction: column;
}
.recommendations {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>电影推荐系统</h1>
<p class="subtitle">根据朋友喜欢的电影为你推荐新电影</p>
</header>
<div class="app-area">
<div class="friend-section">
<h2 class="section-title">选择你的朋友</h2>
<div class="friend-list" id="friend-list">
<!-- 朋友列表将由JavaScript生成 -->
</div>
<h2 class="section-title">朋友喜欢的电影</h2>
<div class="movie-selection" id="friend-movies">
<!-- 朋友喜欢的电影将由JavaScript生成 -->
</div>
<button class="recommend-btn" id="recommend-btn">获取推荐</button>
<button class="reset-btn" id="reset-btn">重新选择</button>
</div>
<div class="recommendation-section">
<h2 class="section-title">为你推荐的电影</h2>
<div class="recommendations" id="recommendations">
<div class="no-recommendations">请先选择朋友并点击"获取推荐"</div>
</div>
</div>
</div>
</div>
<script>
// 电影数据库
const movies = [
{ id: 1, title: "阿凡达", genre: ["科幻", "冒险"], rating: 4.5, poster: "🎬" },
{ id: 2, title: "泰坦尼克号", genre: ["爱情", "剧情"], rating: 4.7, poster: "🚢" },
{ id: 3, title: "复仇者联盟", genre: ["动作", "科幻"], rating: 4.3, poster: "🦸" },
{ id: 4, title: "狮子王", genre: ["动画", "冒险"], rating: 4.6, poster: "🦁" },
{ id: 5, title: "疯狂动物城", genre: ["动画", "喜剧"], rating: 4.4, poster: "🐰" },
{ id: 6, title: "盗梦空间", genre: ["科幻", "惊悚"], rating: 4.8, poster: "🌀" },
{ id: 7, title: "星际穿越", genre: ["科幻", "冒险"], rating: 4.7, poster: "🚀" },
{ id: 8, title: "寻梦环游记", genre: ["动画", "家庭"], rating: 4.8, poster: "💀" },
{ id: 9, title: "你的名字", genre: ["动画", "爱情"], rating: 4.5, poster: "🌟" },
{ id: 10, title: "哈利波特", genre: ["奇幻", "冒险"], rating: 4.6, poster: "⚡" },
{ id: 11, title: "指环王", genre: ["奇幻", "冒险"], rating: 4.8, poster: "💍" },
{ id: 12, title: "蜘蛛侠", genre: ["动作", "科幻"], rating: 4.2, poster: "🕷️" },
{ id: 13, title: "冰雪奇缘", genre: ["动画", "奇幻"], rating: 4.3, poster: "❄️" },
{ id: 14, title: "玩具总动员", genre: ["动画", "喜剧"], rating: 4.5, poster: "🤠" },
{ id: 15, title: "速度与激情", genre: ["动作", "犯罪"], rating: 4.0, poster: "🏎️" },
{ id: 16, title: "侏罗纪公园", genre: ["科幻", "冒险"], rating: 4.4, poster: "🦖" },
{ id: 17, title: "教父", genre: ["犯罪", "剧情"], rating: 4.9, poster: "🍊" },
{ id: 18, title: "肖申克的救赎", genre: ["剧情"], rating: 4.9, poster: "🔨" },
{ id: 19, title: "这个杀手不太冷", genre: ["动作", "剧情"], rating: 4.8, poster: "🌿" },
{ id: 20, title: "千与千寻", genre: ["动画", "奇幻"], rating: 4.7, poster: "🐉" }
];
// 朋友数据
const friends = [
{ id: 1, name: "小明", avatar: "👦", favoriteMovies: [1, 3, 7] },
{ id: 2, name: "小红", avatar: "👧", favoriteMovies: [2, 9, 13] },
{ id: 3, name: "小华", avatar: "👦", favoriteMovies: [4, 5, 8] },
{ id: 4, name: "小丽", avatar: "👧", favoriteMovies: [10, 11, 20] },
{ id: 5, name: "小刚", avatar: "👦", favoriteMovies: [6, 12, 15] },
{ id: 6, name: "小美", avatar: "👧", favoriteMovies: [14, 16, 19] }
];
// 应用状态
const appState = {
selectedFriend: null,
selectedMovies: [],
recommendations: []
};
// DOM元素
const friendListEl = document.getElementById('friend-list');
const friendMoviesEl = document.getElementById('friend-movies');
const recommendationsEl = document.getElementById('recommendations');
const recommendBtn = document.getElementById('recommend-btn');
const resetBtn = document.getElementById('reset-btn');
// 初始化应用
function initApp() {
renderFriendList();
// 添加事件监听器
recommendBtn.addEventListener('click', generateRecommendations);
resetBtn.addEventListener('click', resetSelections);
}
// 渲染朋友列表
function renderFriendList() {
friendListEl.innerHTML = '';
friends.forEach(friend => {
const friendCard = document.createElement('div');
friendCard.className = 'friend-card';
friendCard.dataset.friendId = friend.id;
const friendMovies = friend.favoriteMovies.map(movieId => {
const movie = movies.find(m => m.id === movieId);
return movie.title;
}).join(', ');
friendCard.innerHTML = `
<div class="friend-avatar">${friend.avatar}</div>
<div class="friend-name">${friend.name}</div>
<div class="friend-movies">${friendMovies}</div>
`;
friendCard.addEventListener('click', () => selectFriend(friend.id));
friendListEl.appendChild(friendCard);
});
}
// 选择朋友
function selectFriend(friendId) {
appState.selectedFriend = friendId;
// 更新UI
document.querySelectorAll('.friend-card').forEach(card => {
card.classList.remove('selected');
});
document.querySelector(`.friend-card[data-friend-id="${friendId}"]`).classList.add('selected');
// 显示朋友喜欢的电影
renderFriendMovies(friendId);
}
// 渲染朋友喜欢的电影
function renderFriendMovies(friendId) {
friendMoviesEl.innerHTML = '';
const friend = friends.find(f => f.id === friendId);
if (!friend) return;
friend.favoriteMovies.forEach(movieId => {
const movie = movies.find(m => m.id === movieId);
if (!movie) return;
const movieTag = document.createElement('div');
movieTag.className = 'movie-tag';
movieTag.textContent = movie.title;
movieTag.dataset.movieId = movie.id;
movieTag.addEventListener('click', () => toggleMovieSelection(movie.id));
friendMoviesEl.appendChild(movieTag);
});
}
// 切换电影选择
function toggleMovieSelection(movieId) {
const index = appState.selectedMovies.indexOf(movieId);
if (index === -1) {
appState.selectedMovies.push(movieId);
} else {
appState.selectedMovies.splice(index, 1);
}
// 更新UI
document.querySelectorAll('.movie-tag').forEach(tag => {
if (parseInt(tag.dataset.movieId) === movieId) {
tag.classList.toggle('selected');
}
});
}
// 生成推荐
function generateRecommendations() {
if (appState.selectedMovies.length === 0) {
alert('请至少选择一部你感兴趣的电影！');
return;
}
// 获取选定电影的流派
const selectedGenres = [];
appState.selectedMovies.forEach(movieId => {
const movie = movies.find(m => m.id === movieId);
if (movie) {
selectedGenres.push(...movie.genre);
}
});
// 去重
const uniqueGenres = [...new Set(selectedGenres)];
// 基于流派推荐电影
const recommendations = movies.filter(movie => {
// 排除已选择的电影
if (appState.selectedMovies.includes(movie.id)) return false;
// 检查电影是否包含选定流派
return movie.genre.some(genre => uniqueGenres.includes(genre));
});
// 按评分排序
recommendations.sort((a, b) => b.rating - a.rating);
// 限制推荐数量
appState.recommendations = recommendations.slice(0, 6);
// 渲染推荐
renderRecommendations();
}
// 渲染推荐
function renderRecommendations() {
recommendationsEl.innerHTML = '';
if (appState.recommendations.length === 0) {
recommendationsEl.innerHTML = '<div class="no-recommendations">没有找到匹配的推荐，请尝试选择其他电影</div>';
return;
}
appState.recommendations.forEach(movie => {
const movieCard = document.createElement('div');
movieCard.className = 'movie-card';
// 生成星级评分
const stars = '★'.repeat(Math.floor(movie.rating)) + '☆'.repeat(5 - Math.floor(movie.rating));
movieCard.innerHTML = `
<div class="movie-poster">${movie.poster}</div>
<div class="movie-info">
<div class="movie-title">${movie.title}</div>
<div class="movie-genre">${movie.genre.join(', ')}</div>
<div class="movie-rating">
<span class="stars">${stars}</span>
<span>${movie.rating}</span>
</div>
</div>
`;
recommendationsEl.appendChild(movieCard);
});
}
// 重置选择
function resetSelections() {
appState.selectedFriend = null;
appState.selectedMovies = [];
appState.recommendations = [];
// 更新UI
document.querySelectorAll('.friend-card').forEach(card => {
card.classList.remove('selected');
});
friendMoviesEl.innerHTML = '';
recommendationsEl.innerHTML = '<div class="no-recommendations">请先选择朋友并点击"获取推荐"</div>';
}
// 初始化应用
initApp();
</script>
</body>
</html>
如何在VSCode中运行
- 打开VSCode
- 创建一个新文件，命名为
movie-recommendation.html - 将上面的代码复制到文件中
- 右键点击编辑器，选择"Open with Live Server"（如果你安装了Live Server扩展）
- 或者直接在浏览器中打开该HTML文件
项目特点
- 简单推荐算法：基于电影流派进行推荐
- 直观的界面：使用卡片式设计和表情符号，适合少儿学习
- 交互体验：点击选择朋友和电影，实时生成推荐
- 响应式设计：在手机和电脑上都能良好显示
学习要点
- 数组和对象的使用（存储电影和朋友数据）
- 事件处理（按钮点击和卡片选择）
- 条件过滤（基于流派的电影推荐）
- DOM操作（动态更新页面内容）
- 简单算法（推荐系统的基本原理）
这个项目非常适合作为少儿编程的入门项目，可以帮助孩子们理解数据结构和基本算法概念，同时体验推荐系统的工作原理。
扫一扫
1590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
