freecodecamp项目---twitch API

最新推荐文章于 2024-06-14 09:49:41 发布

神以灵

最新推荐文章于 2024-06-14 09:49:41 发布

阅读量1.6k

点赞数

分类专栏：【FreeCodeCamp】文章标签： api freeCodeCamp twitch

本文链接：https://blog.csdn.net/juzipidemimi/article/details/73656820

版权

【FreeCodeCamp】专栏收录该内容

5 篇文章 1 订阅

订阅专栏

该项目在codepen中的链接：https://codepen.io/lightforme/pen/XgRrxG

由于安全策略的影响，在codepen的iframe中页面中频道的链接点击之后不会跳转，在本地项目中可以，这里有stackoverflow上的相关解释：https://stackoverflow.com/questions/34426959/loading-the-facebook-api-in-jsfiddle

该项目是我freecodecamp教程上做的一个小项目，具体内容是调用twitch api，可以查看我添加的三个频道的开播信息，并且能够点击链接跳转到twitch上相应的频道，在项目实现过程中，因为是英文文档，半天搞不明白api中相关功能的实现，还好一直没放弃，最后看明白以后真的有一种成就感，很舒服~~~

知识点

要使多余的文本显示省略号，必须加上overflow:hidden;white-space:nowrap;最后再加上text-overflow:ellipsis；
不同的异步请求共用同一个变量容易发生混乱，达不到相应效果
text-size-adjust(css3样式)：auto | none | percentage
auto:文本大小根据设备尺寸进行调整
none:文本大小不会根据设备尺寸进行调整
percentage：用百分比来指定文本大小在设备尺寸不同的情况下如何调整
说明：检索或设置移动端页面中对象文本的大小调整；
该属性只在移动设备上生效；
如果你的页面没有定义meta viewport，此属性定义将无效；
对应的脚本特性为textSizeAdjust；
text-transform:none | capitalize(首字母大写) | uppercase(大写) | lowercase(小写) | inherit
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因

html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>twitch shows</title>
		<link rel="stylesheet" href="css/twicth.css" />
	</head>
	<body>
		<div class="container">
			<ul>
				<li id="header">
					<div id="tit" class="left">TWITCH STREAMERS</div>
					<div class="choose right">
						<ul>
							<li>ALL</li>
							<li>ONLINE</li>
							<li>OFFLIINE</li>
						</ul>
					</div>
				</li>
				<li id="display"></li>
				<li></li>
			</ul>
		</div>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="js/twicth.js"></script>
	</body>
</html>

css:

/*//公共样式*/
body,div,ul,li,p,img{
				margin:0px;
				padding:0px;
			}
li,ul{
	list-style: none;
}
body{
	font-family: 'Droid Serif';
}
.left{
	float:left;
}
.right{
	float:right;
}
/*除display区域外的样式*/
.container{
	margin:0 auto;
}
.container>ul>li,.container{
	width:600px;
}
.container>ul>li{
	margin-bottom: 5px;
}
.container>ul>li#header{
	height:100px;
	background:#7197a9;
}
.container>ul>li#header #tit{
	color:#cec8c8;
	font-size:30px;
	font-weight: bold;
	line-height: 100px;
	margin-left:20px;
}
.container>ul>li#header .choose{
	font-size:12px;
}
.container>ul>li#header .choose ul{
	margin-top:10px;
}
.container>ul>li#header .choose li{
	text-align: center;
	width:62px;
	height:20px;
	line-height: 20px;
	margin-bottom: 3px;
	border-radius:3px;
	background:#cec8c8;
	font-weight:bold;
	font-size:12px;
}
body > div > ul > li:nth-child(3){
	height:10px;
	background:#7197a9;
}
/*display区域*/
#display > div.online{
	background:#bed2c6;
	margin-bottom:5px;
}
#display > div.online a{
	color:#e2a980; 
}
#display > div.offline{
	background:#e2a980; 
	margin-bottom:5px;
}
#display > div.offline a{
	color:#bed2c6;
}
#header > div.choose.right > ul > li{
	cursor:pointer;
}
#display .all:after{
	content: '';
	display: block;
	clear:both;
}
#display .all div{
	float:left;
	margin-right:30px;
}
#display > div .imgBox{
	margin:7px;
}
#display img{
	width:60px;
	height:60px;
	border-radius:50%;
	border:3px solid white;
}
#display a{
	line-height:84px;
	text-decoration: none;
}
#display a:hover{
	text-decoration:underline;
}
#display > div .link{
	margin-left:20px;
	width:110px;
	text-align:center;
}
#display .des{
	width:300px;
	height:80px;
	overflow: hidden;
	line-height:80px;
	text-overflow: ellipsis;
	white-space:nowrap;
}

var urlId = ["45877376","79776140","30816637"];//分别是三个频道的频道号
function getChannels(){
	//make不同url,分别用于查询频道状态和查询频道相关信息
	function makeUrl(type,id){
		return 'https://api.twitch.tv/kraken/' + type + '/' + id;
	};
	for(let i in urlId){//这里如果不使用let，下面的ajax请求都是异步执行的，使用的i值有可能都为2
		//查看频道状态-是否开播
		$.ajax({
			type:"get",
			url:makeUrl('streams',urlId[i]),
			datatype:'JSONP',
			headers:{
					'Accept': 'application/vnd.twitchtv.v5+json',
					'Client-ID': 'zqe68al1fduevoswjw5slnayxxxqo9'
				},
			success:function(data){
				if(data.stream == null){
					var status = false;
				}else{
					var status = true;
				};
				//查询频道相关信息
				$.ajax({
					type:"get",
					url:makeUrl('channels',urlId[i]),
					headers:{
							'Accept': 'application/vnd.twitchtv.v5+json',
							'Client-ID': 'zqe68al1fduevoswjw5slnayxxxqo9'
						},
					datatype:'JSONP',
					success:function(data){
						var statusStr = (status)?'online':'offline';
						var html = '<div class="all '+ statusStr +'"><div class="imgBox"><img src="'+ data.logo +'" /></div><div class="link"><a target="_blank" href="'+ data.url +'">'+ data.name +'</a></div><div><p class="des">'+ data.description +'</p></div></div>';
						statusStr == 'online' ? $("#display").prepend(html) : $("#display").append(html);
					}
				});
			}
		});
	};
};
//设置三个按钮的点击事件
$(function(){
	getChannels();
	$('#header > div.choose.right > ul > li:nth-child(1)').click(function(){
		$('#display > div.all').show();
	});
	$('#header > div.choose.right > ul > li:nth-child(2)').click(function(){
		$('#display > div.all').hide();
		$('#display > div.online').show();
	});
	$('#header > div.choose.right > ul > li:nth-child(3)').click(function(){
		$('#display > div.all').hide();
		$('#display > div.offline').show();
	});
});

如果发现错误或者有更好的建议可以在评论中告诉我~~

神以灵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
freecodecamp项目---twitch API

该项目在codepen中的链接：https://codepen.io/lightforme/pen/XgRrxG 由于安全策略的影响，在codepen的iframe中页面中频道的链接点击之后不会跳转，在本地项目中可以，这里有stackoverflow上的相关解释：https://stackoverflow.com/questions/34426959/loading-the-facebook-a
复制链接

扫一扫