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

原创文｜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

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

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

浪漫的html表白源代码_Love：程序猿的方式【情人节amp;520—我爱你】动画加音效 → 那些年最浪漫的表白(帮你得到你的她)...
Love:程序猿的方式~[情人节&520-我爱你]~动画加音效 → 那些年最浪漫的表白(帮你得到你的她) 导读本文章代码的实现,主要参考GitHub(wuxia2001和hackerzhou ...
Love：程序猿的方式~【情人节520—我爱你】~动画加音效 → 那些年最浪漫的表白(帮你得到你的她)
Love:程序猿的方式~[情人节&520-我爱你]~动画加音效 → 那些年最浪漫的表白(帮你得到你的她) 导读本文章代码的实现,主要参考GitHub(wuxia2001和hac ...
网站模型|可以帮助你以一种美丽、独特的方式展示你的网站设计。
一个好的网站模型设计可以帮助你以一种美丽.独特的方式展示你的网站设计.哪里获取网站模型网址?一流设计导航|16map 分享设计师最喜欢的网站网址和工具,以及创建你的网站模型的技巧! 一流设计导航为 ...
python情人节之玫瑰花与表白方式_情人节快乐! python绘制漂亮玫瑰
情人节快乐!这个节日怎么会少了浪漫的玫瑰花! 用Python的turtle库绘图是很简单的,画了一个玫瑰花,下面奉上源码: 源码: ''' Created on Nov 18, 2017 @autho ...
python情人节之玫瑰花与表白方式_情人节我用Python表白
情人节已到我用Python来表白情人节又叫圣瓦伦丁节或圣华伦泰节,即每年的2月14日,是西方国家的传统节日之一,起源于基督教.这是一个关于爱.浪漫以及花.巧克力.贺卡的节日,男女在这一天互送礼物用 ...
华为vr2计算机连接线代替品,分体式设计的VR一体机：独特连接方式让华为VR2眼镜与众不同...
你现在的位置: 首页 > VR > VR新闻和手机市场的"来势汹汹"比起来,华为VR还是比较低调的,Mate 10发布之前并没有太多关于新一代VR眼镜的消息:而且眼看 ...
定义一个Instrument(乐器)类，并使用共有的play()方法，再分别定义子类管乐器打击乐器弦乐器，使用重写play方法，实现每种乐器的独特play方式。
package Extends; public class Instrument { public void play(){ System.out.println("使用乐器!") ...
python情人节之玫瑰花与表白方式_python情人节之玫瑰花与表白方式-Go语言中文社区...
import turtle def initialization(): ''' 初始化画布和画笔 ''' turtle.setup(width=0.9, height=0.9) turtle.spee ...
情人节！原来程序员也可以那么浪漫！
程序员的情人节前言演示烟花,树叶飘落特效首页代码片段特点介绍源码地址情人节没有对象的点个赞吧!!!! 前言 2月14日,是西方的传统节日之一.男女在这一天互送巧克力.贺卡和花,用以表达爱 ...

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

实现过程

基础部分

核心部分

成果展示

使用说明

源码交流

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

最新文章

热门文章