大家好，clonenode相信很多的网友都不是很明白，包括也是一样，不过没有关系，接下来就来为大家分享关于clonenode和的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！

源码获取见文章底部。

1. 用户
2. 歌单
3. FM
4. 播放
5. 评论
6. MV
7. 专辑
8. 歌手
9. 登录
10. 歌曲红心,FM trash，收藏单曲至歌单
11. 收听记录
12. 歌单歌曲推荐
13. 迷你播放条
14. 电台，节目
15. 搜索

• 增加评论，评论点赞等
• 歌词翻译
• 收藏(歌单，歌手，专辑，电台
• 音质切换
• 用户动态，粉丝
• 新歌 新专 分类电台

系统的界面截图如下所示：

1. Vue全家桶(vue,vue-router,vuex)
2. axios(http)
3. mint-ui+移植原来小程序版的css
4. node(接口服务)，地址在这里
5. 图片资源来自ios端解压缩文件

系统具体的截图如下所示：

1. 首页（个性推荐，分类歌单，电台推荐，热门排行
2. 搜索（hot ,history ,suggest ,multimatch; 单曲，歌单，歌手，mv等。。。
3. 详情单页类（歌单，歌手，电台，专辑，评论，用户，相似推荐，每日推荐
4. 播放页（单曲，FM，节目：上下一曲，播放模式[单曲，随机，顺序]，单曲喜欢，单曲收藏到歌单，fm trash，快进快退，歌词，播放列表
5. 我的（登录，云盘，收藏

1. 评论（操作类
2. 动态
3. 音质切换
4. 歌词翻译 ….

1. 单曲播放进入评论等前进页面，单曲播放完自动播放下一曲后页面回退回播放页面 路由自动切换不了，会播放上一曲，逻辑这块没理顺
2. 目前的api基本都是根据官网版扒下来的，git上发布的一些也基本都是这样，客户端接口用的是最新版的 没有能力扒出来。存在问题是banner接口请求到的是老接口数据，已经不维护了的数据

源码获取，关注我，转发+评论，私信我：音乐小程序

技术改变世界，知识改变命运，奥里给。

JavaScript基础知识点总结

//小憨憨

/*第一章

*HTML引用js方法：

*1,外部引用：HTML外部引用js：

*2,内部引用：

*3,元素事件引用：

*/

/*第二章

* 变量定义：

* 1，变量由数字，字母，下划线，$组成，且不能以数字开头

* 2，变量不能使用系统关键词

* 3变量定义语法：var 变量1=变量值,变量2=变量值,…;

*/

//举例：

vara10;

document.write(a);//在页面输出一个内容

/*

* 数据类型：

* 1，基本数据类型：数字，字符串，布尔值，未定义值(undefined)，空值(null)

* 2，引用数据类型：数组，对象

* 其中：数字不区分整型和浮点型

*/

/*

* 运算符：

* 1，算术运算符:+ – * / % ++ —

* 加法运算规则：数字+数字=数字； 数字+字符串=字符串； 字符串+字符串=字符串

* 2，

*/

//举例：

vara10;

varstr\”小憨憨\”;

document.write(str+a,typeof(str+a));

/*

* 赋值运算符：= += -= *= /=

* 比较运算符：>< >=<= == !=

* 逻辑运算符：&& || !

* 条件运算符：var b=条件?表达式1:表达式2;//相当于C语言中三目运算符

*/

/*

* 表达式语句：一个分号对应一条语句

* 类型转换：

* 1，隐式类型转换（js自动完成的）

* 2，显式类型转换

* (1)字符串转数字：Number(),parseInt(),parseFloat()（字符串必须是数字字符串）

* (2)数字转字符串：toString

* (3)转义字符：\\\’ \\\” \\n等

* 3，注释： 单行注释 和 多行注释 用法：与C语言注释一样

*/

//举例：

document.write(\”Number(\\\”123\\\”):\”+Number(\”123\”)+\”
\”);

document.write(parseInt(\”+123.456px\”));//第一个字符为+或-也进行转换，从左往右取整数

document.write(parseFloat(\”123.456px\”));

varnum123;

document.write(num.toString());

/*第三章

* 流程控制：

* 1，顺序结构：程序代码从上到下，从左到右依次执行

* 2，选择结构：

* (1)if语句:（单重if）

*<1>:if(条件){语句块}

*<2>:if(条件){语句块} else{语句块}

*<3>:if(条件){语句块} else if(条件){语句块} else{语句块}

* (2)switch语句：

* switch(判断值){ case 取值1:语句块1;break;

* case 取值2:语句块2;break;

* …

* default:语句块n;break;}

* 3,循环结构：

* (1)while循环：

* while(条件){语句块}

* (2)do…while循环：

* do{语句块}while(条件);

* (3)for循环：

* for(初始化表达式;条件表达式;循环后操作表达式){语句块}

*/

//举例：计算1+2+3+…+100

varn1, sum0;

while(n<=100)

{

sum+=n;

n++;

}

document.write(sum);

//找出100-1000中的水仙花数

varstr1\”\”;

for(vari100; i<1000; i++)

{

varai/100;//取百位上的数字

aparseInt(a);

varbi%100/10;//取十位上的数字

bparseInt(b);

varci%10;//取个位上的数字

cparseInt(c);

if(i(aaa+bbb+ccc))

{

str1str1+i+\”、\”;

}

}

document.write(\”水仙花数有：\”+str1);

//判断一个数是不是整数

window.onloadfunction()

{

varn3.14159;

if(parseInt(n)parseFloat(n))

{

document.write(n+\”是整数\”);

}

else

{

document.write(n+\”不是整数\”);

}

}

/*第四章

* 函数：

* 1，函数的定义:函数名命名规则遵循变量命名规则

* (1)没有返回值的函数定义：function(参数1，参数2，…){语句块}

* (2)有返回值的函数定义：function(参数1，参数2，…){语句块; return 返回值}

* 2，变量的作用域：全局变量，局部变量

* 3，函数的调用：

* (1)直接调用：函数名(实参1,实参2,…);

* (2)在表达式中调用:例如：var sum = 函数名(实参1,…)

* (3)在超链接中调用：

* (4)在事件中调用

* 4，函数嵌套

* 5，内置函数：比如：parseInt()

*/

//举例：

functionadd_sum(e,f){

varsume+f;

document.write(sum);

}

add_sum(10,20);

functiontest(){alert(\”doubi\”);}//供超链接调用测试的函数

/*第五章

* 1，js中对象分为：自定义对象和内置对象

* 2，常用的内置对象：字符串对象，数组对象，日期对象，数值对象

* 3，字符串对象相关知识点：

* 3.1 获取字符串长度：语法： 字符串名.length

* 3.2大小写转换： 字符串名.toLowerCase(),字符串名.toUpperCase()

* 3.3获取一个字符：字符串名.charAt(n)

* 3.4获取字符串： 字符串名.substring(start, end)

* 3.5替换字符串： 字符串.replace(原字符串或正则表达式, 替换字符串)

* 3.6分割字符串： 字符串.split(\”分隔符\”)

* 3.7检索字符串的位置： 字符串.indexOf(指定字符串),字符串.lastIndexOf(指定字符串)

* indexOf：返回首次出现的位置 lastIndexOf：返回最后一次出现的位置 没找到返回-1

* 3.8删除字符串中的一个字符：

*/

//举例

varstr\”This is doubixiaohanhan\”;

document.write(\”字符串长度为：\”+str.length);//空格也计算在内

document.write(\”转为大写字母:\”+str.toUpperCase());

document.write(\”转为小写字母:\”+str.toLowerCase());

document.write(\”获取第3个字符: \”+str.charAt(3));//字符串下标从0开始计算

document.write(str.substring(8,23));

document.write(str.replace(\”doubixiaohanhan\”, \”hahahahahaha\”));

varstr1str.split(\” \”);//以空格作为分隔符

for(vari0; i<3; i++)

document.write(str1[i]);

document.write(str.indexOf(\”bi\”));

document.write(str.lastIndexOf(\”han\”));

//找出字符串中所有字符b,不区分大小写

varn0,str1\”doubixiaohanhan\”;

document.write(\”源字符串:\”+str1);

for(varj0; j<str1.length; j++)

{

var charstr1.charAt(j);

if(\’h\’char.toLowerCase())

{

document.write(char);

nn+1;

}

}

document.write(\”字符串中有\”+n+\”个字符h\”);

//统计字符串中数字的个数

functionget_number(str){

varnum0, i0;

while(i<str.length){

var charstr.charAt(i);

if((char!=\” \”)&&(!isNaN(char))){//isNaN:不是数字则返回true

num++;

}

i++;

}

alert(\”执行完毕\”);

returnnum;

}

varretget_number(\”dou120k53KDDD6656\”);

document.write(ret);

/*第六章：数组对象

* 1，数组的创建：（数组 中可以存储不同类型的数据）

* (1)完整形式：var 数组名=new Array(元素1,元素2,..)

* (2)简写形式：var 数组名=[元素1,元素2,…]

* 2，数组的获取：使用下标获取，下标从0开始

* 3，数组的赋值：arr[i]=值;

* 4，获取数组的长度： 数组名.length

* 5，截取数组： 数组名.slice(start, end)

* 6，为数组添加元素：

* (1)在数组开头添加元素： 数组名.unshift(元素1,元素2,…)

* (2)在数组末尾添加元素： 数组名.push(元素1,元素2,…)

* (3)在数组首部删除元素： 数组名.shift()

* (4)在数组末尾删除元素： 数组名.pop()

* (5)数组排序： 升序：数组名.sort(up) 降序：数组名.sort(down)

* 其中：function up(a,b){return a-b;} function down(a,b){return b-a;}

* (6)数组颠倒顺序： 数组名.reverse()

* (7)将数组元素连接成字符串： 数组名.join(\”连接符\”)

* (8)

*/

//举例

vararr[\”js\”,\”jquery\”];

document.write(arr+\’\\n\’);

arr.unshift(\”db\”);

arr.push(\”ab\”);

document.write(arr);

arr.shift();

arr.pop();

document.write(arr);

vararr1[3,6,2,5,8,1];

document.write(arr1);

functionup(a,b){returna–b;}

arr1.sort(up);

document.write(arr1);

functiondown(a,b){returnb–a}

arr1.sort(down);

document.write(arr1);

vararr[\”js\”,\”jquery\”,\”abcd\”];

varrearr.join(\”\”);

document.write(re);

document.write(typeof(re));

//例题：将字符串所有字符颠倒顺序

functiontest(str){

vararrstr.split(\”\”);

document.write(typeof(arr));

arr.reverse();

varrearr.join(\”\”);

document.write(typeof(re));

returnre;

}

document.write(\”javascript颠倒后： \”+test(\”javascript\”));

/*第七章：时间对象

* 创建一个日期对象必续使用new关键字：语法： var 日期对象名 = new Date();

* Date对象的方法有很多，主要分为两大类：获取时间：getXxx() 和 设置时间：setXxx()

* getFullYear() 获取年份：取值4位数字

* getMonth() 获取月份：取值0（一月）-11（十二月）整数

* getDate() 获取日数：取值0-31整数

* getHours() 获取小时：取值0-23整数

* getMinutes() 获取分钟：取值0-59整数

* getSeconds() 获取秒数：取值0-59整数

* getMilliseconds() 获取毫秒

* getDay() 获取星期几：0表示星期天

* setFullYear(year,month,day) 设置年月日

* setMonth(month,day) 设置月日

* setDate(day) 设置日 : 1-31整数

* setHours(hour,min,sec,millsec) 设置时分秒毫秒

* setMinutes(min,sec,millsec) 设置分秒毫秒

* setSeconds(sec,millsec) 设置秒毫秒

*/

//举例

vard= newDate();

varmyyeard.getFullYear();

varmymonthd.getMonth();

varmydayd.getDate();

varmyday1d.getDay();

varweekend[\”星期天\”,\”星期一\”,\”星期二\”,\”星期三\”,\”星期四\”,\”星期五\”,\”星期六\”];

document.write(myyear+\”年\”+(mymonth+1)+\”月\”+myday+\”日\”+weekend[myday1]);

/*第八章：数学对象

* 数学对象不需要使用new关键字来创造，而是直接使用它的属性和方法

* 语法： Math.属性 Math.方法

* 注：属性往往都是常量，比如：圆周率：PI （常用格式：度数*Math.PI/180）

* Math中方法常用有：

* max min sin cos tan asin acos atan floor ceil random atan2

* Math中方法不常用有：

* abs sqrt log pow exp

* random():用于生成0-1之间的随机数，即： [0,1)

* 随机生成某个范围的任意数：

* 1，Math.random()*m:生成0~m之间的随机数

* 2，Math.random()*m+n:生成n~m+n之间的随机数

* 3，Math.random()*m-n:生成-n~m-n之间的随机数

* 4，Math.random()*m-m:生成-m~0之间的随机数

*/

//举例

varaMath.max(3,9,10,2,4,6,12,67,9);

document.write(a);

varb0.6;

document.write(Math.floor(b));//floor向下取整

document.write(Math.ceil(b));//ceil向上取整

document.write(Math.random()10);

//例题：生成随机验证码

functionrandom_validate(str){

vararrstr.split(\”\”);

varresult\”\”;

for(vari0;i<4; i++){

varnMath.floor(Math.random()arr.length);

result+=arr[n];

}

returnresult;

}

document.write(random_validate(\”asjcbakavbavakvhakjbvkvJASSDKABKAVAVJ24123435\”));

/*第九章：DOM基础

* DOM：document object model文档对象模型（W3C定义的一个标准）

* DOM操作：理解：元素操作；DOM采用树形结构

* 重点：每一个元素就是一个节点，每个节点就是一个对象。操作元素时其实就是把这个元素看成一个对象，

* 然后使用其对象的属性和方法进行操作。节点包括元素，二者实际不是同一概念

* DOM节点有12种类型，其中常用的三种：元素节点，属性节点，文本节点

* 不同节点的nodeType属性值：

* 元素节点：1

* 属性节点：2

* 文本节点：3

* 一，获取元素（实际获取元素节点），js种有以下方式：

* 1，getElemnetById()

* 2，getElemnetByTagName():返回一个类数组（伪数组）：只能使用length属性和下标形式

* 3，getElemnetByClassName()

* 4，getElemnetByName():只用于表单元素，一般用于单选按钮和复选框

* 5，querySelector()和querySelectorAll()

* 6，document.title()和document.body()

* 二，创建元素：（动态DOM操作）

* 创建元素节点：createElement()

* 创建文本节点：createTextNode()

* 总结：创建一个元素的步骤：

* (1)创建元素节点：createElement()

* (2)创建文本节点：createTextNode()

* (3)把文本节点插入元素节点：appendChild()

* (4)把组装好的元素插入到已有的元素中：appendChild()

* 三，插入元素

* 1，appenChild() :把一个元素插到父元素的内部子元素的末尾

* 2，insertBefore():把一个元素插到父元素的内部某个子元素的之前

* 四，删除元素：removeChild()

* 五，赋值元素：obj.cloneNode(bool)

* obj:被复制的对象

* bool:参数 true：复制元素本身及其子元素 false：仅仅复制本身

* 六，替换元素：replaceChild(new,old)

*/

//创建简单元素

window.onloadfunction(){

varoDivdocument.getElementById(\”content\”);

varoStrongdocument.createElement(\”strong\”);

varoTxtdocument.createTextNode(\”小憨憨\”);

oStrong.appendChild(oTxt);

oDiv.appendChild(oStrong);

}

//创建带属性的元素

window.onloadfunction(){

varoInputdocument.createElement(\”input\”);

oInput.id\”sumit\”;

oInput.type\”button\”;

oInput.value\”提交\”;

document.body.appendChild(oInput);

}

//创建动态图片

window.onloadfunction(){

varoImgdocument.createElement(\”img\”);

oImg.className\”doubi\”;

oImg.src\”img/doubi.jpg\”;

oImg.style.border\”1px solid silver\”;

document.body.appendChild(oImg);

}

//创建多个元素

window.onloadfunction(){

varoTabledocument.createElement(\”table\”);

for(vari0; i<3;i++){

varoTrdocument.createElement(\”tr\”);

for(varj0; j<3; j++){

varoTddocument.createElement(\”td\”);

oTr.appendChild(oTd);

}

oTable.appendChild(oTr);

}

document.body.appendChild(oTable);

}

//子元素插到末尾

window.onloadfunction(){

varoBtndocument.getElementById(\”btn\”);

oBtn.onclickfunction(){

varoU1document.getElementById(\”list\”);

varoTxtdocument.getElementById(\”txt\”);

vartextNodedocument.createTextNode(oTxt.value);

varoLidocument.createElement(\”li\”);

oLi.appendChild(textNode);

oU1.appendChild(oLi);

}

}

//子元素插到某个子元素之前

window.onloadfunction(){

varoBtndocument.getElementById(\”btn\”);

oBtn.onclickfunction(){

varoU1document.getElementById(\”list\”);

varoTxtdocument.getElementById(\”txt\”);

vartextNodedocument.createTextNode(oTxt.value);

varoLidocument.createElement(\”li\”);

oLi.appendChild(textNode);

oU1.insertBefore(oLi, oU1.firstElementChild);

}

}

//删除子元素

window.onloadfunction(){

varoBtndocument.getElementById(\”btn\”);

oBtn.onclickfunction(){

varoU1document.getElementById(\”list\”);

oU1.removeChild(oU1.lastElementChild);

}

}

//复制元素

window.onloadfunction(){

varoBtndocument.getElementById(\”btn\”);

oBtn.onclickfunction(){

varoU1document.getElementById(\”list\”);

document.body.appendChild(oU1.cloneNode(1));

}

}

//替换元素

window.onloadfunction(){

varoBtndocument.getElementById(\”btn\”);

oBtn.onclickfunction(){

varoFirstdocument.querySelector(\”body *:first-child\”);

varoTagdocument.getElementById(\”tag\”);

varoTxtdocument.getElementById(\”txt\”);

varoNewTagdocument.createElement(oTag.value);

varoNewTxtdocument.createTextNode(oTxt.value);

oNewTag.appendChild(oNewTxt);

document.body.replaceChild(oNewTag, oFirst);

}

}

/*第十章：DOM进阶

* 操作HTML元素属性的方式：对象属性和对象方法

* 不管是用那种方式，都需要涉及两个操作：获取HTML属性值，设置HTML属性值

* 一，获取HTML属性值：

* 语法： obj.attr (obj是元素名，是一个DOM对象，指的是getElementById()

* 等方法获取到的元素节点)

* 二，设置HTML属性值： obj.attr = \”值\”;

* 三，HTML属性操作(对象方法)

* 1，getAttribute()：获取元素的某个属性值

* 2，setAttribute()：设置元素的某个属性值,参数1：属性名 参数2：属性值

* 3，removeAttribute()：删除某个属性

* 4，hasAttribute()：判断元素是否含有某个属性

* 四，总结：

* 1，“对象属性方式”和“对象方法方式”都可以操作静态HTML的属性和动态DOM属性

* 2，只有“对象方法方式”才可以操作自定义属性

* 五，CSS属性操作：是指js操作一个元素的CSS样式

* 1，获取CSS属性值：getComputeStyle(obj).attr<==>getComputeStyle(obj)[\”attr\”]

* obj：DOM对象 attr：CSS属性名

* 2，设置CSS属性值

* (1)style对象：行内样式 语法：obj.style.attr=\”值\”

* (2)cssText方法

* 六，DOM遍历

* 1，查找父元素：obj.parentNode obj:DOM对象

* 2，查找子元素：

* (1)childNodes,firstChild,lastChild

* (2)children,firstElementChild,lastElementChild

* 注：childNodes：获取所有节点包括文本节点 children：获取所有元素节点，不包括文本节点

* 3，查找兄弟元素:

* (1)previousSibling：查找前一个兄弟节点

* (2)nextSibling：查找后一个兄弟节点

* (3)previousElementSibling：查找前一个兄弟元素节点

* (4)nextElementSibling：查找后一个元素节点

* 七，innerHTML与innerText

*/

//获取静态HTML中的属性值

window.onloadfunction(){

varoBtndocument.getElementById(\”btn\”);

oBtn.onclickfunction(){

alert(oBtn.id);

}

}

//获取动态HTML中的属性值

window.onloadfunction(){

varoInputdocument.createElement(\”input\”);

oInput.id\”submit\”;

oInput.type\”button\”;

oInput.value\”提交\”;

document.body.appendChild(oInput);

oInput.onclickfunction(){

alert(oInput.id);

}

}

//获取单行文本框的值

window.onloadfunction(){

varoBtndocument.getElementById(\”btn\”);

oBtn.onclickfunction(){

varoTxtdocument.getElementById(\”txt\”);

alert(oTxt.value);

//document.write(oTxt.value);

}

}

//获取单选框的值

window.onloadfunction(){

varoBtndocument.getElementById(\”btn\”);

varoFruitdocument.getElementsByName(\”fruit\”);

oBtn.onclickfunction(){

for(vari0; i<oFruit.length; i++){

if(oFruit[i].checked){

alert(oFruit[i].value);

}

}

}

}

//获取复选框的值

window.onloadfunction(){

varoBtndocument.getElementById(\”btn\”);

varoFruitdocument.getElementsByName(\”fruit\”);

varstr\”\”;

oBtn.onclickfunction(){

for(vari0; i<oFruit.length; i++){

if(oFruit[i].checked){

str+=oFruit[i].value;

}

}

alert(str);

}

}

//获取下拉列表的值

window.onloadfunction(){

varoBtndocument.getElementById(\”btn\”);

varoSelectdocument.getElementById(\”select\”);

oBtn.onclickfunction(){

alert(oSelect.value);

}

}

//设置属性值

window.onloadfunction(){

varoBtndocument.getElementById(\”btn\”);

oBtn.onclickfunction(){

oBtn.value\”button\”;

document.write(oBtn.value);

}

}

//获取固有属性值

window.onloadfunction(){

varoBtndocument.getElementById(\”btn\”);

oBtn.onclickfunction(){

alert(oBtn.getAttribute(\”id\”));

}

}

//获取自定义属性值

window.onloadfunction(){

varoBtndocument.getElementById(\”btn\”);

oBtn.onclickfunction(){

//alert(oBtn.data);//oBtn.data是不能获取自定义属性值

alert(oBtn.getAttribute(\”data\”));

}

}

//获取自定义属性值

window.onloadfunction(){

varoTddocument.getElementsByTagName(\”td\”);

for(vari0;i<oTd.length; i++){

oTd[i].onclickfunction(){

varoParentthis.parentNode;

oParent.style.color\”white\”;

oParent.style.backgroundColor\”red\”;

};

}

}

//childNodes与children的比较

window.onloadfunction(){

varoU1document.getElementById(\”list\”);

varchildNodesoU1.childNodes.length;

varchildrenoU1.children.length;

alert(\”childNodes的长度：\”+childNodes+\”\\n\”+\”children的长度：\”+children);

}

/*第十一章：事件基础

* 一，在js中一个事件分为三部分：

* 1，事件主角：是按钮还是div元素或是其它？

* 2，事件类型：是点击还是移动或其它？

* 3，事件过程：这个事件都发生了些什么？

* 二，js中常用的事件：

* 1，鼠标事件

* 2，键盘事件

* 3，表单事件

* 4，编辑事件

* 5，页面事件

* 三，js中事件调用方式：

* 1，在script标签中调用：指的是在