?本文主要對GEE中的JavaScript代碼基礎規則與語句、函數等加以介紹。

??本文是谷歌地球引擎（Google Earth Engine，GEE）系列教學文章的第九篇，更多GEE文章請參考專欄：GEE學習與應用_瘋狂學習GIS的博客-CSDN博客。

??在前面的八篇GEE教學博客中，我們對GEE的基本與主要操作加以了詳細介紹與應用實踐；通過前八篇文章，我們初步了解了GEE的簡單規則與應用。有了初步的了解，我們便可以開始更為深入地學習；因此，從本篇教學博客開始，我們就將對GEE的代碼細節與實際應用加以進一步的、更為廣泛且細致的介紹與實踐。那么，本文先從前面幾篇教學博客沒有提及的JavaScript語言代碼基礎規則與語句、函數等入手，進行細致梳理。

1 JavaScript代碼基礎規則

??本部分介紹JavaScript代碼的基礎規則。其中，以下每一條為一個規則。

• 每一行代碼都需要以分號;結尾：

var my_age=18;

• 利用關鍵詞var創造新變量：

var my_age=18;

• 利用括號()傳遞函數的參數：

print("My name is GIS")；

• 文本等String格式數據以單引號''或雙引號""作為起止符號：

var string_data="My name is GIS";

• List格式數據以方括號[]作為起止符號：

var list_data=["my","name","is","GEE"];

• List格式數據初始下標為0。
• 方括號[]可以用來通過key值獲取字典的value值：

print(dict_data["Name"]);

• 點符號.亦可以用來通過key值獲取字典的value值：

print(dict_data.Name);

• 字典格式數據通過大括號{}進行定義：

var dict_data={"Name":"GIS","Age":"18","Home":"Henan"};

• 兩個正斜杠//可以作為注釋的開始：

var my_name="GIS";//Define my name.

• 多行內容注釋可以用/`作為開始，用`/作為結束：

var my_name="GIS";
/*
Here
is
a
multi-line
comments
*/

2 JavaScript代碼基礎函數與語句

??本部分介紹JavaScript代碼的基礎函數與語句。其中，以下每一段為一個方面的函數或語句。

??在第六篇GEE教學博客（Google Earth Engine谷歌地球引擎GEE柵格代數與NDVI波段計算手動求取_瘋狂學習GIS的博客-CSDN博客_gee波段計算）中，我們運用了.subtract()函數表示波段之間進行相減的操作；而若參與運算的參數均為常數（即參數不含圖像），我們還可以直接通過數學符號進行運算：

print(3-2);

??我們可以在print()函數中，增加用單引號或雙引號表示的字符串格式的內容，從而對即將打印的內容加以描述：

print("Subtracting two from three equals:",3-2);

??對于一些常用的操作步驟，我們可以將其封裝至一個函數中，從而提升代碼運行效率。例如以下兩個函數，我們分別首先對其加以定義，隨后通過print()函數加以調用：

var hello=function(string){
  return "Hello "+string+"!";
};

print(hello("GISer"));

var my_add=function(a){
  return a+7;
};

var b=100;
print(b+" plus 7 is:"+my_add(b));

??在第二篇GEE教學博客（Google Earth Engine谷歌地球引擎GEE數據導入后篩選并顯示_瘋狂學習GIS的博客-CSDN博客）中，我們通過搜索的方式導入了GEE內置的遙感影像數據與各類矢量數據；而在實際應用中，我們往往通過代碼調用的方式導入需要的數據。例如，通過如下代碼導入Landsat 5 Collection 1 Tier 1的大氣表觀反射率TOA Reflectance產品；其中，Path與Row號分別為123與032（覆蓋北京市），成像時間為2010年06月05日。

var landsat_5=ee.Image("LANDSAT/LT05/C01/T1_TOA/LT05_123032_20100605");

??導入數據完畢后，我們可以通過Map.setCenter()函數，將交互式地圖的顯示位置自動定位到指定的位置。其中，前兩個參數為指定點的經度與緯度，地圖將以這個點為中心進行定位；第三個參數為地圖的縮放比例系數，其數值越大表示縮放的精度越高——一般的，縮放比例系數為1時即為全球視野，為5時即為大洲視野，為10時即為城市視野，為15時即為街道視野，為20時則為建筑物視野。例如，將縮放比例系數固定為17，執行如下代碼，就可以看到新街口外大街與西側的北京師范大學。

寫CSS的常用套路

前言

本文是筆者寫CSS時常用的套路。不論效果再怎么華麗，萬變不離其宗。

交錯動畫

有時候，我們需要給多個元素添加同一個動畫，播放后，不難發現它們會一起運動，一起結束，這樣就會顯得很平淡無奇。

那么如何將動畫變得稍微有趣一點呢？很簡單，既然它們都是同一時刻開始運動的，那么讓它們不在同一時刻運動不就可以了嗎。如何讓它們不在同一時刻運動呢？注意到CSS動畫有延遲（delay）這一屬性。舉個例子，比如有十個元素播放十個動畫，將第二個元素的動畫播放時間設定為比第一個元素晚0.5秒（也就是將延遲設為0.5秒），其他元素以此類推，這樣它們就會錯開來，形成一種獨特的視覺效果。

這就是所謂的交錯動畫：通過設置不同的延遲時間，達到動畫交錯播放的效果。

本demo：Staggered Wave Loading

訪問地址：https://codepen.io/alphardex/pen/XWWWBmQ

用JS分割文本

還有一種經常用到的玩法：用JS將句子或單詞分割成字母，并給每個字母加上不同延時的動畫，同樣也很華麗

本demo地址：Staggered LandIn Text

訪問地址：https://codepen.io/alphardex/full/KKwvKGY

不同位置的交錯動畫

一般我們都是從第一個元素開始交錯的。但如果要從中間元素開始交錯的話，就要給當前元素的延時各加上一個值，這個值就是中間元素的下標到當前元素的下標的距離（也就是下標之差的絕對值）與步長的乘積

本demo地址：Reveal Text

訪問地址：https://codepen.io/alphardex/full/eYYMYXJ

隨機粒子動畫

說到隨機性，我們可以實現一種更瘋狂的效果：給幾百個粒子添加交錯動畫，并且交錯時間隨機，位置大小也都是隨機。如此一來我們就能用純CSS模擬出下雪的效果。

本demo地址：Snow (Pure CSS)

訪問地址：https://codepen.io/alphardex/full/dyPorwJ

偽類和偽元素

偽類

HTML元素的狀態是可以動態變化的。舉個例子，當你的鼠標懸浮到一個按鈕上時，按鈕就會變成“懸浮”狀態，這時我們就可以利用偽類:hover來選中這一狀態的按鈕，并對其樣式進行改變。

:hover是筆者最最常用的一個偽類。還有一個很常用的偽類是:nth-child，用于選中元素的某一個子元素。其他的類似:focus、:focus-within等也有一定的使用。

本demo地址：Button Hover Border Stroke With Float Text

絕對定位實現多重邊框

誰規定按鈕只能有一套邊框的？利用絕對定位和padding，我們可以給按鈕做出3套大小不一的邊框來，這樣效果更炫了

本demo地址：Button Hover Multiple Border Stroke

https://codepen.io/

きな星を摘んだなら、あなたは大きな富を手に入れる。

前言

本文是筆者寫CSS時常用的套路。不論效果再怎么華麗，萬變不離其宗。

之前發的CSS技巧大部分都是依照本文的套路來寫的

小提示：本文會不定期更新哦！每打開一次可能會有新的驚喜

一點思考

為什么國內的前端做不出高顏值的網站和酷炫的效果？個人認為有幾點原因：

1. 過分執著于JS，認為CSS無關緊要
2. 面經類文章太多，有趣的技巧類文章太少
3. 考慮到要兼容IE而不敢玩那些新特性
4. 看的太少，腦子里沒貨，自然也就缺乏想象力
5. 996的壓迫

交錯動畫

有時候，我們需要給多個元素添加同一個動畫，播放后，不難發現它們會一起運動，一起結束，這樣就會顯得很平淡無奇。

那么如何將動畫變得稍微有趣一點呢？很簡單，既然它們都是同一時刻開始運動的，那么讓它們不在同一時刻運動不就可以了嗎。如何讓它們不在同一時刻運動呢？注意到CSS動畫有延遲（delay）這一屬性。舉個栗子，比如有十個元素播放十個動畫，將第二個元素的動畫播放時間設定為比第一個元素晚0.5秒（也就是將延遲設為0.5秒），其他元素以此類推，這樣它們就會錯開來，形成一種獨特的視覺效果。

這就是所謂的交錯動畫：通過設置不同的延遲時間，達到動畫交錯播放的效果。

本demo地址：Staggered Wave Loading

用JS分割文本

還有一種經常用到的玩法：用JS將句子或單詞分割成字母，并給每個字母加上不同延時的動畫，同樣也很華麗

本demo地址：Staggered LandIn Text

一般我們都是從第一個元素開始交錯的。但如果要從中間元素開始交錯的話，就要給當前元素的延時各加上一個值，這個值就是中間元素的下標到當前元素的下標的距離（也就是下標之差的絕對值）與步長的乘積，即：delay + Math.abs(i - middle) * step，其中中間元素的下標middle = letters.filter(e => e !== "").length / 2

本demo地址：Reveal Text

所有有交錯特性的動畫都在這兒

隨機粒子動畫

說到隨機性，我們可以實現一種更瘋狂的效果：給幾百個粒子添加交錯動畫，并且交錯時間隨機，位置大小也都是隨機。如此一來我們就能用純CSS模擬出下雪的效果。

又到了白色相簿的季節呢~為什么你寫CSS這么熟練啊？

本demo地址：Snow (Pure CSS)

偽類和偽元素

偽類

HTML元素的狀態是可以動態變化的。舉個栗子，當你的鼠標懸浮到一個按鈕上時，按鈕就會變成“懸浮”狀態，這時我們就可以利用偽類:hover來選中這一狀態的按鈕，并對其樣式進行改變。

:hover是筆者最最常用的一個偽類。還有一個很常用的偽類是:nth-child，用于選中元素的某一個子元素。其他的類似:focus、:focus-within等也有一定的使用。

本demo地址：Button Hover Border Stroke With Float Text

所有:hover的動畫都在這兒

絕對定位實現多重邊框

誰規定按鈕只能有一套邊框的？利用絕對定位和padding，我們可以給按鈕做出3套大小不一的邊框來，這樣效果更炫了

本demo地址：Button Hover Multiple Border Stroke

偽元素

簡而言之，偽元素就是在原先的元素基礎上插入額外的元素，而且這個元素不充當HTML的標簽，這樣就能保持HTML結構的整潔。

我們知道每個元素都有::before和::after這兩個偽元素，也就是說每個元素都提供了3個矩形（元素本身1個，偽元素2個）來供我們進行形狀的繪制。現在又有了clip-path這個屬性，幾乎任意的形狀都可以被繪制出來，全憑你的想象力

上面的動圖是條子劃過文本的動畫，條子就是每個文本所對應的偽元素，對每個文本和其偽元素應用動畫，就能達到上圖的效果了

本demo地址：Header With Slide Bar

attr()生成文本內容

元素可以有自定義的屬性值，它的命名格式通常為data-*

attr()用于獲取元素的這種自定義屬性值，并賦值給其偽元素的content作為其生成的內容

利用這個函數，我們可以用偽元素在原先文本的基礎上“復制”出另一個文本，如下圖所示

看上去有點亂糟糟的對吧？沒事，給它加上overflow: hidden，把多余的文本遮住。通過JS分割文本并應用交錯動畫，就得到了如下的效果，這也是接下來本文要講的overflow障眼法

本demo地址：Staggered Float Text Menu

overflow障眼法

之前有做過閃光按鈕的效果：鼠標懸浮按鈕上時一道光從左到右劃過去。

筆者就用漸變來模擬那道光，通過transform: translateX()將其平移至右邊

但這樣明顯不對啊，這光為啥能被看見呢？不應該把它給“擋”起來嗎？

于是乎，給按鈕加上overflow: hidden，光在按鈕外的位置時就被隱藏起來了

這就是障眼法的力量:)

本demo地址：Button Hover Shining

更多障眼法可以看看這個作品，一次性看個夠XD

兄弟選擇符定制表單元素

提示：這里最好將input作為label的子元素，這樣用戶點擊label時就能傳到input上

默認的input太丑怎么辦？那就把它先抹掉，用appearance: none或opacity: 0都可以

然后，利用兄弟選擇符~來定制和input相鄰的所有元素（+號也行，只不過只能選中最近的元素），例如可以用偽元素生成一個新的方框代替原先的input，利用偽類:checked和動畫來表示它被勾選后的狀態，本質上還是障眼法哦~

本demo地址：Todo List

CSS特性

善用某些CSS特性，也可以為你的作品增色不少哦

animation

此處包括transition和transform

CSS動畫可以說是利用CSS設計炫酷特效的最強法器，它幾乎貫穿了我的所有作品

有人問我為什么我能想出這么多的動畫？筆者閱番百部，對常用的動畫技巧了如指掌，同樣那些酷炫的網站只要細心觀察，也會給筆者帶來很多設計上的靈感。

一言以蔽之：只有多欣賞動畫，才能寫出好的動畫。

border-radius

為盒子添加圓角，經常用來美化按鈕等組件

如果設定為50%則是圓形，也很常用

不規則的曲邊形狀

調整多個頂點的border-radius可以做出不規則的曲邊形狀

本demo地址：Nav Tab

box-shadow

為盒子添加陰影，增加盒子的立體感，可以多層疊加，并且會使陰影更加絲滑

本demo地址：Pagination

遮罩

如果給box-shadow的擴張半徑設定足夠大的值，可以用它來遮住背景，而無需額外的div元素

本demo地址：Burger Menu

內發光

注意到box-shadow還有個inset，用于盒子內部發光

利用這個特性我們可以在盒子內部的某個范圍內設定顏色，做出一個新月形

再加點動畫和濾鏡效果，“猩紅之月”閃亮登場！

本demo地址：Crimson Crescent Loading

text-shadow

文本陰影，本質上和box-shadow相同，只不過是相對于文本而言，常用于文本發光，也可通過多層疊加來制作霓虹文本和偽3D文本等效果

發光文本

本demo地址：Staggered GlowIn Text

霓虹文本

本demo地址：Neon Text

偽3D文本

本demo地址：Staggered Bouncing 3D Loading

background-clip:text

能將背景裁剪成文字的前景色，常用來和color: transparent配合生成漸變文本

本demo地址：Menu Hover Fill Text

gradient

漸變可以作為背景圖片的一種，具有很強的色彩效果，甚至可以用來模擬光

linear-gradient

線性漸變是筆者最常用的漸變

這個作品用到了HTML的dialog標簽，漸變背景，動畫以及overflow障眼法，細心的你看出來了嗎:)

本demo地址：Confirm Modal

radial-gradient

徑向漸變筆者沒怎么用過，上面例子中Snow的背景就是一個徑向漸變

conic-gradient

圓錐漸變可以用于制作餅圖

用一個偽元素疊在餅圖上面，并將content設為某個值（這個值通過CSS變量計算出來），就能制作出度量計的效果，障眼法又一次完成了它的使命

本demo地址：Gauge (No SVG)

filter

PS里的濾鏡，玩過的都懂，blur最常用

backdrop-filter

對背景應用濾鏡，產生毛玻璃的效果

本demo地址：Frosted Glass

mix-blend-mode

PS里的混合模式，常用于文本在背景下的特殊效果

以下利用濾色模式（screen）實現文本視頻蒙版效果

本demo地址：Video Mask Text

clip-path

PS里的裁切，可以制作各種不規則形狀。如果和動畫結合也會相當有意思

本demo地址：Name Card Hover Expand

-webkit-box-reflect

投影效果，不怎么常用，適合立體感強的作品

本demo地址：Card Flip Reflection

web animations

雖然這并不是一個CSS特性，但是它經常用于完成那些CSS所做不到的事情

那么何時用它呢？當CSS動畫中有屬性無法從CSS中獲取時，自然就會使用到它了

跟蹤鼠標的位置

目前CSS還尚未有獲取鼠標位置的API，因此考慮用JS來進行

通過查閱相關的DOM API，發現在監聽鼠標事件的API中，可通過e.clientX和e.clientY來獲得鼠標當前的位置

既然能夠獲取鼠標的位置，那么跟蹤鼠標的位置也就不是什么難事了：通過監聽mouseenter和mouseleave事件，來獲取鼠標出入一個元素時的位置，并用此坐標來當作鼠標的位移距離，監聽mousemove事件，來獲取鼠標在元素上移動時的位置，同樣地用此坐標來當作鼠標的位移距離，這樣一個跟蹤鼠標的效果就實現了

本demo地址：Menu Hover Image

CSS Houdini

CSS Houdini是CSS的底層API，它使我們能夠通過這套接口來擴展CSS的功能

讓漸變動起來

目前來說，我們無法直接給漸變添加動畫，因為瀏覽器不理解要改變的值是什么類型

這時，我們就可以利用CSS.registerProperty()來注冊我們的自定義變量，并聲明其語法類型（syntax）為顏色類型<color>，這樣瀏覽器就能理解并對顏色應用插值方法來進行動畫

還記得上文提到的圓錐漸變conic-gradient()嗎？既然它可以用來制作餅圖，那么我們能不能讓餅圖動起來呢？答案是肯定的，定義三個變量：--color1、--color2和--pos，其中--pos的語法類型為長度百分比<length-percentage>，將其從0變為100%，餅圖就會順時針旋轉出現

利用絕對定位和層疊上下文，我們可以疊加多個從小到大的餅圖，再給它們設置不同的顏色，應用交錯動畫，就有了下面這個炫麗的效果

本demo地址：Mawaru

彩蛋

將交錯動畫和偽類偽元素結合起來寫出來的慎重勇者風格的菜單

本demo地址：Shinchou Menu

作者：alphardex
鏈接：https://juejin.im/post/5e070cd9f265da33f8653f00