【JQuery】Twitch直播应用

前端开发 简书

刚接触API和JSON的时候写的一个小APP,功能很简单,就是获取Twitch TV的一些播主,分别显示他们现在是否在线,点击他们就可以进入他们的直播间。

JQuery代码

$(document).ready(function() {

    //希望获取的播主的名称,这个数组可以按照自己的需要增删播主
    var streamer = ["freecodecamp", "storbeck", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff", "TR7K", "ESL_SC2", "Sad_Junior", "brunofin", "Monstercat", "LobosJR", "Zfg1"];
    var html = "";

    //这个url用于离线播主的头像显示
    var logoUrl = "https://pbs.twimg.com/profile_images/2349866958/m9pjwl1x1n3nvzf8x8rc.png";

    //遍历每一个数组内的播主
    streamer.forEach(function(e) {
        //使用$.getJSON()获取数据
        //url中的client_id需要自己去到twitch内注册登录后在后台获取
        $.getJSON('https://api.twitch.tv/kraken/streams/' + e + '?client_id=fzbbk79fm2hjsqemyxcgfhhmqebtvw&callback=?', function(data) {
            if (data.stream === null) {
                html += "
" + e + "
"; $(".container").html(html); } else if (data.error !== null && data.error !== undefined) { html += "
" + e + "
"; $(".container").html(html); } else { html += ""; $(".container").html(html); } }); }); //以下是三个按钮的监听事件,点击后分别显示在线、离线或全部播主 $("#pickOnline").click(function() { $("[id='online']").show(); $("[id='offline']").hide(); }); $("#pickOffline").click(function() { $("[id='offline']").show(); $("[id='online']").hide(); }); $("#pickAll").click(function() { $(".item").show(); }); });

APP界面

点击ONLINE可只显示在线播主,OFFLINE和ALL STREAMS同理

打了蓝色钩钩的就是在线正在直播的播主,点击他的名字就能进入他的直播间

DEMO链接晚点再放哈~

THE END.

简书稿源:简书 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » 【JQuery】Twitch直播应用

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录