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

最新推荐文章于 2022-02-12 13:00:32 发布

space9bug

最新推荐文章于 2022-02-12 13:00:32 发布

阅读量586

点赞数 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添加到页面中

到这里就已经全部设计完成，下面是成果展示及使用说明

成果展示

在线全民K歌歌曲下载

使用说明

首先你得先在电脑上进入全民K歌官网并登录
然后复制全民K歌主页地址，粘贴到这个网站
接着点击确定，即可预加载歌曲列表
最后选择要下载的歌曲，点击播放之后，就可以看到下载按钮。

源码交流

您可以Fork我的项目

如果你不是专业人士，这里我还提供了直接下载的方式
链接: https://n802.com/file/20114131-372999314

本文仅为个人学习使用，不得用于任何商业用途，否则后果自负！如侵犯到您的权益，请及时通知我，我会及时处理。

文尾标记

space9bug

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我用最独特的方式为情人节准备了这些。。。

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

扫一扫