<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
font-family: "宋体";
}
.conut{
height: 50px;
}
.conut span{
font-size: 18px;
padding: 0 15px;
line-height: 50px;
color: #009966;
}
.movieList{
border-top:2px solid #096;
}
.movieList li{
display: inline-block;
padding:0 30px;
line-height: 36px;
font-size: 14px;
border-right:1px solid #FFF ;
color: #666;
cursor: pointer;
}
.movieList li:hover{
color: #009966;
}
.movie{
width: 500px;
margin: 0 auto;
margin-top: 200px;
text-align: center;
color: #096;
}
</style>
</head>
<body>
<div class="conut">
<span>正在上映</span>
<span>(20)</span>
</div>
<ul class="movieList">
<!--<li>战狼2</li>
<li>机器人9号</li>
<li>蜘蛛侠·英雄归来</li>
<li>敦伦克尔</li>
-->
</ul>
<div class="movie">
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
var apiURL = "http://api.douban.com";
var movieApi = {
inTheaters:"/v2/movie/in_theaters",//正在热映
comingSoon:"/v2/movie/coming_soon",//即将上映
moviedetail:"/v2/movie/subject/" //电影条目信息
}
$(function(){
$.ajax({
type:"get",
url:apiURL+movieApi.inTheaters,
data:{
},
dataType:"jsonp",
async:true,
success:function(data){
//console.log(data)
$(".conut span").first().html(data.title);
$(".conut span").last().html("("+data.count+")");
var movieItem="";
$.each(data.subjects, function(i,item) {
movieItem+="<li data-itemid="+escape("电影"+item.id)+">"+item.title+"("+item.year+")</li>";
/*var escapes = escape(item.title); //escape 转码
console.log(escapes);
var unescapes = unescape(escapes); //unescape 解码
console.log(unescapes);*/
});
$(".movieList").empty().append(movieItem);
}
});
})
$(".movieList").on("click","li",function(e){
var data_itemId =unescape($(this).attr("data-itemid"));
var itemid = data_itemId.substring(2,data_itemId.length)
$.ajax({
type:"get",
url:apiURL+movieApi.moviedetail+itemid,
dataType:'jsonp',
async:true,
success:function(data){
console.log(data);
var movie = "<img src="+data.images.medium+"/><h1>"+data.title+"</h1>"
$(".movie").empty().append(movie);
},
error:function(xhr,em,e){
if(xhr.status == 404){
$(".movie").empty().append("<div style='text-align:center'>该电影已下架</div>")
}
}
});
})
</script>
</html>
