開發(fā)網(wǎng)易云音樂(lè)項(xiàng)目過(guò)程總結(jié)
初始化項(xiàng)目步驟
- 運(yùn)行g(shù)it bush
mkdir 163music-demo-
git init初始化git倉(cāng)庫(kù) -
npm init創(chuàng)建package.json - 創(chuàng)建相關(guān)html文件等 并且
git add // git commit -v -
npm install jQuery --save下載jQuery - .gitignore創(chuàng)建改 文件并且vim打開進(jìn)入 添加 node_modules //屏蔽node_modules文件提交
- git add node_modules/jquery/dist/jquery.min.js -f // 強(qiáng)制提交此目錄文件
- 還原備份gitshow log碼. git log 查看commit 提交碼
編寫home.html
-
完成html head 中相關(guān)設(shè)置代碼.
<!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>//如果已經(jīng)下載則不重復(fù)下載 -
創(chuàng)建reset.css進(jìn)行樣式初始化設(shè)置.
*{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
讓超出的文字自動(dòng)變?yōu)槭÷蕴?hào)方法如下:
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));
文字空白空間設(shè)置
white-space:normal|nowrap
文本溢出包含元素時(shí)發(fā)生的事情
text-overflow: clip|ellipsis|string;
高級(jí)出發(fā)BFC解決margin合并問(wèn)題
.no-collapse::before{content:'';display:table;},.no-collapse::after{content:'';display:table;}
pointer-events
pointer-events:none顧名思意，就是鼠標(biāo)事件拜拜的意思。元素應(yīng)用了該CSS屬性，鏈接啊，點(diǎn)擊啊什么的都變成了“浮云牌醬油”。
animation-play-state:paused||running //暫停 繼續(xù)播放動(dòng)畫
jQuery
empty()
empty() 方法從被選元素移除所有內(nèi)容，包括所有文本和子節(jié)點(diǎn)。$(selector).empty()
.attributes
返回所有對(duì)象的屬性
七牛存儲(chǔ)器
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','時(shí)光之廢')
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");
/**簡(jiǎn)易方法*/
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)這樣可以去除小數(shù)部分,取反在取反
