写一个前端展示各个电影的平均分
时间: 2024-03-01 20:52:13 浏览: 22
好的,为了展示各个电影的平均分,您需要首先从后端获取电影的评分数据。您可以使用AJAX或Fetch API来发送HTTP请求,并从服务器获取数据。
假设您已经成功获取了评分数据,并将其存储在一个JSON对象中。那么,下面是一些HTML和JavaScript代码,可以帮助您展示各个电影的平均分:
```html
<!-- HTML代码 -->
<h1>电影评分</h1>
<table>
<thead>
<tr>
<th>电影名称</th>
<th>平均分</th>
</tr>
</thead>
<tbody id="movies-table">
</tbody>
</table>
```
```javascript
// JavaScript代码
const ratings = [
{ name: '电影1', score: 4.5 },
{ name: '电影2', score: 3.2 },
{ name: '电影3', score: 4.9 },
{ name: '电影4', score: 2.8 },
{ name: '电影5', score: 3.7 },
];
const moviesTable = document.getElementById('movies-table');
ratings.forEach(movie => {
const row = document.createElement('tr');
const nameCell = document.createElement('td');
const scoreCell = document.createElement('td');
nameCell.textContent = movie.name;
scoreCell.textContent = movie.score.toFixed(1);
row.appendChild(nameCell);
row.appendChild(scoreCell);
moviesTable.appendChild(row);
});
```
以上代码将展示一个包含电影名称和平均分的表格。您需要将其中的电影名称和平均分替换为您从服务器获取的实际数据。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)