自学前端:用豆瓣API来写电影搜索页面
2017-06-09 本文已影响55人
Vesine
这是楼主自学前端练习的一个小项目,欢迎大家来指正错误。欢迎加入前端自学群68701672。本群以项目为核心进行前端学习研究。此处用到豆瓣官方提供的API 核心代码如下
var currentIndex=0;
var movieNum=0;
$(".micon-sou").on("click",function(){
currentIndex=0
getmovie(currentIndex)
})
$(".rightnav").on("click",function(){
getNextMoive();
})
$(".leftnav").on("click",function(){
getPreMoive();
})
function getmovie(currentIndex){
$.ajax({
url: 'https://api.douban.com/v2/movie/search',
dataType: 'jsonp',
method: 'get',
data:{
'q': $('.search-input').val(),
},
jsonp: "callback",
jsonpCallback:"success_jsonpCallback",
success: function (res) {
var json = res.subjects[currentIndex];
var actorstr="";
movieNum=res.subjects.length;
title=json.title;
url=json.images.large;
director=json.directors[0].name;
$('.movie-title').text(title);
$('.movie-director-name').text(director);
for(i=0;i<json.casts.length;i++){
actorstr+=json.casts[i].name;
actorstr+=',';
}
actorstr.substring(0,json.casts.length+1);
$('.movie-actor-name').text(actorstr)
$(".content-img").css({
'background':'url('+url+')',
'background-repeat': 'no-repeat',
'background-position': 'center',
'background-size': 'cover',
});
rating.init('.movie-pingfen',{
num:Math.round(json.rating.average/2),
readOnly:true
});
}
})
};
function getNextMoive(){
if(currentIndex>=movieNum-1){
currentIndex=0;
}else{
currentIndex+=1;
}
getmovie(currentIndex);
}
function getPreMoive(){
if(currentIndex<=0){
currentIndex=movieNum-1
}else{
currentIndex-=1;
}
getmovie(currentIndex);
}
//评星组件
var rating = (function(){
//点亮整颗星星
var lightEntire = function (el, options){
this.$el = $(el);
this.$item = this.$el.find('.micon-pingfen');
this.opts = options;
};
lightEntire.prototype.init = function(){
this.lightOn(this.opts.num);
if(!this.opts.readOnly){
this.bindEvent();
}
};
lightEntire.prototype.lightOn = function(num){
num = parseInt(num);
this.$item.each(function(index){
if(index<num){
$(this).addClass('love');
}else{
$(this).removeClass('love');
}
});
};
lightEntire.prototype.bindEvent = function(){
var self = this;
var itemLength = self.$item.length;
self.$el.on('mouseover','.micon-pingfen',function(){
var num = $(this).index()+1;
self.lightOn(num);
(typeof self.opts.select === 'function') && self.opts.select.call(this,num,itemLength);
self.$el.trigger('select',[self.opts.num,itemLength]);
}).on('click','.micon-pingfen',function(){
self.opts.num = $(this).index()+1;
(typeof self.opts.chosen === 'function') && self.opts.chosen.call(this,num,itemLength);
self.$el.trigger('chosen',[self.opts.num,itemLength]);
}).on('mouseout',function(){
self.lightOn(self.opts.num);
});
};
//默认参数
var defaults = {
num:0,
readOnly:false,
select:function(){},
chosen:function(){}
};
//初始化
var init = function(el,options) {
options = $.extend({},defaults,options);
new lightEntire(el,options).init();
};
return {
init:init
};
})();
$('#rating').on('select',function(e,num,total){
}).on('chosen',function(e,num,total){
});