我想要一个有电视剧剧集评价、可插入剧照,做一个简单的网页。用到js,jquery,代码
时间: 2024-04-02 17:36:32 浏览: 173
一个简单的含js和jQuery的网页
5星 · 资源好评率100%
好的,以下是一个简单的电视剧评价网页的代码示例,使用了 jQuery 和 Bootstrap:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电视剧评价</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>电视剧评价</h1>
<div class="row">
<div class="col-md-6">
<div class="card mb-3">
<img src="https://picsum.photos/id/237/300/200" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">权力的游戏</h5>
<p class="card-text">一个双方争夺七国王位的故事。</p>
<p class="card-text">评分:<span id="score">暂无评分</span></p>
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#scoreModal">评价</a>
</div>
</div>
</div>
</div>
</div>
<!-- 评分弹框 -->
<div class="modal fade" id="scoreModal" tabindex="-1" role="dialog" aria-labelledby="scoreModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="scoreModalLabel">评价权力的游戏</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="scoreInput">评分</label>
<input type="number" class="form-control" id="scoreInput" placeholder="请输入评分(0-10分)">
</div>
<div class="form-group">
<label for="commentInput">评论</label>
<textarea class="form-control" id="commentInput" rows="3"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="submitScore">提交</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script>
$(function() {
// 提交评分
$('#submitScore').click(function() {
var score = $('#scoreInput').val();
var comment = $('#commentInput').val();
if (score && score >= 0 && score <= 10) {
$('#score').text(score + '分');
$('#scoreModal').modal('hide');
} else {
alert('评分必须在0-10分之间');
}
});
});
</script>
</body>
</html>
```
在这个示例中,我们使用了 Bootstrap 的卡片组件来展示电视剧的基本信息和评分,使用了模态框来实现评分的功能。当用户点击评价按钮时,会弹出一个模态框,用户可以在模态框中输入评分和评论,点击提交按钮后,将评分显示在电视剧信息中。
该示例只是一个简单的示例,您可以根据自己的需求修改和扩展。
阅读全文