电影列表站添加Bootstrap心形收藏图标、星级评分及简化方案咨询

功能实现修改 #

1. 引入Bootstrap图标 #

先在HTML的<head>标签内添加图标资源引入，可本地下载Bootstrap图标库后引用本地路径，避免外链依赖：

<link rel="stylesheet" href="css/bootstrap-icons.css">

2. 替换收藏按钮为心形图标 #

修改JS代码中创建「添加到收藏」按钮的部分，将原来的input按钮替换为带心形图标的button，同时支持收藏状态切换：

// 替换原有ADD TO fav板块的代码
part = document.createElement("button");
part.className = "movie p-add";
part.onclick = movie.add;
part.dataset.id = id;
// 根据收藏状态显示对应图标
if(movie.items[id]){
  part.innerHTML = '<i class="bi bi-heart-fill"></i>';
}else{
  part.innerHTML = '<i class="bi bi-heart"></i>';
}
item.appendChild(part);

同步微调CSS中按钮的样式：

input.movie, button.movie {
  /* 保留原有样式，新增/修改以下属性 */
  background: transparent;
  border: none;
  font-size: 1.5em;
  color: #dc3545;
}

3. 新增评分星星展示 #

首先给电影数据新增rating字段：

var names = {
  1: {
    name: "Red Notice",
    desc: "An Interpol agent tracks the world's most wanted art thief.",
    img: "rn.jpg",
    rating: 4.2 // 新增评分字段，满分5，其余电影同理添加
  },
  // 其余电影数据保持结构一致添加rating即可
};

然后在JS渲染电影名称的代码之后，添加星星渲染逻辑：

// 原有渲染电影名称的代码之后新增以下内容
part = document.createElement("div");
part.className = "p-rating";
let rating = p.rating;
let starHtml = '';
for(let i=1;i<=5;i++){
  if(i <= Math.floor(rating)){
    starHtml += '<i class="bi bi-star-fill text-warning"></i>';
  }else if(i - 0.5 <= rating){
    starHtml += '<i class="bi bi-star-half text-warning"></i>';
  }else{
    starHtml += '<i class="bi bi-star text-warning"></i>';
  }
}
part.innerHTML = starHtml;
item.appendChild(part);

更简单的搭建方式 #

• 用轻量前端框架：比如Vue3，不用手动操作DOM，收藏状态、电影列表都可以通过响应式数据直接绑定，代码量可以减少40%以上，维护更方便
• 用模板引擎：比如Handlebars，把电影列表的HTML做成模板，直接传入数据渲染，不用写大量createElement的原生JS代码
• 低代码搭建：如果不需要自定义逻辑，可以用通用后台管理工具生成电影列表，配置收藏功能后导出静态页面即可直接使用

线上平台报错原因 #

你本地运行正常线上报错大概率是以下两个原因：

1. 资源路径问题：线上环境的img、css、js文件路径和本地不一致，导致资源加载失败
2. 环境限制：部分在线代码平台限制了localStorage的使用，而你的收藏功能依赖localStorage存储数据，导致初始化报错

内容的提问来源于stack exchange，提问作者user17446822