欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

NBA--js解析

程序员文章站 2022-04-21 20:13:56
...
  • 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();
}

NBA--js解析
NBA--js解析
NBA--js解析

NBA--js解析

相关标签: 仿NBA官网