抽搐流图像并仅在在线流上排序
Twitch stream image and sort on top only online streams
我找到了一些代码来显示Twitch主播以及谁在线,谁不在线。 (代码:http://jsfiddle.net/LYv3R/5/)
现在我想用流图像升级此代码并首先对在线流进行排序。例如:
默认代码结果:
streamer1 (Offline)
streamer2 (Offline)
streamer3 (Online)
streamer4 (Online)
但我想要这样的东西:
IMAGE streamer3 (Online)
IMAGE streamer4 (Online)
IMAGE streamer1 (Offline)
IMAGE streamer2 (Offline)
我不懂JavaScript。
你可以
或需要添加很多东西来制作一个伟大的工作JavaScript代码......我可以告诉你的是将所有的JavaScript代码更改为以下示例之一:
示例一:
var hello = "hello";
/* This is an alternate method to creating javascript methods
function streamer(name, status, url) {
this.name = name;
this.status = status;
this.url = url;
} */
// The streamer object
// here we will store the necessary information from
// the twitch api json file
var Streamer = {
id: 0,
status: "title",
name: "strimmah",
display_name: "Strimmah",
url: "https://secure.twitch.tv/freecodecamp", // test url
previewImgs: ["large", "medium", "small", "template"],
game: "GaM3",
viewers: 0,
init: function(name, status, game, url) {
this.name = name;
this.status = status;
this.game = game;
this.url = url;
},
init: function(name, status, game, viewers, url) {
this.name = name;
this.status = status;
this.game = game;
this.viewers = viewers;
this.url = url;
},
initPreviewImgs: function(large, medium, small, template) {
this.previewImgs[0] = large;
this.previewImgs[1] = medium;
this.previewImgs[2] = small;
this.previewImgs[3] = template;
}
};
// delete test variables
var test = Object.create(Streamer);
var backUpImage = "https://static-cdn.jtvnw.net/ttv-static/404_preview-640x360.jpg";
var tempStreamers = [
"nokss68",
"snake606",
"team_itxx_cod",
"relapsegtv",
"sokkaenpyjama",
"elfepurpl3",
"lighthund",
"spacecakezed",
"nagatsu6",
"xng360",
"nazenko",
"giiskaa",
"floki_live",
"kayakox",
"jejen64",
"spivix",
"keryg4n",
"mehdii95150",
"mrgeekyfr",
"zaykerz92",
"etsalutdit",
"x_dyn_x",
"martind32",
"el_fideo11",
"xmisticoxx",
"zookervinc78",
"MrCraaftt",
"killerelite84",
"Aqu0ss",
"panteleimon42",
"veynstream",
"le_salty_gamer"
];
var streamDisplayStatus = 1; // 0-ALL, 1-Online Only, 2-Offline only
var twitchURL = "https://secure.twitch.tv/"; // to create channel urls
var streamerArray = [];
var showOffline = true;
// ENTRY POINT,
$(document).ready(function() {
/*for (var i = 0; i < tempStreamers.length; i++) {
loadStreamJsonInfo(tempStreamers[i], test);
}*/
// initial set of streamers, we start with Overview so show all
instantiateStreamers();
// navigator button setup
navigationButtons();
});
function instantiateStreamers() {
streamerArray.length = 0;
for (var i = 0; i < tempStreamers.length; i++) {
var streamer = Object.create(Streamer);
loadStreamJsonInfo(tempStreamers[i], streamer);
}
}
function loadStreamJsonInfo(name, data) {
/*$.getJSON('https://api.twitch.tv/kraken/streams/freecodecamp?callback=?', function(json) {
console.log(json);
}); */
$.getJSON('https://api.twitch.tv/kraken/streams/' + name + '?callback=?',
function(json) {
// console.log(json);
var stream = json.stream;
if (stream !== null) {
var channel = json.stream.channel;
data.init(channel.display_name, channel.status, channel.game, stream.viewers, channel.url);
data.initPreviewImgs(stream.preview.large, stream.preview.medium, stream.preview.small, stream.preview.template);
// console.log(data.name + " " + data.status + " " + data.viewers);
} else {
data.init(name, "Offline", "", 0, twitchURL + name)
data.initPreviewImgs(backUpImage, backUpImage, backUpImage, backUpImage);
}
streamerArray.push(data);
//console.log("TEST: " + streamerArray.length);
checkDisplayStatus(data);
}); // end of getJson
}
function checkDisplayStatus(data) {
switch (streamDisplayStatus) {
case 0:
createStreamerDOMItem(data);
break;
case 1:
if (data.status !== "Offline") {
createStreamerDOMItem(data);
}
break;
case 2:
if (data.status === "Offline") {
createStreamerDOMItem(data);
}
break;
default:
createStreamerDOMItem(data);
console.log("Default switch");
break;
}
}
function createStreamerDOMItem(streamData) {
var divStart = '<div class="streamer-container">';
var divEnd = '</div></div>';
var divStreamerItem = '<div class="streamer-item">' + '<a target="_blank" href="' + streamData.url +
'"><iframe src="https://player.twitch.tv/?channel='+ streamData.name +''" frameborder="0" scrolling="no" height="350" width="100%" /></a>' +
'<p id="viewer-count"><font color="yellow">' + streamData.viewers + ' personne(s) sur ' +
'<a href='"' + streamData.url + ''" id="streamer-link">' + streamData.name + '</a></p></font>'
+ '';
var final = divStart + divStreamerItem + divEnd;
$(final).appendTo(".live-channels-container");
}
function clearStreamerDOMItems() {
$("div").remove(".streamer-container");
}
body {
background-color: #141414;
margin-left: 30px;
margin-right: 30px;
}
/*
.title-header {
margin-top: 35px;
color: #CCCCCC;
}
.navbar-container {
color: #CCCCCC;
}
.navbar-container ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navbar-container li {
float: left;
padding: 7px 7px;
border-bottom: solid 1px #484848;
}
.navbar-container a {
color: #CCCCCC;
text-align: center;
padding: 7px 1px;
text-decoration: none;
}
.navbar-container a:hover {
color: white;
}
To see which button on the navbar you clicked on
.active {
color: #CCCCCC;
border-bottom: solid 1px white;
}
.navbar-container .active:hover {
color: #CCCCCC;
text-decoration: underline;
}*/
.live-channels-container {
color: #CCCCCC;
}
.streamer-container {
display: inline-block;
width: 35%;
min-width: 150px;
height: 150px;
min-height: 50px;
position: relative;
margin: 15px 10px 5px 0px;
}
.streamer-item {
margin: 0 auto;
padding: 0px 0px 0px 30px;
}
.streamer-item img {
width: 100%;
min-width: 50px;
}
.streamer-item p {
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#streamer-link,
a,
a:hover {
color: white;
}
#viewer-count {
font-size: 12px;
}
<style src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<style src="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<div>
<div class="navbar-container">
</div>
<br>
<div class="live-channels-container">
</div>
<!-- END OF STREAMER BOXES-->
</div>
<!-- main content container-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
示例二:
$(document).ready(function () {
function callAPI () {
var errQty = 0;
var onQty = 0;
var offQty = 0;
var errors = [];
var online = [];
var offline = [];
// format and insert 'xhr.response' in HTML
function formatInHTML(streamJSON, channel) {
var url = 'http://www.twitch.tv/' + channel;
var connection, status, language, viewers, start, startTime, startDate, channelLogo, streamImg;
var today = new Date();
if (streamJSON.hasOwnProperty('stream')) {
if (streamJSON.stream) { // if is streaming
connection = 'online';
status = streamJSON.stream.channel.status;
language = streamJSON.stream.channel.language.toUpperCase();
viewers = streamJSON.stream.viewers;
channelLogo = streamJSON.stream.channel.logo;
streamImg = streamJSON.stream.preview.large;
start = new Date(streamJSON.stream.channel.updated_at);
startTime = start.getHours() + ':' + start.getMinutes();
startDate = (start.getDate() == today.getDate() && start.getMonth() == today.getMonth()) ? 'today' : start.getDate() + '/' + start.getMonth() + '/' + start.getFullYear().slice(-2);
online.push('<a href="' + url + '" target="_blank"><div class="channel col-xs-12 col-sm-6 col-md-3">');
online.push('<div class="' + connection + ' "style="background-image: url(' + streamImg + ')">');
online.push('<div class="description">');
online.push('<img src="' + channelLogo + '" class="logo img-responsive img-circle" alt="' + channel + ' Logo">');
online.push('<p class="name text-center">' + channel + '<span class="language"> [' + language + ']</span></p>');
online.push('<p class="status text-center">' + status + '</span></p>');
online.push('<p class="viewers text-center">' + viewers + ' viewing</p>');
online.push('<p class="since text-center">Started: ' + startTime + ' (' + startDate + ')</p>');
online.push('</div> <!-- description -->');
online.push('</div> <!-- channel -->');
online.push('</div></a> <!-- col-xs-12 -->');
onQty++;
} else { // if is offline
connection = 'offline';
offline.push('<a href="' + url + '" target="_blank"><div class="channel col-xs-12 col-sm-6 col-md-3">');
offline.push('<div class="' + connection + '">');
offline.push('<div class="description">');
offline.push('<p class="name text-center">' + channel + '</p>');
offline.push('<p class="status text-center">offline</p>');
offline.push('</div> <!-- description -->');
offline.push('</div> <!-- channel -->');
offline.push('</div></a> <!-- col-xs-12 -->');
offQty++;
}
}
// outputs HTML when finish API requests
if (onQty + offQty + errQty == channels.length) {
document.getElementById('stream').innerHTML = online.join('') + offline.join('') + errors.join('');
if (onQty > 0) {
document.getElementById('online-qty').innerHTML = 'Online: ' + onQty + ' | ';
}
if (offQty > 0) {
document.getElementById('offline-qty').innerHTML = 'Offline: ' + offQty;
}
if (errQty > 0) {
document.getElementById('error-qty').innerHTML = ' | Not Found: ' + errQty;
}
}
}
var channels = ["FreeCodeCamp", "storbeck", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff", "SuperGuitarBros", "AdrianneCurry", "Paulow3b", "esl_sc2", "OgamingSC2", "tr7k", "NWGamesBrasil", "s2AlineFaria", "NoExist12345"];
// cals API for each channel in 'channels'
channels.forEach(function (channel) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.twitch.tv/kraken/streams/' + channel, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) { // request DONE
if (xhr.status == 200) { // OK with request
formatInHTML(JSON.parse(xhr.response), channel);
} else { // page not found (xhr.status == 400)
errors.push('<div class="channel col-xs-12 col-sm-6 col-md-3">');
errors.push('<div class="error">');
errors.push('<div class="description">');
errors.push('<p class="name text-center">' + channel + '</p>');
errors.push('<p class="status text-center">Channel doesn''t exist =/</p>');
errors.push('</div> <!-- description -->');
errors.push('</div> <!-- error -->');
errors.push('</div> <!-- channel -->');
errQty++;
formatInHTML('', channel);
}
}
};
xhr.send();
});
}
callAPI();
});
#twitch-logo {
margin: 20px auto 0 auto;
fill: #6441a5;
}
#qty {
line-height: 2em;
}
.channel{
margin-top: 20px;
}
.online {
padding: 20px;
background-size: cover;
}
.offline {
color: #fff;
background-image: url("http://static-cdn.jtvnw.net/previews-ttv/live_user_test_channel-640x360.jpg");
background-size: cover;
padding: 20px;
}
.error {
background-color: black;
padding: 20px;
}
.description{
height: 260px;
padding: 10px;
}
.online .description {
color: rgb(200, 200, 200);
background-color: rgba(0, 0, 0, 0.6);
}
.offline .description {
color: rgb(39, 25, 65);
background-color: rgba(190, 190, 190, 0.8);
}
.error .description {
color: black;
background-color: rgba(190, 190, 190, 0.8);
}
.description:hover{
color: #fff;
background-color: rgba(39, 25, 65, 0.7);
}
.logo{
max-height: 70px;
margin: 0 auto;
}
.name {
line-height: 3;
}
a {
text-decoration: none;
}
.name {
font-weight: bold;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 text-center">
<svg id="twitch-logo" aria-label="Twitch Logo" class="svg-logo_twitch" height="32px" role="img" version="1.1" viewBox="0 0 94 32" width="94px" x="0px" y="0px">
<title>Twitch</title>
<desc>Streamers</desc>
<path clip-rule="evenodd" d="M88,5h-6V0h-9l-6,5h-5.5L59,7.5V5h-5V0H36v5H16l-5-5H0v22l5,5.25L14,32h6v-1.5l3,1.5h12l2-3l1,3h7v-3l3,3h8l0.5-3l2.5,3h10l3-3v3h4l3-3v3h7l7-6V10L88,5z M13,13H8v6h5v6H6l-4-4V2h6v5h5V13z M36,21.5L32.5,25H15V7h6v12h2V7h6v12h2V7h5V21.5z M44,25h-6V7h6V25z M44,5h-6V2h6V5z M57,13h-5v6h5v6h-7l-4-4V2h6v5h5V13z M72,13h-7v6h7v6h-9l-4-4V11l4-4h9V13z M91,25h-6V13h-5v12h-6V2h6v5h7l4,4V25z" fill-rule="evenodd"></path>
</svg>
<span>by <a href="http://raphaelfernandes.com" target="_blank">R4PH43L</a></span>
<p id="qty"><span id="online-qty"></span><span id="offline-qty"></span><span id="error-qty"></span></p>
</div> <!-- col-xs-12 -->
</div> <!-- row -->
<div id="stream" class="row">
</div> <!-- strean -->
</div> <!-- container-fluid -->
$(document).ready(function () {
function callAPI () {
var errQty = 0;
var onQty = 0;
var offQty = 0;
var errors = [];
var online = [];
var offline = [];
// format and insert 'xhr.response' in HTML
function formatInHTML(streamJSON, channel) {
var url = 'http://www.twitch.tv/' + channel;
var connection, status, language, viewers, start, startTime, startDate, channelLogo, streamImg;
var today = new Date();
if (streamJSON.hasOwnProperty('stream')) {
if (streamJSON.stream) { // if is streaming
connection = 'online';
status = streamJSON.stream.channel.status;
language = streamJSON.stream.channel.language.toUpperCase();
viewers = streamJSON.stream.viewers;
channelLogo = streamJSON.stream.channel.logo;
streamImg = streamJSON.stream.preview.large;
start = new Date(streamJSON.stream.channel.updated_at);
startTime = start.getHours() + ':' + start.getMinutes();
startDate = (start.getDate() == today.getDate() && start.getMonth() == today.getMonth()) ? 'today' : start.getDate() + '/' + start.getMonth() + '/' + start.getFullYear().slice(-2);
online.push('<a href="' + url + '" target="_blank"><div class="channel col-xs-12 col-sm-6 col-md-3">');
online.push('<div class="' + connection + ' "style="background-image: url(' + streamImg + ')">');
online.push('<div class="description">');
online.push('<img src="' + channelLogo + '" class="logo img-responsive img-circle" alt="' + channel + ' Logo">');
online.push('<p class="name text-center">' + channel + '<span class="language"> [' + language + ']</span></p>');
online.push('<p class="status text-center">' + status + '</span></p>');
online.push('<p class="viewers text-center">' + viewers + ' viewing</p>');
online.push('<p class="since text-center">Started: ' + startTime + ' (' + startDate + ')</p>');
online.push('</div> <!-- description -->');
online.push('</div> <!-- channel -->');
online.push('</div></a> <!-- col-xs-12 -->');
onQty++;
} else { // if is offline
connection = 'offline';
offline.push('<a href="' + url + '" target="_blank"><div class="channel col-xs-12 col-sm-6 col-md-3">');
offline.push('<div class="' + connection + '">');
offline.push('<div class="description">');
offline.push('<p class="name text-center">' + channel + '</p>');
offline.push('<p class="status text-center">offline</p>');
offline.push('</div> <!-- description -->');
offline.push('</div> <!-- channel -->');
offline.push('</div></a> <!-- col-xs-12 -->');
offQty++;
}
}
// outputs HTML when finish API requests
if (onQty + offQty + errQty == channels.length) {
document.getElementById('stream').innerHTML = online.join('') + offline.join('') + errors.join('');
if (onQty > 0) {
document.getElementById('online-qty').innerHTML = 'Online: ' + onQty + ' | ';
}
if (offQty > 0) {
document.getElementById('offline-qty').innerHTML = 'Offline: ' + offQty;
}
if (errQty > 0) {
document.getElementById('error-qty').innerHTML = ' | Not Found: ' + errQty;
}
}
}
var channels = ["FreeCodeCamp", "storbeck", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff", "SuperGuitarBros", "AdrianneCurry", "Paulow3b", "esl_sc2", "OgamingSC2", "tr7k", "NWGamesBrasil", "s2AlineFaria", "NoExist12345"];
// cals API for each channel in 'channels'
channels.forEach(function (channel) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.twitch.tv/kraken/streams/' + channel, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) { // request DONE
if (xhr.status == 200) { // OK with request
formatInHTML(JSON.parse(xhr.response), channel);
} else { // page not found (xhr.status == 400)
errors.push('<div class="channel col-xs-12 col-sm-6 col-md-3">');
errors.push('<div class="error">');
errors.push('<div class="description">');
errors.push('<p class="name text-center">' + channel + '</p>');
errors.push('<p class="status text-center">Channel doesn''t exist =/</p>');
errors.push('</div> <!-- description -->');
errors.push('</div> <!-- error -->');
errors.push('</div> <!-- channel -->');
errQty++;
formatInHTML('', channel);
}
}
};
xhr.send();
});
}
callAPI();
});
#twitch-logo {
margin: 20px auto 0 auto;
fill: #6441a5;
}
#qty {
line-height: 2em;
}
.channel{
margin-top: 20px;
}
.online {
padding: 20px;
background-size: cover;
}
.offline {
color: #fff;
background-image: url("http://static-cdn.jtvnw.net/previews-ttv/live_user_test_channel-640x360.jpg");
background-size: cover;
padding: 20px;
}
.error {
background-color: black;
padding: 20px;
}
.description{
height: 260px;
padding: 10px;
}
.online .description {
color: rgb(200, 200, 200);
background-color: rgba(0, 0, 0, 0.6);
}
.offline .description {
color: rgb(39, 25, 65);
background-color: rgba(190, 190, 190, 0.8);
}
.error .description {
color: black;
background-color: rgba(190, 190, 190, 0.8);
}
.description:hover{
color: #fff;
background-color: rgba(39, 25, 65, 0.7);
}
.logo{
max-height: 70px;
margin: 0 auto;
}
.name {
line-height: 3;
}
a {
text-decoration: none;
}
.name {
font-weight: bold;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></style>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 text-center">
<svg id="twitch-logo" aria-label="Twitch Logo" class="svg-logo_twitch" height="32px" role="img" version="1.1" viewBox="0 0 94 32" width="94px" x="0px" y="0px">
<title>Twitch</title>
<desc>Streamers</desc>
<path clip-rule="evenodd" d="M88,5h-6V0h-9l-6,5h-5.5L59,7.5V5h-5V0H36v5H16l-5-5H0v22l5,5.25L14,32h6v-1.5l3,1.5h12l2-3l1,3h7v-3l3,3h8l0.5-3l2.5,3h10l3-3v3h4l3-3v3h7l7-6V10L88,5z M13,13H8v6h5v6H6l-4-4V2h6v5h5V13z M36,21.5L32.5,25H15V7h6v12h2V7h6v12h2V7h5V21.5z M44,25h-6V7h6V25z M44,5h-6V2h6V5z M57,13h-5v6h5v6h-7l-4-4V2h6v5h5V13z M72,13h-7v6h7v6h-9l-4-4V11l4-4h9V13z M91,25h-6V13h-5v12h-6V2h6v5h7l4,4V25z" fill-rule="evenodd"></path>
</svg>
<span>by <a href="http://raphaelfernandes.com" target="_blank">R4PH43L</a></span>
<p id="qty"><span id="online-qty"></span><span id="offline-qty"></span><span id="error-qty"></span></p>
</div> <!-- col-xs-12 -->
</div> <!-- row -->
<div id="stream" class="row">
</div> <!-- strean -->
</div> <!-- container-fluid -->
示例三:
var streamers = ["freecodecamp", "muczaczoslive", "kubon_", "chubbysue", "raav92", "dejavi", "docgotgame", "arquel", "mrcomtruise", "richiix27", "storbeck", "haluc86", "dnku123", "salva_salwa", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff"],
streamersString = "",
isOnline = [],
isOffline = [];
for (var i = 0; i < streamers.length; i++) {
streamersString = streamersString + streamers[i] + ",";
}
// function substr(str){
// return str.substrsing(0,str.length-1);
// }
// esl_csgo,haluc86,dnku123,salva_salwa
url = 'https://api.twitch.tv/kraken/streams?channel=' + streamersString;
$.ajax({
type: "GET",
url: url,
contentType: "application/json; charset=utf-8",
async: false,
dataType: "jsonp",
success: function(data) {
console.log("scs");
var streamData,
channelData = [],
preview = [],
dispName = [],
name = [],
links = [],
games = [],
status = [],
views = [],
broadcasterLanguage = [],
logo = [],
emptyDiv = [],
isHidden = true;
streamData = data.streams;
for (var i = 0; i < streamData.length; i++) {
channelData[i] = data.streams[i]["channel"];
links[i] = channelData[i]["url"];
games[i] = streamData[i]["game"];
preview[i] = streamData[i]["preview"]["large"];
views[i] = streamData[i]["viewers"];
broadcasterLanguage[i] = channelData[i]["broadcaster_language"];
dispName[i] = channelData[i]["display_name"];
name[i] = channelData[i]["name"];
logo[i] = channelData[i]["logo"];
status[i] = channelData[i]["status"];
views[i] = channelData[i]["views"];
isOnline[i] = name[i];
$("#content").append(
"<div class ='item clearfix online' >" +
"<div class = 'logo col-xs-12 col-md-12'>" +
"<a target='_blank' href=" + links[i] + ">" + "<img class ='img-circle img-thumbnail images pull-left' src =" + logo[i] + ">" + "</a>" +
"<span class = 'name'>" + "<h1>" + dispName[i] + "<sup>" + "<span class = 'lang '>" + broadcasterLanguage[i] + "</span>" + "</sup>" + "</h1>" + "<div class = 'preview'>" + "<button style = 'outline: none; background: none; border: none' class = 'btn btn-default btn-sm click' id=" + "previewButton" + i + ">" + "Preview" + "</button>" + "</span>" +
"</div>" +
"<div class = 'more pull-right col-lg-10 col-xs-12'>" +
"<span class = 'games'>" + "<strong>Game: </strong>" + "<em>" + games[i] + "</em>" + "</span>" +
"<span class = 'status'>" + "<p class = 'desc'>" + status[i] + "</p>" + "</span>" +
"<div class= 'previewImage' style = 'display: none; text-align: center' id=empty" + i + ">" + "<img src=" + preview[i] + " id=" + "previewImage" + i + ">" + "</div>" +
"</div>" +
"</div>" + "<hr>"
);
//Adding event listeners and leaving only number
$("#previewButton" + i).on("click", function(event) {
var clickedElementId = event.target.id
clickedElementId = clickedElementId.replace(/'D+/g, '');
$("#empty" + clickedElementId).toggle("slow");
});
}
isOffline = streamers;
for (var i = 0; i < isOnline.length; i++) {
for (var j = 0; j < streamers.length; j++) {
if (isOnline[i] === streamers[j]) {
isOffline[j] = "";
}
}
}
for (var i = 0; i < isOffline.length; i++) {
if (isOffline[i] !== "") {
$("#content").append(
"<div class ='item clearfix offline' >" +
"<h1 style = 'color: white' class = 'text-center'>" + "<img src=https://c1.staticflickr.com/7/6095/6851107174_631d916876_o.jpg class = 'img-circle img-thumbnail'>" + isOffline[i] + "</h1>" +
"</div>"
);
}
}
// Showing online/offline elements
$("#all").on("click", function() {
$(".item").show(600);
});
$("#online").on("click", function() {
$(".offline").slideUp(600);
$(".online").show(600);
});
$("#offline").on("click", function() {
$(".online").slideUp(600);
$(".offline").show(600);
});
},
error: function(error) {
console.log(error);
}
});
body,
html {
background: url('http://moserworld.pl/Apps/twitch/b4.jpg');
background-size: cover;
background-position: center;
height: 100%;
}
.container {
background: white;
}
/*.box{
border: 2px solid gray;
}*/
.images {
width: 80px;
margin-top: 5px;
box-shadow: 0px -17px 16px -9px gold;
}
.item {
border-radius: 20px;
padding: 0;
padding: 10px;
background: repeating-linear-gradient( -55deg, #222, #222 10px, #333 10px, #333 20px);
margin: 40px;
border-top: none;
box-shadow: 0px 13px 4px darkgrey;
}
.games {
color: aliceblue;
}
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.name h1 {
font-family: monospace;
font-weight: initial;
font-size: 25px;
padding-left: 100px;
font-style: initial;
border: 2px outset gainsboro;
border-top: none;
border-left: none;
margin-left: 41px;
padding: 0px;
background: -webkit-linear-gradient(90deg, rgb(103, 76, 193) 0%, rgb(90, 140, 250) 70%);
background: -moz-linear-gradient(90deg, rgb(103, 76, 193) 0%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(90deg, rgb(103, 76, 193) 0%, rgb(90, 140, 250) 70%);
background: linear-gradient(90deg, rgb(103, 76, 193) 0%, rgb(90, 140, 250) 70%);
height: 40px;
padding-top: 10px;
margin-bottom: 20px;
line-height: 0.78;
border-radius: 10px;
padding-left: 50px;
}
.desc {
font-size: 20px;
font-family: -webkit-body;
background: whitesmoke;
border: 1px outset azure;
border-top: none;
border-left: none;
width: 100%;
margin-top: 10px;
padding: 4px;
padding-left: 30px;
}
.lang {
font-size: 20px;
padding: 5px;
}
.logo h1 {
color: aliceblue;
}
.move {
border: 5px solid gray;
padding-top: 20px;
padding-bottom: 30px;
}
.preview {
margin-left: 40px;
background: azure;
width: 109px;
margin-top: -20px;
height: 25px;
font-style: italic;
border: 2px dashed gold;
border-top: none;
}
.buttonClick {
height: 25px;
background: none;
width: 67px;
padding-left: 0px;
padding: 0px;
border: none;
outline: none;
}
.red {
border: 2px solid red;
}
.hide {
height: 600px;
}
.previewImage img {
border: 4px solid white;
border-radius: 7px;
}
.offline h1 {
float: left;
color: #ddd;
font-family: monospace;
}
.offline img {
width: 120px;
float: left;
}
footer {
margin-top: 10px;
}
<html>
<head>
<meta charset="utf-8">
<title>Twitch Viewer</title>
<link rel="stylesheet" href="master.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js" charset="utf-8"></script>
<script src="sp.js" charset="utf-8"></script>
<style src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><i style ="font-size: 30px" class="fa fa-twitch"></i> Viewer</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li id="all" class="active"><a href="#">All</a></li>
<li><a id="online" href="#">Online</a></li>
<li><a id="offline" href="#">Offline</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a target="_blank" href="http://www.moserworld.pl"><i class = "fa fa-home"></i></a></li>
<li><a target="_blank" href="https://www.facebook.com/kamil.antropik"><i class="fa fa-facebook"></i></a></li>
<li><a target="_blank" href="https://twitter.com/MoserDraws"><i class="fa fa-twitter"></i></a></li>
<li><a target="_blank" href="https://www.instagram.com/mosermuz/"><i class = "fa fa-instagram"></i></a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12 move">
<div id="content" class="col-lg-12 box">
</div>
</div>
</div>
</div>
<footer class="container">Written and coded by © <em>Kamil Antropik</em></footer>
<script type="text/javascript">
</script>
</body>
</html>
var streamers = ["freecodecamp", "muczaczoslive", "kubon_", "chubbysue", "raav92", "dejavi", "docgotgame", "arquel", "mrcomtruise", "richiix27", "storbeck", "haluc86", "dnku123", "salva_salwa", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff"],
streamersString = "",
isOnline = [],
isOffline = [];
for (var i = 0; i < streamers.length; i++) {
streamersString = streamersString + streamers[i] + ",";
}
// function substr(str){
// return str.substrsing(0,str.length-1);
// }
// esl_csgo,haluc86,dnku123,salva_salwa
url = 'https://api.twitch.tv/kraken/streams?channel=' + streamersString;
$.ajax({
type: "GET",
url: url,
contentType: "application/json; charset=utf-8",
async: false,
dataType: "jsonp",
success: function(data) {
console.log("scs");
var streamData,
channelData = [],
preview = [],
dispName = [],
name = [],
links = [],
games = [],
status = [],
views = [],
broadcasterLanguage = [],
logo = [],
emptyDiv = [],
isHidden = true;
streamData = data.streams;
for (var i = 0; i < streamData.length; i++) {
channelData[i] = data.streams[i]["channel"];
links[i] = channelData[i]["url"];
games[i] = streamData[i]["game"];
preview[i] = streamData[i]["preview"]["large"];
views[i] = streamData[i]["viewers"];
broadcasterLanguage[i] = channelData[i]["broadcaster_language"];
dispName[i] = channelData[i]["display_name"];
name[i] = channelData[i]["name"];
logo[i] = channelData[i]["logo"];
status[i] = channelData[i]["status"];
views[i] = channelData[i]["views"];
isOnline[i] = name[i];
$("#content").append(
"<div class ='item clearfix online' >" +
"<div class = 'logo col-xs-12 col-md-12'>" +
"<a target='_blank' href=" + links[i] + ">" + "<img class ='img-circle img-thumbnail images pull-left' src =" + logo[i] + ">" + "</a>" +
"<span class = 'name'>" + "<h1>" + dispName[i] + "<sup>" + "<span class = 'lang '>" + broadcasterLanguage[i] + "</span>" + "</sup>" + "</h1>" + "<div class = 'preview'>" + "<button style = 'outline: none; background: none; border: none' class = 'btn btn-default btn-sm click' id=" + "previewButton" + i + ">" + "Preview" + "</button>" + "</span>" +
"</div>" +
"<div class = 'more pull-right col-lg-10 col-xs-12'>" +
"<span class = 'games'>" + "<strong>Game: </strong>" + "<em>" + games[i] + "</em>" + "</span>" +
"<span class = 'status'>" + "<p class = 'desc'>" + status[i] + "</p>" + "</span>" +
"<div class= 'previewImage' style = 'display: none; text-align: center' id=empty" + i + ">" + "<img src=" + preview[i] + " id=" + "previewImage" + i + ">" + "</div>" +
"</div>" +
"</div>" + "<hr>"
);
//Adding event listeners and leaving only number
$("#previewButton" + i).on("click", function(event) {
var clickedElementId = event.target.id
clickedElementId = clickedElementId.replace(/'D+/g, '');
$("#empty" + clickedElementId).toggle("slow");
});
}
isOffline = streamers;
for (var i = 0; i < isOnline.length; i++) {
for (var j = 0; j < streamers.length; j++) {
if (isOnline[i] === streamers[j]) {
isOffline[j] = "";
}
}
}
for (var i = 0; i < isOffline.length; i++) {
if (isOffline[i] !== "") {
$("#content").append(
"<div class ='item clearfix offline' >" +
"<h1 style = 'color: white' class = 'text-center'>" + "<img src=https://c1.staticflickr.com/7/6095/6851107174_631d916876_o.jpg class = 'img-circle img-thumbnail'>" + isOffline[i] + "</h1>" +
"</div>"
);
}
}
// Showing online/offline elements
$("#all").on("click", function() {
$(".item").show(600);
});
$("#online").on("click", function() {
$(".offline").slideUp(600);
$(".online").show(600);
});
$("#offline").on("click", function() {
$(".online").slideUp(600);
$(".offline").show(600);
});
},
error: function(error) {
console.log(error);
}
});
body,
html {
background: url('http://moserworld.pl/Apps/twitch/b4.jpg');
background-size: cover;
background-position: center;
height: 100%;
}
.container {
background: white;
}
/*.box{
border: 2px solid gray;
}*/
.images {
width: 80px;
margin-top: 5px;
box-shadow: 0px -17px 16px -9px gold;
}
.item {
border-radius: 20px;
padding: 0;
padding: 10px;
background: repeating-linear-gradient( -55deg, #222, #222 10px, #333 10px, #333 20px);
margin: 40px;
border-top: none;
box-shadow: 0px 13px 4px darkgrey;
}
.games {
color: aliceblue;
}
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.name h1 {
font-family: monospace;
font-weight: initial;
font-size: 25px;
padding-left: 100px;
font-style: initial;
border: 2px outset gainsboro;
border-top: none;
border-left: none;
margin-left: 41px;
padding: 0px;
background: -webkit-linear-gradient(90deg, rgb(103, 76, 193) 0%, rgb(90, 140, 250) 70%);
background: -moz-linear-gradient(90deg, rgb(103, 76, 193) 0%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(90deg, rgb(103, 76, 193) 0%, rgb(90, 140, 250) 70%);
background: linear-gradient(90deg, rgb(103, 76, 193) 0%, rgb(90, 140, 250) 70%);
height: 40px;
padding-top: 10px;
margin-bottom: 20px;
line-height: 0.78;
border-radius: 10px;
padding-left: 50px;
}
.desc {
font-size: 20px;
font-family: -webkit-body;
background: whitesmoke;
border: 1px outset azure;
border-top: none;
border-left: none;
width: 100%;
margin-top: 10px;
padding: 4px;
padding-left: 30px;
}
.lang {
font-size: 20px;
padding: 5px;
}
.logo h1 {
color: aliceblue;
}
.move {
border: 5px solid gray;
padding-top: 20px;
padding-bottom: 30px;
}
.preview {
margin-left: 40px;
background: azure;
width: 109px;
margin-top: -20px;
height: 25px;
font-style: italic;
border: 2px dashed gold;
border-top: none;
}
.buttonClick {
height: 25px;
background: none;
width: 67px;
padding-left: 0px;
padding: 0px;
border: none;
outline: none;
}
.red {
border: 2px solid red;
}
.hide {
height: 600px;
}
.previewImage img {
border: 4px solid white;
border-radius: 7px;
}
.offline h1 {
float: left;
color: #ddd;
font-family: monospace;
}
.offline img {
width: 120px;
float: left;
}
footer {
margin-top: 10px;
}
<html>
<head>
<meta charset="utf-8">
<title>Twitch Viewer</title>
<link rel="stylesheet" href="master.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js" charset="utf-8"></script>
<script src="sp.js" charset="utf-8"></script>
<style src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><i style ="font-size: 30px" class="fa fa-twitch"></i> Viewer</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li id="all" class="active"><a href="#">All</a></li>
<li><a id="online" href="#">Online</a></li>
<li><a id="offline" href="#">Offline</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a target="_blank" href="http://www.moserworld.pl"><i class = "fa fa-home"></i></a></li>
<li><a target="_blank" href="https://www.facebook.com/kamil.antropik"><i class="fa fa-facebook"></i></a></li>
<li><a target="_blank" href="https://twitter.com/MoserDraws"><i class="fa fa-twitter"></i></a></li>
<li><a target="_blank" href="https://www.instagram.com/mosermuz/"><i class = "fa fa-instagram"></i></a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12 move">
<div id="content" class="col-lg-12 box">
</div>
</div>
</div>
</div>
<footer class="container">Written and coded by © <em>Kamil Antropik</em></footer>
<script type="text/javascript">
</script>
</body>
</html>
希望我理解您的要求,并希望我可以帮助您,如果有其他事情不要害羞!
相关文章:
- JavaScript数组排序(函数)用于对表行进行排序,而不是排序
- 使用promise和mongoose对文档进行排序
- Selectize.js:如何对整数值的选项进行排序
- Javascript排序的图像弹出窗口..可以't单独弹出
- 如何通过引用var Using DataTables来进行分页或排序
- 为什么HTML5拖放的目标是孩子?(可排序列表)
- jQuery/JavaScript在线公文包表单-打印样式表
- AngularJs对所有页面中的所有记录进行排序
- 当属性不一致时,如何根据属性对JS对象列表进行排序
- 按从高到低对多个int变量进行排序
- jQuery UI可排序-多连接列表拖动
- Javascript排序字符串或数字
- 2个backbone.js集合,具有相同的模型,但排序顺序不同
- sort而不是排序javascript
- 通过从节点父级获取所有子级对节点进行排序(获取子级数组)
- 如何合并不同集合的游标并按日期排序
- 为什么我的JavaScript堆栈排序函数不起作用
- ui网格:在自定义表头模板中触发排序
- 抽搐流图像并仅在在线流上排序
- 用于 API 混搭、过滤和排序的在线 etl