我用最独特的方式为情人节准备了这些。。。

最新推荐文章于 2024-02-15 22:52:33 发布

space9bug

最新推荐文章于 2024-02-15 22:52:33 发布

阅读量590

点赞数 1

本文链接：https://blog.csdn.net/qq_41730930/article/details/79327764

版权

原创文｜Space9

虽然不一样的专业但也无法阻挡我们之间心的靠近
同样的呼吸同样的心吸引着我们走向了彼此
我们的相遇是如此的传奇因为你有了不一样的改变
每天的生活变得更加快乐人生目标也坚定了许多
遇见你是我一生最美的幸运
在你的陪伴下我加入了全民K歌唱出了自己
情人节我为你准备了这些希望你能喜欢这个独特的方式

实现过程

基础部分

文件目录结构
favicon.ico      //网站头像文件
index.html       //网站首页文件
jquery.min.js   // jQuery库文件
jsUrlHelper.js //网址参数的解析文件

新建index.html文件
桌面新建文本文档，修改文件名为index.html，接着就开始我们的开发工作啦
在之间设置网站标题，background后面设置背景图片地址

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>全民K歌歌曲下载</title> 
 </head> 
 <body background="http://www.w3school.com.cn/i/eg_bg_06.gif">
   用户主页： 
  <input type="text" id="homePage" placeholder="输入网址" autofocus="autofocus" /> 
  <input type="button" id="btn" value="确定" onclick="myfunction()" />  
 </body>
</html>

添加favicon(网站头像) 网址前面的小图标
将下面的代码，添加在之间就可以了

<link href="favicon.ico" mce_href="favicon.ico" rel="bookmark" type="image/x-icon" /> 
<link href="favicon.ico" mce_href="favicon.ico" rel="icon" type="image/x-icon" /> 
<link href="favicon.ico" mce_href="favicon.ico" rel="shortcut icon" type="image/x-icon" />

引入网站需要的js库文件
将下面的代码，同样添加在之间，并将两个文件放置到与index.html文件相同的目录

<script src="./jquery.min.js?=2.1.4"></script> 
<script src="./jsUrlHelper.js"></script> //URL网址的解析库文件，引用自网上

添加键盘Enter键的响应动作
原始只能通过鼠标点击确定，所以我们为键盘点击添加动作

document.onkeydown = function (e) {
	var theEvent = window.event || e;
	var code = theEvent.keyCode || theEvent.which;
	if (code == 13) {
		$("#btn").click();
	}
}

核心部分

通过用户点击确定按钮，触发myfunction来解析URL，获取其中的参数uid的值

var userId;
var myfunction = function(){
	urlUid=document.getElementById("homePage").value; //从页面获取用户主页地址
	userId=jsUrlHelper.getUrlParam(urlUid,"uid"); //通过URL解析库获取参数uid值
	fun();
}

利用ajax向接口发送get请求，并设定dataType为jsonp，以及回调函数名为MusicJsonCallback(必须设定为这个名称，因为这是接口自带的返回数据参数),来获取用户主页的歌曲列表

var more_flag=1;
var index=1;
var fun = function() {
	if (more_flag==1) {
		var src = "http://node.kg.qq.com/cgi/fcgi-bin/kg_ugc_get_homepage?type=get_uinfo&start="+index+"&num=8&share_uid="+userId;
		$.ajax({
					type: "GET",
					url: src,
					dataType: "jsonp",  //指定服务器返回的数据类型
					jsonpCallback: "MusicJsonCallback",  //指定回调函数名称
				}).done(function(data) {
					more_flag=data.data.has_more; //默认一页加载8首歌，查看是否还有下一页
					index++;
					fun();
				}).fail(function() {
					console.log("error");
				})
	} else {
		console.log(num); //显示加载的总歌曲数量
	}
}

按照接口形式拼接url播放地址

var num=0;
function MusicJsonCallback (data) {
	for(i=0;i<data.data.ugclist.length; i++){
		var url ="http://node.kg.qq.com/cgi/fcgi-bin/fcg_get_play_url?shareid=" + data.data.ugclist[i].shareid;
		num++;
	}
}

获得播放地址之后，在页面动态添加audio标签和p标签，显示歌曲列表

var p = document.createElement('p');//创建p节点
p.innerHTML = (num+1)+": "+data.data.ugclist[i].title;//p节点显示歌曲名称
var audio = document.createElement('audio'); //生成一个audio元素 
audio.controls = true; //向用户显示控件，比如播放按钮
audio.src = url; //音乐的路径 
audio.preload = "none"; //规定是否预加载音频，none表示当页面加载后不载入音频
document.body.appendChild(p); //把p添加到页面中
document.body.appendChild(audio); //把audio添加到页面中