自学前端:用豆瓣API来写电影搜索页面

自学前端:用豆瓣API来写电影搜索页面_第1张图片

这是楼主自学前端练习的一个小项目,欢迎大家来指正错误。欢迎加入前端自学群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=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

你可能感兴趣的:(自学前端:用豆瓣API来写电影搜索页面)