$(document).ready(function() {
var link = "https://api.twitch.tv/kraken/streams/";
var channelsArr = ["ESL_SC2", "OgamingSC2", "comster404", "cretetion", "freecodecamp", "brunofin", "storbeck", "sheevergaming", "RobotCaleb", "noobs2ninjas", "terakilobyte", "syndicate", "pewdiepie", "riotgames"];
var newItemBoxClosed = [];
var newItemBoxOn = [];
var newItemBoxOff = [];
for (var i = 0; i < channelsArr.length; i++) {
var currentLink = link + channelsArr[i] + "?callback=?";
$.getJSON(currentLink, function(data) {
// do something with the data;
if (data.status === 422) {
newItemBoxClosed.push("<div class='item-box'><ul><li><div class='profile-img'><div class='cross'></div><img src=''></div></li><li><div class='status-light' id='light-red'><p>off</p></div></li></ul><div class='reflection'></div><div class='username'></div><div class='userstatus'>channel closed</div></div>");
}
// item-box massive production
else {
$.getJSON(data["_links"].channel + "?callback=?", function(channelData) {
// if data.stream === null - there's no streaming
if (data.stream === null) {
newItemBoxOff.push("<div class='item-box'><ul><li><div class='profile-img'><img src='" + channelData.logo + "'></div></li><li><div class='status-light' id='light-red'><p>off</p></div></li></ul><div class='reflection'></div><div class='username'>" + channelData.display_name + "</div><div class='userstatus'>offline</div></div>");
}
// if data.stream !== null - stream is live
else {
newItemBoxOn.push("<div class='item-box'><ul><li><div class='profile-img'><img src='" + channelData.logo + "'></div></li><li><div class='status-light' id='light-green'><p>on</p></div></li></ul><div class='reflection'></div><div class='username'>" + channelData.display_name + "</div><div class='userstatus'>" + channelData.game + ": " + channelData.status + "</div></div>");
}
newItemBoxOn.forEach(function(item) {
$(container).append($(item));
});
}) // end inner json
}
}) // end getJSON
} // end for loop
}) // end ready
/* colorset:
grey - #D1D1D1;
purple - #6441A5;
*/
/*don't know if media queries needed if i have flexbox */
#container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
height: 99%;
}
@media screen and (max-width: 570px) {
#switch {
transform: translateX(5%);
}
}
/* fonts */
body {
background-color: #D1D1D1;
font-family: 'Dosis', sans-serif;
color: #6441A5;
}
#header {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
height: 35px;
margin: 6px 0 15px;
padding: 0;
}
#switch {
height: 36px;
width: 100px;
position: relative;
padding: 0px 5px;
transform: translate(24%, 6%);
font-family: 'Bungee Shade';
font-size: 0.77em;
text-align: center;
line-height: 35px;
font-weight: bold;
color: #444;
}
#switch-on,
#switch-on:active {
width: 48%;
height: 100%;
background: #44C947;
display: inline-block;
margin: 0;
padding: 0;
cursor: pointer;
box-shadow: 2px 2px 1px #555;
}
#switch-on:active {
background: #33B836;
transform: translate(2%, 4%);
box-shadow: 0 1px #999;
}
#switch-off,
#switch-off:active {
width: 48%;
height: 100%;
background: #E02443;
display: inline-block;
margin: 0;
padding: 0;
cursor: pointer;
box-shadow: 2px 2px 1px #555;
}
#switch-off:active {
background: #D01332;
transform: translate(2%, 4%);
box-shadow: 0 1px #999;
}
#title-bar {
width: 329px;
height: 35px;
border: 2px solid purple;
margin: 1px auto 4px;
transform: translateX(-1px);
-webkit-box-shadow: 2px 2px 2px #888;
-moz-box-shadow: 2px 2px 2px #888;
box-shadow: 2px 2px 2px #888;
position: relative;
}
.item-box {
width: 160px;
height: 250px;
border: 2px solid purple;
margin-right: 2px;
margin-bottom: 4px;
-webkit-box-shadow: 4px 5px 3px -1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 4px 5px 3px -1px rgba(0, 0, 0, 0.3);
box-shadow: 4px 5px 3px -1px rgba(0, 0, 0, 0.3);
overflow: hidden;
position: relative;
}
li {
list-style-type: none;
display: inline-block;
}
.profile-img {
-webkit-clip-path: polygon(25% 0%, 50% 2%, 75% 15%, 95% 50%, 82% 80%, 70% 90%, 25% 93%, 4% 60%, 5% 37%);
background: rgba(0, 0, 0, 0.4);
background-size: 50px 50px;
height: 100px;
width: 100px;
margin: 1px auto;
transform: translate(-10px, -10px);
position: absolute;
z-index: 1;
}
.status-light {
width: 10px;
height: 10px;
border-radius: 100%;
transform: translate(95px, 1px);
box-shadow: 0px 0px 1px rgba(10, 10, 10, 0.8);
}
p {
font-size: 0.62em;
line-height: 32px;
transform: translate(-4px, 2px);
font-family: 'Bungee Shade';
}
#light-red {
background: #E02443;
}
#light-green {
background: #44C947;
}
.username,
.userstatus {
display: block;
width: 90%;
margin: 1px auto;
color: #6441A5;
font-size: 1em;
-webkit-transform: translate(0px, 78px);
padding: 2px 0px;
text-align: center;
}
.reflection {
position: absolute;
-webkit-clip-path: polygon(25% 10%, 50% 2%, 75% 15%, 95% 50%, 82% 80%, 70% 70%, 75% 100%, 10% 79%, 5% 75%, 2% 60%, 4% 72%, 0% 45%, 0% 40%, 4% 34%);
height: 300px;
width: 300px;
background: rgba(100, 65, 165, 0.12);
transform: translate(0px, -50px);
}
.username {
border: 1px solid #6441A5;
}
.userstatus {
font-size: 0.9em;
font-weight: bold;
margin: 5px auto;
}
img {
width: inherit;
height: inherit;
box-shadow: 1px 2px 5px black;
}
h1 {
font-family: 'Bungee Shade';
font-size: 1.4em;
margin: 0 auto;
text-align: center;
transform: translateY(-13px);
}
/*** red cros ***/
.cross {
position: absolute;
right: 68px;
opacity: 1;
}
.cross:before,
.cross:after {
position: absolute;
left: 15px;
content: ' ';
height: 105px;
width: 2px;
background-color: #E02443;
}
.cross:before {
transform: rotate(45deg);
}
.cross:after {
transform: rotate(-45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="header">
<div id="switch">
<div id="switch-on">on</div>
<div id="switch-off">off</div>
</div>
<div id="title-bar">
<h1>twitch observer</h1>
</div>
</div>
<div id="container">
<!-- container start -->
</div>
<!-- container end -->
</body>
'的console.log()'調用是的'$ .getJSON()'調用之外; '.getJSON()'異步返回結果 – guest271314
這是因爲$ .getJson是一個異步操作。當您的頁面首次加載時,您的console.logs將首先被打印。 – Vatsal
因此,我不能將屬性值存儲在外部,並將它們追加到$ .getJSON()之外的網站中?現在我知道那個控制檯。日誌將無法捕捉它,但對我來說這裏重要的是 - 我不知道如何將這些東西附加到HTML正確 – Sebastian