开发网易云音乐项目过程总结
初始化项目步骤
- 运行git bush
mkdir 163music-demo-
git init初始化git仓库 -
npm init创建package.json - 创建相关html文件等 并且
git add // git commit -v -
npm install jQuery --save下载jQuery - .gitignore创建改 文件并且vim打开进入 添加 node_modules //屏蔽node_modules文件提交
- git add node_modules/jquery/dist/jquery.min.js -f // 强制提交此目录文件
- 还原备份gitshow log码. git log 查看commit 提交码
编写home.html
-
完成html head 中相关设置代码.
<!DOCTYPE html> <html lang="cmn-Hans-CN"> <head> <meta charset="utf-8"> <meta name="viewprot" content="width=device-width,initial-scale=1.0,user-scalable=no,maximunm-scale=1.0,minimunm-scale=1.0"> <title>163music-demo</title> <link rel="stylesheet" href="./reset.css"> <link rel="stylesheet" href="./home.css"> <script type="text/javascript" scr="./node_modules/jquery/dist/jquery.min.js"></script><video src="#" controls></video>//controls可以显示视频 audio同样<div data-downloaded="yes">content</div>//如果已经下载则不重复下载 -
创建reset.css进行样式初始化设置.
*{margin:0;padding:0;} *{box-sizing:border-box;} *ul,ol{list-style:none;} *::after{margin:0;padding;0;} *::befor{margin:0;padding:0;} h1,h2,h3,h4,h5{ font-weight:normal; } a{text-decoration:none}
CSS
让超出的文字自动变为省略号方法如下:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
线性填充样式:
background: linear-gradient(to bottom right, red, rgba(0,0,0,0));
文字空白空间设置
white-space:normal|nowrap
文本溢出包含元素时发生的事情
text-overflow: clip|ellipsis|string;
高级出发BFC解决margin合并问题
.no-collapse::before{content:'';display:table;},.no-collapse::after{content:'';display:table;}
pointer-events
pointer-events:none顾名思意，就是鼠标事件拜拜的意思。元素应用了该CSS属性，链接啊，点击啊什么的都变成了“浮云牌酱油”。
animation-play-state:paused||running //暂停 继续播放动画
jQuery
empty()
empty() 方法从被选元素移除所有内容，包括所有文本和子节点。$(selector).empty()
.attributes
返回所有对象的属性
七牛存储器
var APP_ID = 'dkIJBHfaV9puzkRqVipWFH8s-gzGzoHsz';
var APP_KEY = 'JVq509599HnbKRiUNthOnDMM';
AV.init({
appId: APP_ID,
appKey: APP_KEY
});
var SongObject = AV.Object.extend('Song');
var songObject = new SongObject();
songObject.set('name','时光之废')
songObject.set('singer','许魏洲')
songObject.set('url','http://oyfnflmnh.bkt.clouddn.com/001.mp3')
var songs=[songObject,songObject2,songObject3,songObject4,songObject5,songObject6,songObject7,songObject8,songObject9]
AV.Object.saveAll(songs)
获取url中ID值
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return "";
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var id = getParameterByName("id");
/**简易方法*/
var idArray = location.search.split('=')
var id = idArray[1]
操作伪元素css属性方法
let style = `
<style>
.page::before {
background: transparent url(${cover})no-repeat center;
background-size:cover;
}
</style>
`
$('head').append(style)
~~(Math.random()*100)这样可以去除小数部分,取反在取反
