NBA--js解析

• index.js

/**
 * Created by qiaoxinlin on 2019/12/26.
 */
var news = [
    "半场7铁7失误 詹姆斯：是浓眉考神点醒了我",
    "33+10延续高效 湖人客场13连胜浓眉太关键",
    "卡椒合计88分唐斯空砍39分 快船胜森林狼",
    "博格达诺维奇8记三分砍32分 爵士力克勇士",
    "8次失误辣眼睛 老詹28分准三双逃出会议室",
    "格拉汉姆16+5+7华盛顿两双 黄蜂客胜公牛",
    "卡椒合计88分唐斯空砍39分 快船胜森林狼",
    "杰克逊空砍43分字母哥37+11 雄鹿大胜灰熊",
    "格拉汉姆16+5+7华盛顿两双 黄蜂客胜公牛",
    "博格达诺维奇8记三分砍32分 爵士力克勇士"
];
var newshref = [
    "news1.html",
    "news2.html",
    "news3.html",
    "news4.html",
    "news5.html",
    "news6.html",
    "news7.html",
    "news8.html",
    "news9.html",
    "news10.html"
];
var jsonAreaWest = [
    {"rank":"01","imgs":"aa","name":"雄鹿","win":"02","false":"30","difference":"28"},
    {"rank":"02","imgs":"aa","name":"火箭","win":"32","false":"10","difference":"218"},
    {"rank":"03","imgs":"aa","name":"勇士","win":"32","false":"20","difference":"21"},
    {"rank":"04","imgs":"aa","name":"开拓者","win":"42","false":"40","difference":"1"},
    {"rank":"05","imgs":"aa","name":"雄鹿","win":"02","false":"30","difference":"28"},
    {"rank":"06","imgs":"aa","name":"火箭","win":"32","false":"10","difference":"218"},
    {"rank":"07","imgs":"aa","name":"勇士","win":"32","false":"20","difference":"21"},
    {"rank":"08","imgs":"aa","name":"开拓者","win":"42","false":"40","difference":"1"},
    {"rank":"09","imgs":"aa","name":"勇士","win":"32","false":"20","difference":"21"},
    {"rank":"10","imgs":"aa","name":"开拓者","win":"42","false":"40","difference":"1"},
    {"rank":"11","imgs":"aa","name":"雄鹿","win":"02","false":"30","difference":"28"},
    {"rank":"12","imgs":"aa","name":"火箭","win":"32","false":"10","difference":"218"},
    {"rank":"13","imgs":"aa","name":"勇士","win":"32","false":"20","difference":"21"},
    {"rank":"14","imgs":"aa","name":"开拓者","win":"42","false":"40","difference":"1"},
    {"rank":"15","imgs":"aa","name":"勇士","win":"32","false":"20","difference":"21"},
    {"rank":"16","imgs":"aa","name":"开拓者","win":"42","false":"40","difference":"1"}
];
var jsonAreaEast = [
    {"rank":"01","imgs":"a","name":"开拓者","win":"02","false":"30","difference":"28"},
    {"rank":"02","imgs":"aa","name":"honghua","win":"32","false":"10","difference":"218"},
    {"rank":"03","imgs":"aa","name":"开价","win":"32","false":"20","difference":"21"},
    {"rank":"04","imgs":"aa","name":"勇士","win":"42","false":"40","difference":"1"},
    {"rank":"05","imgs":"aa","name":"雄鹿","win":"02","false":"30","difference":"28"},
    {"rank":"06","imgs":"aa","name":"火箭","win":"32","false":"10","difference":"218"},
    {"rank":"07","imgs":"aa","name":"勇士","win":"32","false":"20","difference":"21"},
    {"rank":"08","imgs":"aa","name":"开拓者","win":"42","false":"40","difference":"1"},
    {"rank":"09","imgs":"aa","name":"勇士","win":"32","false":"20","difference":"21"},
    {"rank":"10","imgs":"aa","name":"开拓者","win":"42","false":"40","difference":"1"},
    {"rank":"11","imgs":"aa","name":"雄鹿","win":"02","false":"30","difference":"28"},
    {"rank":"12","imgs":"aa","name":"火箭","win":"32","false":"10","difference":"218"},
    {"rank":"13","imgs":"aa","name":"勇士","win":"32","false":"20","difference":"21"},
    {"rank":"14","imgs":"aa","name":"开拓者","win":"42","false":"40","difference":"1"},
    {"rank":"15","imgs":"aa","name":"勇士","win":"32","false":"20","difference":"21"},
    {"rank":"16","imgs":"aa","name":"开拓者","win":"42","false":"40","difference":"1"}
];



//加载新闻
function loadNews() {
    var newlists = document.getElementById("newlists");
    var ol = document.createElement("ol");
        for(var i=0; i<news.length;i++){
            var li = document.createElement("li");
            var a = document.createElement("a");
            /* 给a标签设置 href 属性  值为"news1.html"*/
            var text = document.createTextNode(news[i]);
            a.setAttribute("href",newshref[i]);
            ol.appendChild(li);
            li.appendChild(a);
            /* a标签用于跳转*/
            a.appendChild(text);
            newlists.appendChild(ol);
        }
}

/*点击东部联盟*/
var east = document.getElementById("wrap-left-border").onclick = function () {
    this.style.cssText = "text-decoration: none;border-bottom: 4px solid #e11647;color: #e11647;";
    var west = document.getElementById("wrap-right-border");
    west.style.cssText = "text-decoration: none;";

    var table = document.getElementById("rank-table");
    table.innerHTML = "";
    table.innerHTML = '<th width="55px">排名</th><th width="52.5px"></th><th width="83.75px">姓名</th><th width="46.25px">胜</th><th width="46.25px">负</th><th width="76.25px">胜负差</th>';

    var tBody = document.createElement("tbody");
    for (var i=0; i<jsonAreaWest.length; i++) {
        tBody.innerHTML += '<tr><td>'+jsonAreaWest[i].rank+'</td><td>'+jsonAreaWest[i].imgs+'</td><td>'+jsonAreaWest[i].name+'</td><td>' +jsonAreaWest[i].win+ '</td><td>'+jsonAreaWest[i].false+'</td><td>'+jsonAreaWest[i].difference+'</td></tr>'
    }
    table.appendChild(tBody);
};

/*点击西部联盟*/
var west = document.getElementById("wrap-right-border").onclick = function () {
    this.style.cssText = "text-decoration: none;border-bottom: 4px solid #e11647;color: #e11647;";

    var east = document.getElementById("wrap-left-border");
    east.style.cssText = "text-decoration: none;";
    var table = document.getElementById("rank-table");
    table.innerHTML = "";
    table.innerHTML = '<th width="55px">排名</th><th width="52.5px"></th><th width="83.75px">姓名</th><th width="46.25px">胜</th><th width="46.25px">负</th><th width="76.25px">胜负差</th>';

    var tBody = document.createElement("tbody");
    for (var i=0; i<jsonAreaEast.length; i++) {
        tBody.innerHTML += '<tr><td>'+jsonAreaEast[i].rank+'</td><td>'+jsonAreaEast[i].imgs+'</td><td>'+jsonAreaEast[i].name+'</td><td>' +jsonAreaEast[i].win+ '</td><td>'+jsonAreaEast[i].false+'</td><td>'+jsonAreaEast[i].difference+'</td></tr>'
    }
    table.appendChild(tBody);
};

/*轮播图*/
var ul = document.getElementById("index-scrollImg");
ul.style.left = "0px";
var nextBtn = document.getElementById("nextBtn").onclick = function () {
    var left = 0;
    var ul = document.getElementById("index-scrollImg");
    if(ul.style.left == "-1000px"){
        left = 0;
    }
    else {
        left = parseInt(ul.style.left)-500;
    }
    ul.style.left = left +"px";
    console.log(left);
};
var preBtn = document.getElementById("preBtn").onclick = function () {
    var left = 0;
    var ul = document.getElementById("index-scrollImg");
    if(ul.style.left == "0px"){
        left = -1000;
    }
    else {
        left = parseInt(ul.style.left) + 500;
    }
    ul.style.left = left +"px";
    console.log(left);
};
/*定时轮播图*/
function rigthPlay() {
    var left = 0;
    var ul = document.getElementById("index-scrollImg");
    if(ul.style.left == "0px"){
        left = -1000;
    }
    else {
        left = parseInt(ul.style.left) + 500;
    }
    ul.style.left = left +"px";
}
function autoPlay() {
    var time = setInterval("rigthPlay()",3000);
}

/*加载函数*/
function onLoad() {
    loadNews();
    autoPlay();
}