整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML 顏色由紅色、綠色、藍(lán)色混合而成。
顏色值
HTML 顏色由一個(gè)十六進(jìn)制符號(hào)來(lái)定義，這個(gè)符號(hào)由紅色、綠色和藍(lán)色的值組成（RGB）。
種顏色的最小值是0（十六進(jìn)制：#00）。最大值是255（十六進(jìn)制：#FF）。
這個(gè)表格給出了由三種顏色混合而成的具體效果：
顏色值
| 顏色(Color) | 顏色十六進(jìn)制(Color HEX) | 顏色RGB(Color RGB) |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #FF0000 | rgb(255,0,0) | |
| #00FF00 | rgb(0,255,0) | |
| #0000FF | rgb(0,0,255) | |
| #FFFF00 | rgb(255,255,0) | |
| #00FFFF | rgb(0,255,255) | |
| #FF00FF | rgb(255,0,255) | |
| #C0C0C0 | rgb(192,192,192) | |
| #FFFFFF | rgb(255,255,255) |
1600萬(wàn)種不同顏色
三種顏色 紅，綠，藍(lán)的組合從0到255，一共有1600萬(wàn)種不同顏色(256 x 256 x 256)。
在下面的顏色表中你會(huì)看到不同的結(jié)果，從0到255的紅色，同時(shí)設(shè)置綠色和藍(lán)色的值為0,隨著紅色的值變化，不同的值都顯示了不同的顏色。
| Red Light | Color HEX | Color RGB |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #080000 | rgb(8,0,0) | |
| #100000 | rgb(16,0,0) | |
| #180000 | rgb(24,0,0) | |
| #200000 | rgb(32,0,0) | |
| #280000 | rgb(40,0,0) | |
| #300000 | rgb(48,0,0) | |
| #380000 | rgb(56,0,0) | |
| #400000 | rgb(64,0,0) | |
| #480000 | rgb(72,0,0) | |
| #500000 | rgb(80,0,0) | |
| #580000 | rgb(88,0,0) | |
| #600000 | rgb(96,0,0) | |
| #680000 | rgb(104,0,0) | |
| #700000 | rgb(112,0,0) | |
| #780000 | rgb(120,0,0) | |
| #800000 | rgb(128,0,0) | |
| #880000 | rgb(136,0,0) | |
| #900000 | rgb(144,0,0) | |
| #980000 | rgb(152,0,0) | |
| #A00000 | rgb(160,0,0) | |
| #A80000 | rgb(168,0,0) | |
| #B00000 | rgb(176,0,0) | |
| #B80000 | rgb(184,0,0) | |
| #C00000 | rgb(192,0,0) | |
| #C80000 | rgb(200,0,0) | |
| #D00000 | rgb(208,0,0) | |
| #D80000 | rgb(216,0,0) | |
| #E00000 | rgb(224,0,0) | |
| #E80000 | rgb(232,0,0) | |
| #F00000 | rgb(240,0,0) | |
| #F80000 | rgb(248,0,0) | |
| #FF0000 | rgb(255,0,0) |
灰暗色調(diào)
以下展示了灰色到黑色的漸變
| Gray Shades | Color HEX | Color RGB |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #080808 | rgb(8,8,8) | |
| #101010 | rgb(16,16,16) | |
| #181818 | rgb(24,24,24) | |
| #202020 | rgb(32,32,32) | |
| #282828 | rgb(40,40,40) | |
| #303030 | rgb(48,48,48) | |
| #383838 | rgb(56,56,56) | |
| #404040 | rgb(64,64,64) | |
| #484848 | rgb(72,72,72) | |
| #505050 | rgb(80,80,80) | |
| #585858 | rgb(88,88,88) | |
| #606060 | rgb(96,96,96) | |
| #686868 | rgb(104,104,104) | |
| #707070 | rgb(112,112,112) | |
| #787878 | rgb(120,120,120) | |
| #808080 | rgb(128,128,128) | |
| #888888 | rgb(136,136,136) | |
| #909090 | rgb(144,144,144) | |
| #989898 | rgb(152,152,152) | |
| #A0A0A0 | rgb(160,160,160) | |
| #A8A8A8 | rgb(168,168,168) | |
| #B0B0B0 | rgb(176,176,176) | |
| #B8B8B8 | rgb(184,184,184) | |
| #C0C0C0 | rgb(192,192,192) | |
| #C8C8C8 | rgb(200,200,200) | |
| #D0D0D0 | rgb(208,208,208) | |
| #D8D8D8 | rgb(216,216,216) | |
| #E0E0E0 | rgb(224,224,224) | |
| #E8E8E8 | rgb(232,232,232) | |
| #F0F0F0 | rgb(240,240,240) | |
| #F8F8F8 | rgb(248,248,248) | |
| #FFFFFF | rgb(255,255,255) |
Web安全色?
數(shù)年以前，當(dāng)大多數(shù)計(jì)算機(jī)僅支持 256 種顏色的時(shí)候，一系列 216 種 Web 安全色作為 Web 標(biāo)準(zhǔn)被建議使用。其中的原因是，微軟和 Mac 操作系統(tǒng)使用了 40 種不同的保留的固定系統(tǒng)顏色（雙方大約各使用 20 種）。
我們不確定如今這么做的意義有多大，因?yàn)樵絹?lái)越多的計(jì)算機(jī)有能力處理數(shù)百萬(wàn)種顏色，不過(guò)做選擇還是你自己。
最初，216 跨平臺(tái) web 安全色被用來(lái)確保：當(dāng)計(jì)算機(jī)使用 256 色調(diào)色板時(shí)，所有的計(jì)算機(jī)能夠正確地顯示所有的顏色。
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
文共6143字，預(yù)計(jì)學(xué)習(xí)時(shí)長(zhǎng)25分鐘或更長(zhǎng)
對(duì)很多人來(lái)說(shuō)，學(xué)寫代碼很難。本文將通過(guò)編寫與眾不同且富有詩(shī)意的代碼來(lái)克服學(xué)習(xí)代碼最初遇到的困難。如果你是個(gè)JavaScript新手，或者是在編程學(xué)習(xí)過(guò)程中遇到了困難，本文介紹的方法也許可以幫到你。
以下是人們對(duì)編程很難學(xué)及JavaScript（或任何編程語(yǔ)言）很枯燥的一些誤解：
· 代碼晦澀難懂令人望而生畏，只有實(shí)用功能毫無(wú)樂(lè)趣；
· 代碼僅適用于機(jī)器，人們無(wú)法與它交流或參與其中；
· 代碼不算一種語(yǔ)言，因?yàn)樗c一般語(yǔ)言的用法截然不同，形式上的差別也很大；
· 提到程序員，人們就會(huì)想到邪惡的黑客或黑客帝國(guó)的成員等刻板形象，因此沒(méi)有認(rèn)同感。
未接觸編程的人
開(kāi)發(fā)人員需要以一種非常特殊的方式看待代碼，甚至要以一種完全不同且高度邏輯化的方式來(lái)思考。編程語(yǔ)言非常嚴(yán)格，對(duì)錯(cuò)誤零容忍，單個(gè)字符就可能使機(jī)器無(wú)法理解人們的意思，并使應(yīng)用程序奔潰。學(xué)習(xí)編程時(shí)，應(yīng)將之前學(xué)習(xí)人類語(yǔ)言時(shí)的讀寫規(guī)則歸零（順便說(shuō)一下，在學(xué)習(xí)一種新的人類語(yǔ)言時(shí)也是如此）。
但并非網(wǎng)上的編程語(yǔ)言、文檔或視頻教程都是針對(duì)“從人類語(yǔ)言到編程語(yǔ)言的轉(zhuǎn)換”這一思維而編寫的。當(dāng)然，他們也沒(méi)有必要這樣做。畢竟，寫代碼的主要是為了告訴機(jī)器要做什么。
鑒于此目的，沒(méi)有機(jī)會(huì)對(duì)這兩種語(yǔ)言進(jìn)行比較，因此人類的語(yǔ)言（包括詞匯和語(yǔ)法規(guī)則）似乎對(duì)學(xué)習(xí)編程語(yǔ)言毫無(wú)用處。JavaScript語(yǔ)言中沒(méi)有“愛(ài)”這個(gè)詞，“我愛(ài)你。”這句話在其中也沒(méi)有意義。機(jī)器（或?yàn)g覽器）根本不理解愛(ài)。這種“聞所未聞”、“無(wú)從下手”的感覺(jué)可能會(huì)讓人感到害怕。
第一次接觸編程的人
這就是本文的意義所在，借助已掌握的人類語(yǔ)言知識(shí)，將JavaScript看作一種人類語(yǔ)言，以一種更容易、更具藝術(shù)性的方式來(lái)學(xué)習(xí)它。舉個(gè)小例子來(lái)說(shuō)明吧！
一個(gè)有趣的事實(shí)是，一些編程語(yǔ)言實(shí)際上已經(jīng)從一種編程語(yǔ)言轉(zhuǎn)換到另一種編程語(yǔ)言。這就是為什么掌握多種編程語(yǔ)言變得簡(jiǎn)單多了——只學(xué)一門編程語(yǔ)言就夠啦。
例如，在很多情況下，要想運(yùn)行JavaScript代碼，需要準(zhǔn)備好“文檔”（基本上是網(wǎng)站，用戶每次訪問(wèn)時(shí)都在下載），以便與HTML元素進(jìn)行交互。在純JavaScript語(yǔ)言中，可能會(huì)偶然發(fā)現(xiàn)以下內(nèi)容。
(function() {
// Your code goes here
})();
或者有時(shí)像這樣：
if (document.readyState === ‘complete’) {
// Your code goes here
}
上述第一個(gè)代碼肯定需要加以解釋，而對(duì)第二個(gè)代碼（也許需要一些想象），可以這樣理解：滿足了必需的某個(gè)條件后，后續(xù)步驟僅通過(guò)觀察就能進(jìn)行下去。
試想這樣的場(chǎng)景：
onceUponATime(function () {
// Your code (story) goes here
})
連小孩都能理解“Once upon a time” (“曾幾何時(shí)”)這樣的內(nèi)容。這種內(nèi)容在與開(kāi)發(fā)者對(duì)話（通過(guò)喚起他們的童年回憶），同時(shí)在理論上也能做開(kāi)發(fā)。這就是“讓人類語(yǔ)言轉(zhuǎn)換為編碼語(yǔ)言”的想法。
關(guān)于“functions（函數(shù)）”的簡(jiǎn)要說(shuō)明：函數(shù)基本來(lái)說(shuō)是一種技能，在調(diào)用之前處于休眠狀態(tài)。“To read”是function read() { …}}的一項(xiàng)技能，想讀取某內(nèi)容時(shí)就寫成這樣：read()，就會(huì)調(diào)用才會(huì)調(diào)用該函數(shù)。還有一種是“匿名函數(shù)”，即function(){ … }（沒(méi)有名字，就像上面的代碼片段那樣），它基本上是“一次性的臨時(shí)操作”，甚至不算一種技能，例如“按下按鈕”。
要更進(jìn)一步了解這個(gè)想法，可將上述的原因和誤解顛倒過(guò)來(lái)：
一首小詩(shī)，
用JavaScript語(yǔ)言編寫。
為人類而寫，
講述兩個(gè)人之間的愛(ài)。
// Love at first sight
if (me.getDistanceTo(you.position) < 200) {
me.setFeelings({
inLove: true,
});
}
它不具有功能性，目前也不適用于機(jī)器，只是方便人們閱讀和理解。
如果你能看懂這首詩(shī)，你實(shí)際上是理解了一段JavaScript代碼，也許你還會(huì)拿來(lái)與英語(yǔ)進(jìn)行比較。
現(xiàn)在你可能會(huì)問(wèn)自己：我理解這一點(diǎn)，但它為什么這么寫呢？這種語(yǔ)言背后的規(guī)則（語(yǔ)法）是什么呢？“me”在技術(shù)層面是什么意思？為什么這段代碼看起來(lái)很像英語(yǔ)？
學(xué)習(xí)編程語(yǔ)言時(shí)，最重要的事情之一就是理解變量的概念。
每一種人類語(yǔ)言都有其規(guī)則（語(yǔ)法）和大量詞匯（意思均已知）。顯然，只有先學(xué)習(xí)這兩點(diǎn)才會(huì)說(shuō)這種語(yǔ)言。
與許多其它編程語(yǔ)言一樣，JavaScript也有一套規(guī)則（例如，單詞之間要加“.”或如何編寫“if”語(yǔ)句）和詞匯（if、document、window、Event等）。這些關(guān)鍵字由JavaScript（和瀏覽器）所有（或“預(yù)先定義”），并且每個(gè)關(guān)鍵字都有其特定用途。
就像之前提到的那樣，似乎沒(méi)有機(jī)會(huì)去和英語(yǔ)中的單詞和句子做比較，因?yàn)镴avaScript中根本沒(méi)有對(duì)應(yīng)的詞和句子。
這就是引入變量這個(gè)概念的原因，開(kāi)發(fā)人員可以（甚至必須）定義變量，以便讓機(jī)器和開(kāi)發(fā)人員理解某些東西代表什么。變量可以采用多種形式（因此得名）：它們可以是一串單詞和字母（字符串）、數(shù)字、操作（函數(shù)）、甚至集合（數(shù)組），不勝枚舉。
在所有人類語(yǔ)言中，可能都有一個(gè)關(guān)于“l(fā)ove”的詞，你大概明白它是什么意思，但不太肯定，因?yàn)樗饔^了。但無(wú)論怎樣，還是有一個(gè)詞可以形容它。
但在JavaScript中，如果不定義“l(fā)ove”，就沒(méi)有與之對(duì)應(yīng)的表達(dá)，至于形式，則完全取決于你。
var love = {
color: ‘red’,
duration: 365,
loveTarget: ‘cats’,
};
// a simple variable expression,
// where love is an object “{ … }”, a thing
// with some properties (color, duration, loveTarget).
const love2 = {
color: ‘purple’,
duration: ‘forever’,
loveTarget: ‘dogs’,
};
// also a variable expression, where love2 (aconstant),
// cannot be redefined / overwritten completely:
// love2 = undefined; // => will not work
// (“undefined” is a pre-defined javascriptkeyword,
// basically saying “has no value”)
區(qū)分JavaScript中預(yù)定義的內(nèi)容（JavaScript規(guī)則和詞匯表）與開(kāi)發(fā)人員實(shí)際自定義的內(nèi)容（也稱為“應(yīng)用程序邏輯”或“業(yè)務(wù)邏輯”）十分重要。
回到上面寫的詩(shī)：
// Love at first sight
if (me.getDistanceTo(you.position) < 200) {
me.setFeelings({
inLove: true,
});
}
這些表達(dá)式來(lái)自以下JavaScript詞匯表規(guī)則集：
if (…) { … }
// if statement: when … is met, do things in { … }
{
inLove: true,
}
// an “object” with some info, some thing in the world.
// can contain other info, and “skills” (functions).
// “inLove” is a custom property,
// “true” is pre-defined in javascript, (meaning: “yes”)
// and the value of “inLove”.
.
// needed to access an objects property “my name: me.name”
getDistanceTo()
// an expression to “call” a function (a “skill”).
// getDistanceTo is custom (not JavaScript), and a function,
// so it can be executed / called upon with the “()” after.
// sometimes you can pass arguments in those brackets (like “position”)
// to change the outcome of a function.
這些是變量，可以自定義它們的名稱和行為。
me // an object, some thing in the world
you // an object, some thing in the world
position // an info about “you”, accessed by the “.”
getDistanceTo // a skill of me, accessed by the “.”
getDistanceTo() // the skill, with javascript grammar telling: do it.
getDistanceTo(position) // same, but do it with “position”.
setFeelings // another skill of me, accessed by the “.”
setFeelings({ inLove: true }); // the skill, with some instructions (anobject).
假設(shè)這是一首人類讀得懂的詩(shī)，你可能已經(jīng)理解了其中的信息，也可能看到了需要遵循的JavaScript語(yǔ)言規(guī)則與需要提出的內(nèi)容（變量）之間有何區(qū)別。
但機(jī)器又會(huì)怎么做呢？
如果是機(jī)器（瀏覽器）讀取這首詩(shī)，那就會(huì)識(shí)別為錯(cuò)誤。機(jī)器需要一個(gè)“me”和“you”的定義，因?yàn)樗噲D訪問(wèn)其屬性（通過(guò)在me.getDistanceTo()中的“.”來(lái)訪問(wèn)）。有了上面提到的區(qū)分能力，實(shí)際上你可以設(shè)計(jì)“me”和“you”,讓計(jì)算機(jī)能夠執(zhí)行或讀取詩(shī)，如下所示：
// This is how the definition of a being (me/you)could look like
var me = {
position: {x: 0, y: 0} // some coordinates, maybe
getDistanceTo: function(position) {
// calculate the distance, relative to own position
},
setFeelings: function(feelings) {
// handle those feelings…
}
}
var you = {
position: {x: 0, y: 0} // some coordinates, maybe
}
// the poem itself
if (me.getDistanceTo(you.position) < 200) {
me.setFeelings({
inLove: true,
});
}
那么在這里發(fā)生了什么？
· 為了讓人們理解，讀取一首用JavaScript“語(yǔ)法”編寫而成的JavaScript詩(shī)；
· 在理解信息之后，為理解詩(shī)的結(jié)構(gòu)（JavaScript的語(yǔ)法和基礎(chǔ)知識(shí)），對(duì)規(guī)則、詞匯和變量進(jìn)行了區(qū)分；
· 通過(guò)這種區(qū)分后，使用JavaScript規(guī)則設(shè)計(jì)了其余的詩(shī)歌變量，使其可以通過(guò)機(jī)器（在瀏覽器中）運(yùn)行。
這可以做到，因?yàn)樘幚鞪avaScript，就像處理英語(yǔ)語(yǔ)言一樣。
LoveBits是一種代碼學(xué)習(xí)或用代碼講故事的體驗(yàn)。
LoveBits：基于JavaScript的代碼詩(shī)歌項(xiàng)目
它試圖通過(guò)以下方式讓人們對(duì)JavaScript或代碼感興趣：
· 將可讀性和人類語(yǔ)言放在第一位；
· 將代碼與讀者可能熟知的藝術(shù)形式相結(jié)合。
故事情節(jié)與兩個(gè)比特（矩形狀）有關(guān)；其中一個(gè)比特（blueBit）是浪漫主義者，為另一個(gè)比特（purpleBit）寫出JavaScript的愛(ài)情詩(shī)。
啟動(dòng)LoveBits時(shí)，可選擇其中一首愛(ài)情詩(shī)（由JavaScript代碼編寫而成）。每首詩(shī)都有一個(gè)代碼片段，不甚熟悉編程的人都能理解其中的編寫方式。這個(gè)項(xiàng)目唯一的要求就是要懂英語(yǔ)。
例如，“l(fā)ove at first sight”(實(shí)際上是LoveBits詩(shī)歌中的一首)講述的是這兩個(gè)比特之間的故事，詩(shī)中，blueBit大致是這么說(shuō)的，“If I get close enough toyour position, I will ‘set my feelings’ to inLove: true.”
這些詩(shī)歌的特殊之處在于你可以通過(guò)點(diǎn)擊下面的“play”按鈕,“run”或“play”它們。在“Love at first sight”的詩(shī)中，你會(huì)見(jiàn)到一個(gè)藍(lán)色和紫色的矩形以及一個(gè)數(shù)字。正如你猜到的那樣，它們就是詩(shī)中提到的兩個(gè)比特，而blueBit下面的數(shù)字實(shí)際上是blueBit和purpleBit之間的距離。
正如詩(shī)歌所暗示的那樣，你可能想要通過(guò)減少它們之間的距離讓blueBit愛(ài)上purpleBit。那要怎么做呢？可以和blueBit互動(dòng)，把它拖來(lái)拖去，讓它墜入愛(ài)河。但要小心，有時(shí)結(jié)果可不只一種。
實(shí)際上有人可能會(huì)說(shuō)程序員成為了這里的機(jī)器，但程序員才是需要解釋JavaScript代碼，并采取行動(dòng)幫助兩個(gè)數(shù)字生物墜入愛(ài)河的那個(gè)人。
如果你是個(gè)奮力拼搏的開(kāi)發(fā)者，試著將JavaScript視為人類語(yǔ)言吧，只了解需首先執(zhí)行的代碼片段就夠了，不必去考慮它們最終運(yùn)行的結(jié)果。
進(jìn)一步的建議：
· 永遠(yuǎn)優(yōu)先選擇能將規(guī)則、詞匯和變量組合在一起形成應(yīng)用程序邏輯的整個(gè)應(yīng)用程序；
· 應(yīng)用程序邏輯會(huì)講故事，這些故事將幫你填補(bǔ)上述代碼示例中的空白。代碼庫(kù)和實(shí)用程序（如lodash）只能提供新的詞匯表，在你能閱讀和理解JavaScript代碼后會(huì)有所幫助;
· 檢查現(xiàn)有代碼，并嘗試將其分解為具有反映其功能名稱的小函數(shù)。編寫適用于人和機(jī)器的代碼，編寫出可以像句子一樣閱讀的代碼，并在需要的地方加以注釋。思考：怎么用人類語(yǔ)言（向另一個(gè)開(kāi)發(fā)者）表述這個(gè)代碼？
將代碼視為人類語(yǔ)言而不是外星人發(fā)明的東西，學(xué)習(xí)代碼就會(huì)更容易。學(xué)習(xí)區(qū)分語(yǔ)言屬性（內(nèi)置）和應(yīng)用程序邏輯的變量/自定義代碼至關(guān)重要。理解了應(yīng)用程序邏輯，你就無(wú)需了解語(yǔ)言特征即可作出改進(jìn)和更改。
學(xué)習(xí)基礎(chǔ)知識(shí)前需明白：理解了任一代碼片段的信息，JavaScript的基礎(chǔ)知識(shí)自然就能隨之掌握。有多少次你聽(tīng)到有人說(shuō)：“我能看懂這種語(yǔ)言，但我還不會(huì)說(shuō)。”這是一個(gè)自然過(guò)程，能夠并可能適用于人類語(yǔ)言和編碼語(yǔ)言的學(xué)習(xí)。
此外，請(qǐng)牢記代碼有明確的功能性目的，但也并非總是如此。即使是人類語(yǔ)言，曾經(jīng)也只滿足純粹的功能性需求，后來(lái)才出現(xiàn)了詩(shī)歌甚至歌曲（說(shuō)到這，有人對(duì)JavaScript歌曲感興趣嗎？）這些以截然不同方式使人們密切相聯(lián)的語(yǔ)言形式。這同樣適用于編程語(yǔ)言。
留言 點(diǎn)贊 關(guān)注
我們一起分享AI學(xué)習(xí)與發(fā)展的干貨
歡迎關(guān)注全平臺(tái)AI垂類自媒體 “讀芯術(shù)”
說(shuō)明：
1.1 拿來(lái)即能用，老少男女皆可為，適合為自己或者女朋友或老婆、男朋友或老公，小孩，老人制作有音樂(lè)的3d圖片展示。
1.2 推薦指數(shù)：★★★★
1.3 適合收藏，代碼已經(jīng)親測(cè)過(guò)，建議谷歌瀏覽器，其他瀏覽器沒(méi)測(cè)試，+微軟vscode編輯器。
2 效果
3 準(zhǔn)備工作：
3.1 圖片準(zhǔn)備：6張jpg圖片：命名為：jt1~6，即jt1.jpg，jt2.jpg，jt3.jpg......，放在文件夾img中。
3.2 背景音樂(lè)準(zhǔn)備：選一個(gè)喜歡的背景音樂(lè)：簡(jiǎn)單一點(diǎn)就是命名為：tiantian.mp3（和我一樣，這樣圖片和音樂(lè)都不需要去修改代碼）。
3.3 vue.js文件需要去官網(wǎng)下載，也可以直接引用，建議下載比較好，因?yàn)閿嗑W(wǎng)也能使用。
3.3.1 直接引用如下：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>3.3.2 下載vue.js，以前說(shuō)過(guò)怎么辦？復(fù)習(xí)一下。
復(fù)制上面的網(wǎng)頁(yè)地址，你懂的，到瀏覽器中打開(kāi)，按ctrl+a全選，復(fù)制到本地，新建一個(gè)txt，黏貼上去，保存，再重新命名為：vue.js,即可。
4.如上圖，圖片、背景音樂(lè)、vue.js準(zhǔn)備好了。
========================
接下來(lái)是代碼部分：一個(gè)一個(gè)來(lái)
========================
5.index.html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue.js立方體旋轉(zhuǎn)播放特效</title>
<!--注意引入js和css文件，但是后面還有一個(gè)vueapp.js文件放在后面引用-->
<script src="./vue.js"></script>
<link rel="stylesheet" href="./3dbox.css">
<link rel="stylesheet" href="./gunball.css">
</head>
<body>
<!--gunball設(shè)置-->
<div class="container">
<div class="cube cube--1">
<div class="side side--back">
<div class="side__inner"></div>
</div>
<div class="side side--left">
<div class="side__inner"></div>
</div>
<div class="side side--right">
<div class="side__inner"></div>
</div>
<div class="side side--top">
<div class="side__inner"></div>
</div>
<div class="side side--bottom">
<div class="side__inner"></div>
</div>
<div class="side side--front">
<div class="side__inner"></div>
</div>
</div>
<div class="cube cube--2">
<div class="side side--back">
<div class="side__inner"></div>
</div>
<div class="side side--left">
<div class="side__inner"></div>
</div>
<div class="side side--right">
<div class="side__inner"></div>
</div>
<div class="side side--top">
<div class="side__inner"></div>
</div>
<div class="side side--bottom">
<div class="side__inner"></div>
</div>
<div class="side side--front">
<div class="side__inner"></div>
</div>
</div>
<div class="cube cube--3">
<div class="side side--back">
<div class="side__inner"></div>
</div>
<div class="side side--left">
<div class="side__inner"></div>
</div>
<div class="side side--right">
<div class="side__inner"></div>
</div>
<div class="side side--top">
<div class="side__inner"></div>
</div>
<div class="side side--bottom">
<div class="side__inner"></div>
</div>
<div class="side side--front">
<div class="side__inner"></div>
</div>
</div>
</div>
<!--音樂(lè)盒div-->
<div id="app">
<div class="main">
<ul class="box" id="box" :class="infoShow?'play':'pause'">
<li v-for="(item,index) in list" :key="item.index" :class="{imgOpen:item.imgShow}">
<img :src="item.imgUrl" />
</li>
</ul>
<dl class="minBox" id="minBox">
<dd v-for="(item,index) in list" :key="item.index">
<img :src="item.imgUrl" />
</dd>
</dl>
</div>
<audio src="./tiantian.mp3" ref="vd"></audio>
<!--音樂(lè)和圖片展示動(dòng)畫開(kāi)關(guān)-->
<div class="content-info" @click="cirClick">
<span :style="{color:infoShow?'#36c9a3':'#fa004b'}">{{infoShow?'關(guān)閉':'打開(kāi)'}}</span>
</div>
</div>
</body>
<!--音樂(lè)盒的vue設(shè)置，必須放在音樂(lè)盒div后面這里引用-->
<script src="./vueapp.js"></script>
</html>
6 vueapp.js文件代碼：
var app = new Vue({
el: "#app",
data() {
return {
list: [
{ index: 1, imgUrl: 'img/jt1.jpg', imgShow: false },
{ index: 2, imgUrl: 'img/jt2.jpg', imgShow: false },
{ index: 3, imgUrl: 'img/jt3.jpg', imgShow: false },
{ index: 4, imgUrl: 'img/jt4.jpg', imgShow: false },
{ index: 5, imgUrl: 'img/jt5.jpg', imgShow: false },
{ index: 6, imgUrl: 'img/jt6.jpg', imgShow: false }
],
openShow: false,
mirrorNum: 0,
imgTimer: null,
rotateY: 0,
imgIndex: -1,
listTimer: null,
boxTimer: null,
infoShow: false,
miaoTimer: null,
catSpeed: 0,
catTimer: null,
closeSpeed: -1,
closeTimer: null
}
},
mounted: function() {},
methods: {
imgMove() {
var oBox = document.getElementById('box');
var oMinBox = document.getElementById('minBox');
this.boxTimer = setInterval(() => {
this.rotateY += 3;
oBox.style.transform = 'perspective(800px) translateZ(-20px) rotateX(-20deg) rotateY(' + this.rotateY + 'deg)';
oMinBox.style.transform = 'perspective(800px) rotateX(-15deg) translateZ(-100px) rotateY(' + (-this.rotateY) + 'deg)';
}, 200)
},
cirClick() {
this.infoShow = !this.infoShow
var oBox = document.getElementById('box');
var aPupil = document.getElementsByClassName('pupil')
var oCat = document.getElementById('cat');
var aLi = oBox.getElementsByTagName('li');
if(this.infoShow) {
clearInterval(this.imgTimer);
this.imgTimer = setInterval(() => {
this.imgIndex++;
this.list[this.imgIndex].imgShow = true;
if(this.imgIndex >= 5) {
clearInterval(this.imgTimer);
this.imgIndex = 0
}
}, 300);
this.imgMove();
for(var i = 0; i < aPupil.length; i++) {
aPupil[i].style.top = '7px',
aPupil[i].style.left = '30px'
}
this.$refs.vd.play()
this.catTimer = setInterval(() => {
var catNum = parseInt(this.$refs.vd.duration) / 2
if(parseInt(this.$refs.vd.currentTime) >= catNum) {
this.catSpeed -= 10;
} else {
this.catSpeed += 10;
}
if(parseInt(this.$refs.vd.currentTime) >= parseInt(this.$refs.vd.duration)) {
clearInterval(this.catTimer);
this.infoShow = false;
clearInterval(this.boxTimer);
for(var i in this.list) {
this.list[i].imgShow = false;
}
}
oCat.style.transform = 'perspective(800px) scale(0.3) translateZ(' + (-20 - this.catSpeed) + 'px)';
}, 300)
} else {
clearInterval(this.boxTimer);
clearInterval(this.imgTimer);
clearInterval(this.catTimer);
for(var i = 0; i < aPupil.length; i++) {
aPupil[i].style.top = '28px',
aPupil[i].style.left = '0px'
}
this.$refs.vd.pause();
for(var i in this.list) {
this.list[i].imgShow = false;
}
}
}
}
})7 3dbox.css文件的代碼：
* {
margin: 0px;
padding: 0px;
}
/*3d正方體的圖片大小畫布設(shè)置*/
.main {
width: 400px;
height: 400px;
margin: 0px auto;
position: relative;
}
/*音樂(lè)盒=3d正方體大小設(shè)置*/
.box {
transform-style: preserve-3d;
position: absolute;
width: 240px;
height: 240px;
left: 50%;
margin-left: -120px;
top: 50%;
margin-top: -120px;
transform: perspective(800px) rotateX(-20deg) rotateY(-20deg) translateZ(-20px);
z-index: 5;
animation: imgMove 5s linear;
}
/*圖片動(dòng)畫設(shè)置*/
@keyframes imgMove {
0%{
transform: rotateX(-20deg)rotateY(-20deg);
}
30%{
transform: rotateX(-80deg)rotateY(-80deg);
}
60% {
transform: rotateX(-160deg)rotateY(-160deg);
}
90% {
transform: rotateX(-240deg)rotateY(-240deg);
}
120%{
transform: rotateX(-320deg)rotateY(-320deg);
}
150%{
transform: rotateX(-240deg)rotateY(-240deg);
}
180% {
transform: rotateX(-180deg)rotateY(-180deg);
}
210% {
transform: rotateX(-120deg)rotateY(-120deg);
}
240% {
transform: rotateX(-80deg)rotateY(-80deg);
}
300% {
transform: rotateX(-60deg)rotateY(-60deg);
}
360% {
transform: rotateX(-20deg)rotateY(20deg);
}
}
.box li {
list-style: none;
width: 240px;
height: 240px;
position: absolute;
opacity: 0.8;
}
.box li img {
width: 240px;
height: 240px;
vertical-align: middle;
}
.box li:nth-child(1) {
transform: translateZ(120px);
-webkit-transform: translateZ(120px);
}
.box li:nth-child(2) {
transform: rotateX(90deg) translateZ(120px);
-webkit-transform: rotateX(90deg) translateZ(120px);
}
.box li:nth-child(3) {
transform: translateZ(-120px);
-webkit-transform: translateZ(-120px);
}
.box li:nth-child(4) {
transform: rotateX(90deg) translateZ(-120px);
-webkit-transform: rotateX(90deg) translateZ(-120px);
}
.box li:nth-child(5) {
transform: rotateY(90deg) translateZ(120px);
-webkit-transform: rotateY(90deg) translateZ(120px);
}
.box li:nth-child(6) {
transform: rotateY(90deg)translateZ(-120px);
-webkit-transform: rotateY(90deg)translateZ(-120px);
}
.box .imgOpen {
opacity: 0.6;
}
.box .imgOpen:nth-child(1) {
transform: translateZ(180px);
-webkit-transform: translateZ(180px);
}
.box .imgOpen:nth-child(2) {
transform: rotateX(90deg) translateZ(180px);
-webkit-transform: rotateX(90deg) translateZ(180px);
}
.box .imgOpen:nth-child(3) {
transform: translateZ(-180px);
-webkit-transform: translateZ(-180px);
}
.box .imgOpen:nth-child(4) {
transform: rotateX(90deg) translateZ(-180px);
-webkit-transform: rotateX(90deg) translateZ(-180px);
}
.box .imgOpen:nth-child(5) {
transform: rotateY(90deg) translateZ(180px);
-webkit-transform: rotateY(90deg) translateZ(180px);
}
.box .imgOpen:nth-child(6) {
transform: rotateY(90deg) translateZ(-180px);
-webkit-transform: rotateY(90deg) translateZ(-180px);
}
.minBox {
transform-style: preserve-3d;
position: absolute;
width: 120px;
height: 120px;
left: 50%;
margin-left: -60px;
top: 50%;
margin-top: -30px;
transform: perspective(800px) rotateX(-15deg) rotateY(0deg) rotateZ(45deg) translateZ(-100px);
}
.minBox dd {
width: 120px;
height: 120px;
position: absolute;
z-index: 4;
}
.minBox dd img {
width: 120px;
height: 120px;
vertical-align: middle;
}
.minBox dd:nth-child(1) {
transform: translateZ(60px);
-webkit-transform: translateZ(60px);
}
.minBox dd:nth-child(2) {
transform: rotateX(90deg) translateZ(60px);
-webkit-transform: rotateX(90deg) translateZ(60px);
}
.minBox dd:nth-child(3) {
transform: translateZ(-60px);
-webkit-transform: translateZ(-60px);
}
.minBox dd:nth-child(4) {
transform: rotateX(90deg) translateZ(-60px);
-webkit-transform: rotateX(90deg) translateZ(-60px);
}
.minBox dd:nth-child(5) {
transform: rotateY(90deg) translateZ(60px);
-webkit-transform: rotateY(90deg) translateZ(60px);
}
.minBox dd:nth-child(6) {
transform: rotateY(90deg)translateZ(-60px);
-webkit-transform: rotateY(90deg)translateZ(-60px);
}
.box .imgOpen:nth-child(1) {
transform: translateZ(180px);
-webkit-transform: translateZ(180px);
}
.box .imgOpen:nth-child(2) {
transform: rotateX(90deg) translateZ(180px);
-webkit-transform: rotateX(90deg) translateZ(180px);
}
.box .imgOpen:nth-child(3) {
transform: translateZ(-180px);
-webkit-transform: translateZ(-180px);
}
.box .imgOpen:nth-child(4) {
transform: rotateX(90deg) translateZ(-180px);
-webkit-transform: rotateX(90deg) translateZ(-180px);
}
.box .imgOpen:nth-child(5) {
transform: rotateY(90deg) translateZ(180px);
-webkit-transform: rotateY(90deg) translateZ(180px);
}
.box .imgOpen:nth-child(6) {
transform: rotateY(90deg) translateZ(-180px);
-webkit-transform: rotateY(90deg) translateZ(-180px);
}
/*音樂(lè)和圖片展示的開(kāi)關(guān)設(shè)置*/
.play {
animation-play-state: running !important;
}
.pause {
animation-play-state: paused !important;
}
.content-info {
/*開(kāi)關(guān)的文字寬度設(shè)置*/
width: 300px;
text-align: center;
/*字體大小設(shè)置*/
font-size: 100px;
position: absolute;
left:300px;
transform-style: preserve-3d;
transform: perspective(800px) scale(0.3) translateZ(-20px);
}
8 gunball.css文件的代碼：
BODY {
/*body的設(shè)置是全局的，也會(huì)影響到正方體音樂(lè)圖片的展示*/
-webkit-perspective: 40em;
perspective: 40em;
-webkit-perspective-origin: center center;
perspective-origin: center center;
overflow: hidden;
/*注意這個(gè)字體大小，不僅僅設(shè)置gunball的大小，也影響音樂(lè)盒的圖片展示*/
font-size: 14px;
background: #000;
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.025) 50%, transparent 50%);
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.025) 50%, transparent 50%);
background-size: 1em 10%;
}
.container {
width: 15em;
height: 15em;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: rotate 12s infinite linear;
animation: rotate 12s infinite linear;
}
.cube {
/*保持gunball大小不變形*/
position: absolute;
width: 1.5em;
height: 1.5em;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.cube--2 {
-webkit-transform: rotateX(45deg) rotateY(45deg);
transform: rotateX(45deg) rotateY(45deg);
}
.cube--3 {
-webkit-transform: rotateX(45deg) rotateZ(45deg);
transform: rotateX(45deg) rotateZ(45deg);
}
.side {
position: absolute;
width: 1.5em;
height: 1.5em;
border: 2px dotted rgba(255, 213, 0, 0.35);
border-radius: 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.side::before, .side::after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
box-sizing: border-box;
border-radius: inherit;
border: 1px solid;
box-shadow: inset 0 0 1em, 0 0 1em;
}
.side::before {
width: 0.5em;
height: 0.5em;
color: gold;
}
.side::after {
width: 0.5em;
height: 0.5em;
-webkit-transform: translateZ(-1em);
transform: translateZ(-1em);
box-shadow: inset 0 0 1em, 0 0 1em;
color: teal;
}
.side--back {
-webkit-transform: translateZ(-2em) rotateY(180deg);
transform: translateZ(-2em) rotateY(180deg);
}
.side--left {
-webkit-transform: translateX(-2em) rotateY(-90deg);
transform: translateX(-2em) rotateY(-90deg);
}
.side--right {
-webkit-transform: translateX(2em) rotateY(90deg);
transform: translateX(2em) rotateY(90deg);
}
.side--top {
-webkit-transform: translateY(-2em) rotateX(90deg);
transform: translateY(-2em) rotateX(90deg);
}
.side--bottom {
-webkit-transform: translateY(2em) rotateX(-90deg);
transform: translateY(2em) rotateX(-90deg);
}
.side--front {
-webkit-transform: translateZ(2em);
transform: translateZ(2em);
}
.side__inner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 0.5em;
height: 0.5em;
margin: auto;
border-radius: inherit;
border: 1px solid;
box-shadow: inset 0 0 1em;
color: orangered;
-webkit-transform: translateZ(1em);
transform: translateZ(1em);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.side__inner::before, .side__inner::after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
box-sizing: border-box;
border-radius: inherit;
border: 1px solid;
box-shadow: inset 0 0 1em, 0 0 1em;
}
.side__inner::before {
width: 0.5em;
height: 0.5em;
-webkit-transform: translateZ(1em);
transform: translateZ(1em);
color: crimson;
}
.side__inner::after {
width: 0.5em;
height: 0.5em;
-webkit-transform: translateZ(1em);
transform: translateZ(1em);
color: purple;
}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
@keyframes rotate {
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
BODY {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}9 注意幾個(gè)問(wèn)題：
9.1 vueapp.js為什么只能放在后面引用，前面引用行不行？感興趣的可以去試試。
9.2 vue.js布局和純html布局的不同，可以思考思考。
9.3 不想思考也沒(méi)事，拿來(lái)就可以使用。注意背景音樂(lè)的命名：tiantian.mp3，6張圖片命名：jt1.jpg，復(fù)制vue.js即可。簡(jiǎn)單使用，小白就會(huì)。
分享出來(lái)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
