程式猿的情人節怎麼過？
摘要：
都說程式猿是一類不解風情的生物，“賺的多，花的少，死的早”已經成為了程式猿的標誌，“眼鏡、格子衫、垢面蓬頭、拖鞋褲衩”已然也成了程式猿的代表形象，“程式碼、遊戲、老溼”也已經快要成了程式猿的生命。
但！有的時候，比如情人節，我們就可以發揮我們的特長了，我們程式猿也可以有自己的浪漫！
不...
都說程式猿是一類不解風情的生物，“賺的多，花的少，死的早”已經成為了程式猿的標誌，“眼鏡、格子衫、垢面蓬頭、拖鞋褲衩”已然也成了程式猿的代表形象，“程式碼、遊戲、老溼”也已經快要成了程式猿的生命。
但！有的時候，比如情人節，我們就可以發揮我們的特長了，我們程式猿也可以有自己的浪漫！
不過這個第一步是，你得有一個女朋友（哦哦，是不是可以不用往下看了？
那麼有了第一步之後，下面我們應該怎麼辦呢？
下面介紹一個比較實用的可以送給女朋友的禮物（這其實也是我今天送給女朋友的禮物嘿嘿。
首先想想，作為程式猿，我們的專長是什麼？廢話，當然是程式碼。
有了程式碼，還需要送口紅嗎？還需要送包包嗎？還需要送鮮花嗎？廢話，都有了程式碼了，這些當然就….還是要送的。萬一寫的程式碼你女朋友看不懂那豈不是死翹翹了。
好那送完了口紅或包包或鮮花之後，確保已經平安無事了，我們就可以再發揮我們的光和熱了（聽起來咋這麼奇怪呢？
進入正題，那我們可以利用程式碼做點什麼呢？想想可以做文章的地方有什麼，你們的紀念日，你們曾經做過的事情，你們在一起的時間，這些都是屬於你們的獨一無二的，我們可以想方設法把它們和程式碼聯絡起來。
那怎麼發給女朋友看呢？做個 App、小程式、網頁什麼的都是可以的吧，其中網頁可能是做起來最快最方便的了，然後配上一個專屬域名，簡直美滋滋。
好，那一想，基本方向就確定了，直接開幹，接下來就描述一下我準備這個禮物的歷程吧。
對於我來說，我就計劃做一個網頁，同時用程式碼的形式把和女朋友在一起的時間呈現出來，通過網頁的動效來呈現我們在一起的時間，另外還計劃把我們之間的故事用程式碼關聯表示出來。
本來我打算是從零開始手擼一個的，但是一些元件比如動畫特效，還有一些倒計時的元件是相對比較難做的，於是我就在 GitHub 上逛了一下，看了幾個示例，找到了一個和我理想作品差不多的專案，然後在它的基礎上做了一些改動，就成了最終的效果。
主要功能如下：
-
第一是通過程式碼來表述出來和女朋友之間的故事。由於我和女朋友是因為 Python 認識的，而且我們兩個平時都會寫一些 Python，所以我決定用 Python 來寫出我們之間的故事，加上 Python 的註釋來輔助描述每一行程式碼的意義。
-
第二是通過程式碼來呈現我和女朋友在一起的時間。這裡就用上了一些動畫特效和秒數計時方案，實時地呈現出來我和女朋友在一起已經有多久了。
最終完成之後的效果是這樣子的：
然後由於我自己有一個域名，叫做 cuiqingcai.com，然後我就把它設定了二級域名解析，二級域名名稱就叫做 love，域名最終就是 love.cuiqingcai.com。
最終的效果大家可以掃碼或者複製連結檢視一下最終的效果： http://love.cuiqingcai.com/ ，二維碼如下：
感覺還可以吧？如果你也想送這樣的禮物的話，可以根據我現有的程式碼來進行修改，我已經將原始碼放到 GitHub 了，地址為： https://github.com/Germey/ValentinesDay ，大家可以修改原始碼，把它變成屬於你和你女朋友的專屬頁面，然後送給女朋友。
下面說一些關鍵的技術和需要修改的點。
程式碼動畫
開啟頁面之後，我們可以看到頁面的程式碼是一個字一個字敲出來的，這實際上是利用了一個定時器來實現的。
首先我們可以預定義好所有的文字，然後動畫播放的時候，首先把所有的文字隱藏，然後每隔幾十毫秒讀取一個字元，然後將其呈現出來。由於文字本身就是換行的，所以在呈現的時候就會一行一行地像打字機一樣呈現出來。
另外為了模擬打字的效果，在呈現的時候可以在最後的字元後面新增一個下劃線符號，模擬打字的效果。
其關鍵的實現程式碼如下：
<span role="presentation">(<span class="cm-keyword">function</span> (<span class="cm-def">a</span>) {</span>
<span role="presentation"> <span class="cm-variable-2">a</span>.<span class="cm-property">fn</span>.<span class="cm-property">typewriter</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span> () {</span>
<span role="presentation"> <span class="cm-keyword">this</span>.<span class="cm-property">each</span>(<span class="cm-keyword">function</span> () {</span>
<span role="presentation"> <span class="cm-keyword">var</span> <span class="cm-def">d</span> <span class="cm-operator">=</span> <span class="cm-variable-2">a</span>(<span class="cm-keyword">this</span>), <span class="cm-def">c</span> <span class="cm-operator">=</span> <span class="cm-variable-2">d</span>.<span class="cm-property">html</span>(), <span class="cm-def">b</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>;</span>
<span role="presentation"> <span class="cm-variable-2">d</span>.<span class="cm-property">html</span>(<span class="cm-string">""</span>);</span>
<span role="presentation"> <span class="cm-keyword">var</span> <span class="cm-def">e</span> <span class="cm-operator">=</span> <span class="cm-variable">setInterval</span>(<span class="cm-keyword">function</span> () {</span>
<span role="presentation"> <span class="cm-keyword">var</span> <span class="cm-def">f</span> <span class="cm-operator">=</span> <span class="cm-variable-2">c</span>.<span class="cm-property">substr</span>(<span class="cm-variable-2">b</span>, <span class="cm-number">1</span>);</span>
<span role="presentation"> <span class="cm-keyword">if</span> (<span class="cm-variable-2">f</span> <span class="cm-operator">==</span> <span class="cm-string">"<"</span>) {</span>
<span role="presentation"> <span class="cm-variable-2">b</span> <span class="cm-operator">=</span> <span class="cm-variable-2">c</span>.<span class="cm-property">indexOf</span>(<span class="cm-string">">"</span>, <span class="cm-variable-2">b</span>) <span class="cm-operator">+</span> <span class="cm-number">1</span></span>
<span role="presentation"> } <span class="cm-keyword">else</span> {</span>
<span role="presentation"> <span class="cm-variable-2">b</span><span class="cm-operator">++</span></span>
<span role="presentation"> }</span>
<span role="presentation"> <span class="cm-variable-2">d</span>.<span class="cm-property">html</span>(<span class="cm-variable-2">c</span>.<span class="cm-property">substring</span>(<span class="cm-number">0</span>, <span class="cm-variable-2">b</span>) <span class="cm-operator">+</span> (<span class="cm-variable-2">b</span> <span class="cm-operator">&</span> <span class="cm-number">1</span> <span class="cm-operator">?</span> <span class="cm-string">"_"</span> : <span class="cm-string">""</span>));</span>
<span role="presentation"> <span class="cm-keyword">if</span> (<span class="cm-variable-2">b</span> <span class="cm-operator">>=</span> <span class="cm-variable-2">c</span>.<span class="cm-property">length</span>) {</span>
<span role="presentation"> <span class="cm-variable">clearInterval</span>(<span class="cm-variable-2">e</span>)</span>
<span role="presentation"> }</span>
<span role="presentation"> }, <span class="cm-number">75</span>)</span>
<span role="presentation"> });</span>
<span role="presentation"> <span class="cm-keyword">return</span> <span class="cm-keyword">this</span></span>
<span role="presentation"> }</span>
<span role="presentation">})(<span class="cm-variable">jQuery</span>);</span>
這裡可以看到，首先獲取了頁面程式碼區域的內容，然後通過 DOM 操作將程式碼先清空，然後利用 setInterval 方法設定一個定時器，定時間隔 75 毫秒，也就是說 75 毫秒迴圈呼叫一次。每呼叫一次，就會從原來的字元上多取一個字元，然後尾部拼接一個下劃線就好了。
程式碼內容
接下來就是程式碼內容了，這裡面要想好怎樣把一些關鍵時間來表示出來。比如和女朋友怎樣認識的，後來什麼時間在一起的，一起做過什麼事情，將來有什麼計劃和打算，都可以來描述出來，另外程式語言可以選擇你喜歡的語言，然後配以一定的註釋來描述程式碼所代表的含義。
我和女朋友是在 PyCon 認識的，也算是因為 Python 結緣，然後平時我們都會寫一些 Python，所以我就選用 Python 作為程式語言了。
然後我又加上了我們認識的時間、在一起的時間、一起做過的事情，然後再配以一段程式碼來表達自己的想法，其中的一些靈感也是我看了一些案例想出來的，在表述過程中我使用了面向物件的思維聲明瞭兩個物件，一個代表我，一個代表我女朋友，然後一起做過的事情就可以通過物件呼叫方法的形式來表述出來了，另外一些動作和標誌可以通過自定義方法或者程式碼的引數來表示出來，其中每一行程式碼的動作我都配以一條 Python 的註釋來完成，註釋當然是用英文，一些話我還用了翻譯軟體一句句查的。
然後最後我用了一段 Python 程式碼來表達了自己的感情，內容如下：
<span role="presentation"><span class="cm-comment"># You are the greatest love of my life.</span></span> <span role="presentation"><span class="cm-keyword">while</span> <span class="cm-keyword">True</span>:</span> <span role="presentation"> <span class="cm-keyword">if</span> <span class="cm-variable">u</span>.<span class="cm-property">with</span>(<span class="cm-variable">i</span>):</span> <span role="presentation"> <span class="cm-variable">you</span> = <span class="cm-variable">everything</span></span> <span role="presentation"> <span class="cm-keyword">else</span>:</span> <span role="presentation"> <span class="cm-variable">everything</span> = <span class="cm-variable">u</span></span>
這個程式碼的含義叫做“無論天涯海角，你都是我的一切。“，一個 while True 迴圈代表了永久。
這些程式碼其實都是在 HTML 程式碼中預定義好的，其中註釋需要用 span 標籤配以 comments 的 class 來修飾，縮排需要用 span 標籤配以 placeholder 的 class 來修飾，例如：
<span role="presentation"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">span</span> <span class="cm-attribute">class</span>=<span class="cm-string">"comments"</span><span class="cm-tag cm-bracket">></span># You are the greatest love of my life.<span class="cm-tag cm-bracket"></</span><span class="cm-tag">span</span><span class="cm-tag cm-bracket">><</span><span class="cm-tag">br</span><span class="cm-tag cm-bracket">/></span></span> <span role="presentation">while <span class="cm-tag cm-bracket"><</span><span class="cm-tag">span</span> <span class="cm-attribute">class</span>=<span class="cm-string">"keyword"</span><span class="cm-tag cm-bracket">></span>True<span class="cm-tag cm-bracket"></</span><span class="cm-tag">span</span><span class="cm-tag cm-bracket">></span>:<span class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span><span class="cm-tag cm-bracket">/></span></span> <span role="presentation"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">span</span> <span class="cm-attribute">class</span>=<span class="cm-string">"placeholder"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">span</span><span class="cm-tag cm-bracket">><</span><span class="cm-tag">span</span> <span class="cm-attribute">class</span>=<span class="cm-string">"keyword"</span><span class="cm-tag cm-bracket">></span>if<span class="cm-tag cm-bracket"></</span><span class="cm-tag">span</span><span class="cm-tag cm-bracket">></span> u.with(i):<span class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span><span class="cm-tag cm-bracket">/></span></span> <span role="presentation"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">span</span> <span class="cm-attribute">class</span>=<span class="cm-string">"placeholder"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">span</span><span class="cm-tag cm-bracket">><</span><span class="cm-tag">span</span> <span class="cm-attribute">class</span>=<span class="cm-string">"placeholder"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">span</span><span class="cm-tag cm-bracket">></span>you = everything<span class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span><span class="cm-tag cm-bracket">/></span></span> <span role="presentation"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">span</span> <span class="cm-attribute">class</span>=<span class="cm-string">"placeholder"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">span</span><span class="cm-tag cm-bracket">><</span><span class="cm-tag">span</span> <span class="cm-attribute">class</span>=<span class="cm-string">"keyword"</span><span class="cm-tag cm-bracket">></span>else<span class="cm-tag cm-bracket"></</span><span class="cm-tag">span</span><span class="cm-tag cm-bracket">></span>:<span class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span><span class="cm-tag cm-bracket">/></span></span> <span role="presentation"><span class="cm-tag cm-bracket"><</span><span class="cm-tag">span</span> <span class="cm-attribute">class</span>=<span class="cm-string">"placeholder"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">span</span><span class="cm-tag cm-bracket">><</span><span class="cm-tag">span</span> <span class="cm-attribute">class</span>=<span class="cm-string">"placeholder"</span><span class="cm-tag cm-bracket">></</span><span class="cm-tag">span</span><span class="cm-tag cm-bracket">></span>everything = u<span class="cm-tag cm-bracket"><</span><span class="cm-tag">br</span><span class="cm-tag cm-bracket">/></span></span>
這裡不同的格式用 span 的不同 class 來標識，空格縮排一個 placeholder 是兩個空格，comments 代表註釋格式，關鍵詞使用 keyword 來標識。如果你需要自定義自己的內容，通過控制這些內容穿插寫入就好了。
紀念日計時
關於紀念日，這個實現起來其實挺簡單的，就是首先定義好你們的紀念日，然後獲取當前系統時間，然後計算秒數差值，然後將其轉化為天數、小時數即可，關鍵核心程式碼實現如下：
<span role="presentation"><span class="cm-keyword">function</span> <span class="cm-def">timeElapse</span>(<span class="cm-def">c</span>) {</span>
<span role="presentation"> <span class="cm-keyword">var</span> <span class="cm-def">e</span> <span class="cm-operator">=</span> <span class="cm-variable">Date</span>();</span>
<span role="presentation"> <span class="cm-keyword">var</span> <span class="cm-def">f</span> <span class="cm-operator">=</span> (<span class="cm-variable">Date</span>.<span class="cm-property">parse</span>(<span class="cm-variable-2">e</span>) <span class="cm-operator">-</span> <span class="cm-variable">Date</span>.<span class="cm-property">parse</span>(<span class="cm-variable-2">c</span>)) <span class="cm-operator">/</span> <span class="cm-number">1000</span>;</span>
<span role="presentation"> <span class="cm-keyword">var</span> <span class="cm-def">g</span> <span class="cm-operator">=</span> <span class="cm-variable">Math</span>.<span class="cm-property">floor</span>(<span class="cm-variable-2">f</span> <span class="cm-operator">/</span> (<span class="cm-number">3600</span> <span class="cm-operator">*</span> <span class="cm-number">24</span>));</span>
<span role="presentation"> <span class="cm-variable-2">f</span> <span class="cm-operator">=</span> <span class="cm-variable-2">f</span> <span class="cm-operator">%</span> (<span class="cm-number">3600</span> <span class="cm-operator">*</span> <span class="cm-number">24</span>);</span>
<span role="presentation"> <span class="cm-keyword">var</span> <span class="cm-def">b</span> <span class="cm-operator">=</span> <span class="cm-variable">Math</span>.<span class="cm-property">floor</span>(<span class="cm-variable-2">f</span> <span class="cm-operator">/</span> <span class="cm-number">3600</span>);</span>
<span role="presentation"> <span class="cm-keyword">if</span> (<span class="cm-variable-2">b</span> <span class="cm-operator"><</span> <span class="cm-number">10</span>) {</span>
<span role="presentation"> <span class="cm-variable-2">b</span> <span class="cm-operator">=</span> <span class="cm-string">"0"</span> <span class="cm-operator">+</span> <span class="cm-variable-2">b</span></span>
<span role="presentation"> }</span>
<span role="presentation"> <span class="cm-variable-2">f</span> <span class="cm-operator">=</span> <span class="cm-variable-2">f</span> <span class="cm-operator">%</span> <span class="cm-number">3600</span>;</span>
<span role="presentation"> <span class="cm-keyword">var</span> <span class="cm-def">d</span> <span class="cm-operator">=</span> <span class="cm-variable">Math</span>.<span class="cm-property">floor</span>(<span class="cm-variable-2">f</span> <span class="cm-operator">/</span> <span class="cm-number">60</span>);</span>
<span role="presentation"> <span class="cm-keyword">if</span> (<span class="cm-variable-2">d</span> <span class="cm-operator"><</span> <span class="cm-number">10</span>) {</span>
<span role="presentation"> <span class="cm-variable-2">d</span> <span class="cm-operator">=</span> <span class="cm-string">"0"</span> <span class="cm-operator">+</span> <span class="cm-variable-2">d</span></span>
<span role="presentation"> }</span>
<span role="presentation"> <span class="cm-variable-2">f</span> <span class="cm-operator">=</span> <span class="cm-variable-2">f</span> <span class="cm-operator">%</span> <span class="cm-number">60</span>;</span>
<span role="presentation"> <span class="cm-keyword">if</span> (<span class="cm-variable-2">f</span> <span class="cm-operator"><</span> <span class="cm-number">10</span>) {</span>
<span role="presentation"> <span class="cm-variable-2">f</span> <span class="cm-operator">=</span> <span class="cm-string">"0"</span> <span class="cm-operator">+</span> <span class="cm-variable-2">f</span></span>
<span role="presentation"> }</span>
<span role="presentation">}</span>
另外它也是通過一個定時器來實現的時間重新整理，每隔 500 毫秒呼叫一次：
<span role="presentation"><span class="cm-variable">setInterval</span>(<span class="cm-keyword">function</span> () {</span>
<span role="presentation"> <span class="cm-variable">timeElapse</span>(<span class="cm-variable">together</span>);</span>
<span role="presentation">}, <span class="cm-number">500</span>);</span>
動畫心形
動畫心形，其實這個實現起來是很巧妙的。這裡在畫的時候實際上是利用了貝塞爾曲線來繪製一個心形，同時在在畫的過程中還加了花開的效果，花開的效果使用了隨機數和隨機顏色生成。
其中動畫畫心形的核心程式碼如下：
<span role="presentation"><span class="cm-variable">Petal</span>.<span class="cm-property">prototype</span> = {</span>
<span role="presentation"> <span class="cm-variable">draw</span>: <span class="cm-variable">function</span> () {</span>
<span role="presentation"> <span class="cm-variable">var</span> <span class="cm-variable">a</span> = <span class="cm-variable">this</span>.<span class="cm-property">bloom</span>.<span class="cm-property">garden</span>.<span class="cm-property">ctx</span>;</span>
<span role="presentation"> <span class="cm-variable">var</span> <span class="cm-variable">e</span>, <span class="cm-variable">d</span>, <span class="cm-variable">c</span>, <span class="cm-variable">b</span>;</span>
<span role="presentation"> <span class="cm-variable">e</span> = <span class="cm-variable">new</span> <span class="cm-variable">Vector</span>(<span class="cm-number">0</span>, <span class="cm-variable">this</span>.<span class="cm-property">r</span>).<span class="cm-property">rotate</span>(<span class="cm-variable">Garden</span>.<span class="cm-property">degrad</span>(<span class="cm-variable">this</span>.<span class="cm-property">startAngle</span>));</span>
<span role="presentation"> <span class="cm-variable">d</span> = <span class="cm-variable">e</span>.<span class="cm-property">clone</span>().<span class="cm-property">rotate</span>(<span class="cm-variable">Garden</span>.<span class="cm-property">degrad</span>(<span class="cm-variable">this</span>.<span class="cm-property">angle</span>));</span>
<span role="presentation"> <span class="cm-variable">c</span> = <span class="cm-variable">e</span>.<span class="cm-property">clone</span>().<span class="cm-property">mult</span>(<span class="cm-variable">this</span>.<span class="cm-property">stretchA</span>);</span>
<span role="presentation"> <span class="cm-variable">b</span> = <span class="cm-variable">d</span>.<span class="cm-property">clone</span>().<span class="cm-property">mult</span>(<span class="cm-variable">this</span>.<span class="cm-property">stretchB</span>);</span>
<span role="presentation"> <span class="cm-variable">a</span>.<span class="cm-property">strokeStyle</span> = <span class="cm-variable">this</span>.<span class="cm-property">bloom</span>.<span class="cm-property">c</span>;</span>
<span role="presentation"> <span class="cm-variable">a</span>.<span class="cm-property">beginPath</span>();</span>
<span role="presentation"> <span class="cm-variable">a</span>.<span class="cm-property">moveTo</span>(<span class="cm-variable">e</span>.<span class="cm-property">x</span>, <span class="cm-variable">e</span>.<span class="cm-property">y</span>);</span>
<span role="presentation"> <span class="cm-variable">a</span>.<span class="cm-property">bezierCurveTo</span>(<span class="cm-variable">c</span>.<span class="cm-property">x</span>, <span class="cm-variable">c</span>.<span class="cm-property">y</span>, <span class="cm-variable">b</span>.<span class="cm-property">x</span>, <span class="cm-variable">b</span>.<span class="cm-property">y</span>, <span class="cm-variable">d</span>.<span class="cm-property">x</span>, <span class="cm-variable">d</span>.<span class="cm-property">y</span>);</span>
<span role="presentation"> <span class="cm-variable">a</span>.<span class="cm-property">stroke</span>()</span>
<span role="presentation"> }, <span class="cm-variable">render</span>: <span class="cm-variable">function</span> () {</span>
<span role="presentation"> <span class="cm-keyword">if</span> (<span class="cm-variable">this</span>.<span class="cm-property">r</span> <span class="cm-operator"><</span>= <span class="cm-variable">this</span>.<span class="cm-property">bloom</span>.<span class="cm-property">r</span>) {</span>
<span role="presentation"> <span class="cm-variable">this</span>.<span class="cm-property">r</span> += <span class="cm-variable">this</span>.<span class="cm-property">growFactor</span>;</span>
<span role="presentation"> <span class="cm-variable">this</span>.<span class="cm-property">draw</span>()</span>
<span role="presentation"> } <span class="cm-keyword">else</span> {</span>
<span role="presentation"> <span class="cm-variable">this</span>.<span class="cm-property">isfinished</span> = <span class="cm-variable">true</span></span>
<span role="presentation"> }</span>
<span role="presentation"> }</span>
<span role="presentation">};</span>
這裡最關鍵的一個部分就是 bezierCurveTo，這裡傳入的是繪製貝塞爾曲線的引數座標，那這些座標怎麼生成的呢，這裡是利用了數學上的一個桃心線方程，如圖所示：
其中心形線的解析方程為：
這個公式代表了繪製座標點的 x、y 的解析方程，用程式碼表示出來就是：
<span role="presentation"><span class="cm-variable">function</span> <span class="cm-variable">getHeartPoint</span>(<span class="cm-variable">c</span>) {</span>
<span role="presentation"> <span class="cm-variable">var</span> <span class="cm-variable">b</span> = <span class="cm-variable">c</span> <span class="cm-operator">/</span> <span class="cm-variable">Math</span>.<span class="cm-property">PI</span>;</span>
<span role="presentation"> <span class="cm-variable">var</span> <span class="cm-variable">a</span> = <span class="cm-number">19.5</span> <span class="cm-operator">*</span> (<span class="cm-number">16</span> <span class="cm-operator">*</span> <span class="cm-variable">Math</span>.<span class="cm-property">pow</span>(<span class="cm-variable">Math</span>.<span class="cm-property">sin</span>(<span class="cm-variable">b</span>), <span class="cm-number">3</span>));</span>
<span role="presentation"> <span class="cm-variable">var</span> <span class="cm-variable">d</span> = <span class="cm-operator">-</span><span class="cm-number">20</span> <span class="cm-operator">*</span> (<span class="cm-number">13</span> <span class="cm-operator">*</span> <span class="cm-variable">Math</span>.<span class="cm-property">cos</span>(<span class="cm-variable">b</span>) <span class="cm-operator">-</span> <span class="cm-number">5</span> <span class="cm-operator">*</span> <span class="cm-variable">Math</span>.<span class="cm-property">cos</span>(<span class="cm-number">2</span> <span class="cm-operator">*</span> <span class="cm-variable">b</span>) <span class="cm-operator">-</span> <span class="cm-number">2</span> <span class="cm-operator">*</span> <span class="cm-variable">Math</span>.<span class="cm-property">cos</span>(<span class="cm-number">3</span> <span class="cm-operator">*</span> <span class="cm-variable">b</span>) <span class="cm-operator">-</span> <span class="cm-variable">Math</span>.<span class="cm-property">cos</span>(<span class="cm-number">4</span> <span class="cm-operator">*</span> <span class="cm-variable">b</span>));</span>
<span role="presentation"> <span class="cm-keyword">return</span> <span class="cm-variable">new</span> <span class="cm-variable">Array</span>(<span class="cm-variable">offsetX</span> <span class="cm-operator">+</span> <span class="cm-variable">a</span>, <span class="cm-variable">offsetY</span> <span class="cm-operator">+</span> <span class="cm-variable">d</span>)</span>
<span role="presentation">}</span>
這裡是生產了心形線方程的 x、y 座標，然後再以此繪製出帶有動畫效果的心形。
最終呈現的效果就是現在你看到的樣子。
不過這些在改程式碼的時候實際上不用關心，只需要修改你們在一起的時間就好了，就是程式碼中的這一行：
<span role="presentation"><span class="cm-variable">together</span>.<span class="cm-property">setFullYear</span>(<span class="cm-number">2018</span>, <span class="cm-number">10</span>, <span class="cm-number">5</span>);</span> <span role="presentation"><span class="cm-variable">together</span>.<span class="cm-property">setHours</span>(<span class="cm-number">15</span>);</span>
這裡修改你們在一起的時間和小時就可以了，然後頁面就會自動更新你們在一起多久了，並動態呈現出來了。
域名解析
對於域名解析，這個建議大家可以申請一個域名，比如我的域名就是 cuiqingcai.com，我可以設定一個二級域名解析，叫做 love.cuiqingcai.com。
如果沒有域名的話可以現買一個，比如阿里雲、騰訊雲購買，然後設定解析即可。
如果沒有域名，也可以使用一些虛擬雲伺服器，他們會幫你設定二級域名，當然也可以使用 GitHub Pages，甚至你使用 IP 地址來訪問也是沒問題的。
專案程式碼
專案的程式碼我都放在了： https://github.com/Germey/ValentinesDay ，大家可以自行修改成想要的樣子送給女朋友，只能幫你到這裡啦。
嘿嘿，這就是我今天送給女朋友的禮物，女朋友收到了開心得不得了，開心。
我的禮物
其實我今天也收到了女朋友送的特殊的禮物，可以說她確實花了不少心思啊，她送了我什麼呢？令我沒想到的是，她居然剛申請了一個微店，然後她微店上架了好多商品，我看到時候驚呆了，店鋪如圖所示：
裡面上架了什麼商品？洗水果服務？做飯刷碗服務？捏肩膀服務？還有自動哄老婆機？我驚了。
她把商品發給我，我好奇問她這是幹嘛的。
她說：要獲得我的洗水果服務，捏肩膀服務，只需要在我的小店裡購買使用就好了（作掐腰狀）！還有自動哄老婆機，你要惹我生氣了，只需要購買一個自動哄老婆機，我就會不生氣了！嘿嘿合不合算？
我說：多少錢？999！這麼貴的嗎！
她說：當然不是啦，親親我們店裡有活動的，使用優惠券滿 999 減 998 呢，您是我的 VIP 唯一專屬客戶，我會給您發優惠券的呀，使用優惠券只需要一塊錢就可以購買了。購買之後，您每次使用一張，我就可以給您洗水果、捏肩膀了！這個情人節的話呢，我要送親親 10 張！可省著點話，不能累到店長我啊！
哦哦，臥槽真牛逼啊！於是乎我就快快樂樂領取到了十張優惠券購買了女朋友的這些服務，等著時不時用一張，享受一下帝王級的待遇，美滋滋！哈哈~
最後，祝大家情人節快樂！幸福！