apple_time
A countdown clock
心血來潮李剖，想做一個蘋果發(fā)布會的倒計時
訪問地址
備用地址
https://barnett617.github.io/apple_time
Fork me on github
https://github.com/barnett617/apple_time
前言
本網(wǎng)站基于github pages服務進行展示
過程
步驟如下：
- 首先兢仰，網(wǎng)頁標題來個標志性的蘋果圖標
如何為網(wǎng)站添加圖標：
在<head>標簽中添加<link rel="shortcut icon" href="favicon.ico">，其會從項目根目錄找favicon.ico文件
rel表示將要引用的資源類型，href表示指向資源的URL檬寂，
<link rel="shortcut icon" href="favicon.ico">中rel="shortcut icon"是一種固定寫法讨跟，不寫或錯寫會導致圖標無法正常顯示。
- 主體布局
背景
如果要背景鋪滿屏幕易猫，來一個漸變色要怎么做呢
首先耻煤，為什么要用漸變，因為好看啊
其次准颓，為什么漸變不用PS做的圖片哈蝇，因為CSS3提供了gradients屬性，通過CSS實現(xiàn)其實漸變是由瀏覽器生成的攘已，可以減少下載的事件和寬帶的使用
既然漸變是瀏覽器生成的炮赦，就會涉及到不同瀏覽器的支持問題（Safari、Opera样勃、Firefox等）
另外吠勘，漸變的方式分為兩種：線性漸變（Linear Gradients）和徑向漸變（Radial Gradients）性芬，顧名思義，線性漸變是從一個起點沿著一個方向從一種顏色漸變成另一種顏色剧防，而徑向漸變是從一個起點沿著一個角度漸變
線性：linear-gradient
徑向：radial-gradient
其參數(shù)對于不同的瀏覽器有著不同的寫法批旺，但基本都是在配置漸變方向和漸變首末的顏色
從上到下（默認）
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 標準的語法 */
從左到右
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 標準的語法 */
左上角到右下角
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 標準的語法 */
注意：Internet Explorer 9 及之前的版本不支持漸變
上面的是指定方向，也可以指定角度诵姜，如下：
background-image: linear-gradient(to top, #7A88FF, #7AFFAF);
/* 等價 */
background-image:linear-gradient(0deg, #7A88FF, #7AFFAF);
角度指的是過渡在哪個方向截止汽煮，瀏覽器會繪制一條經(jīng)過元素中心點的假想線。指定的角度就是這條線的角度棚唆，同時還指明過度在哪里結束
| 0deg | 表示元素的頂邊 | to top |
| 90deg | 表示元素的右邊 | to right |
| 180deg | 表示元素的底邊 | to bottom |
| 270deg | 表示元素的左邊 | to left |
[圖片上傳失敗...(image-f85b1c-1536080061638)]
如果仍然無法理解角度如何用，這里有一個在線演示
除此宵凌，透明度（transparent）使用
CSS3 漸變也支持透明度（transparent）鞋囊，可用于創(chuàng)建減弱變淡的效果。
可使用 rgba() 函數(shù)來定義顏色結點瞎惫。rgba() 函數(shù)中的最后一個參數(shù)可以是從 0 到 1 的值溜腐，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明瓜喇。
如下為從左側完全透明的紅色到右側完全不透明的紅色
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 標準的語法 */
以上都是線性漸變
接下來是徑向漸變
radial-gradient(center, shape size, start-color, ..., last-color);
若不指定前面的參數(shù)挺益，只指明顏色，則按照默認情況對顏色進行均勻分布
可以根據(jù)需求添加任意多個顏色乘寒。額外添加的顏色叫色標（color stop）
添加色標后望众，背景會從第一個顏色過渡到第二個顏色，再從第二個顏色過渡到第三個顏色伞辛，直到漸變的最后一個顏色為止烂翰。瀏覽器會平均分布各個顏色
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 標準的語法 */
如下為背景色從左到右開始漸變，最左邊是玫紅蚤氏，在元素寬度20%的位置變成青色甘耿，80%的位置變成黃色，最后是藍色竿滨。
linear-gradient(to right, #E94E65, #15A892 20%, #A89215 80%, #1574A8);
使用多色漸變時佳恬，第一個顏色和最后一個顏色無需指定位置，因為瀏覽器會嘉定第一個顏色從0%的位置開始姐呐，最后一個顏色在100%的位置結束殿怜。除非想把第一個顏色或最后一個顏色的位置放在指定的位置開始，才需要專門定位曙砂。
若想顏色不均勻分布头谜，可手動對顏色增加權重
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 標準的語法 */
shape 參數(shù)定義了形狀。它可以是值 circle 或 ellipse鸠澈。其中柱告，circle 表示圓形截驮，ellipse 表示橢圓形。默認值是 ellipse际度。
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 標準的語法 */
repeating-radial-gradient() 函數(shù)用于重復徑向漸變
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Opera 11.6 - 12.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
/* 標準的語法 */
background: repeating-radial-gradient(red, yellow 10%, green 15%);
布局
需要文字內(nèi)容水平垂直居中葵袭，這就涉及到一個老生常談的問題
一開始隨手一加，使用flex布局
<body>
<div class="container">
<span>倒計時</span>
</div>
</body>
.container {
display: flex;
justify-content: center;
align-items: center;
}
發(fā)現(xiàn)效果并不理想乖菱，只水平居中了坡锡，垂直方向并沒有居中
這里犯了一個flex布局的理解錯誤，對某個元素進行flex的設置窒所，將影響其子元素鹉勒，而不是其本身的布局，所以這里其實想container這一級水平垂直居中吵取，那么display: flex;應該加在它的父級禽额，即body的屬性上
而在body上加過多的樣式不是理想的做法，我們是想以 container 為頁面根級皮官，所以在其上加flex布局脯倒，然后將其子元素達到居中的效果，那么要讓 container 作為頁面根級捺氢，則需要其鋪滿屏幕藻丢，這里需要做一些樣式設計。
首先讯沈，發(fā)現(xiàn) container 并未鋪滿屏幕郁岩，即元素沒有貼邊瀏覽器，這是因為body有一個默認外邊距缺狠，會隨著不同的瀏覽器有著不同的行為，所以即使 container 高度和寬度100%貼著body萍摊，也無法占滿屏幕挤茄，這就是為什么要對css作全局初始樣式，重置其默認樣式
body {
display: block;
margin: 8px;
}
需要在body上進行重置
button, p, pre {
margin: 0;
}
另外冰木，要讓漸變色的背景鋪滿屏幕穷劈，這里采用了對html和body元素設置高度100%，從而達到自適應踊沸，背景總占滿屏幕的效果
html, body {
width: 100%;
height: 100%;
}
body {
background-image: linear-gradient(45deg, #7A88FF, #7AFFAF);
}
倒計時
接下來歇终，需要一個定時器來展示倒計時
這里結束時間從簡處理，即使用(后續(xù)可優(yōu)化為目標時間從目標網(wǎng)站中獲取)
思路
倒計時即是要計算剩余時間逼龟，即目標時間的時間戳減去當下時間的時間戳來做一個格式化顯示评凝，因為當下時間是實時變化的，所以并不需要做特殊處理腺律，只要用目標時間戳(常量) - 當前時間(變量)便可得到倒計時應該顯示的剩余時間
這里國際化是重點
首先來看一下 js 提供的當?shù)貢r間（根據(jù)瀏覽器所設地區(qū)顯示相應時間）方法
new Date().toLocaleString()
// "2018/9/4 下午5:04:02"
new Date().toLocaleDateString()
// "2018/9/4"
new Date().toLocaleTimeString()
// "下午5:04:21"
這是 js i18n程序提供的時間格式化方法
Date對象是js原生時間庫奕短，以1970年1月1日00:00:00作為起點
Date對象作為普通函數(shù)直接調(diào)用會返回代表當前時間的字符串（無論是否傳遞參數(shù)）
Date()
// "Tue Sep 04 2018 17:23:42 GMT+0800 (中國標準時間)"
Date('2018-08-08')
// "Tue Sep 04 2018 17:23:55 GMT+0800 (中國標準時間)"
Date(2018, 08, 08)
// "Tue Sep 04 2018 17:24:05 GMT+0800 (中國標準時間)"
Date作為構造函數(shù)時宜肉，使用new返回一個Date對象實例
new Date()
// Tue Sep 04 2018 17:25:49 GMT+0800 (中國標準時間)
new Date('2018-08-08')
// Wed Aug 08 2018 08:00:00 GMT+0800 (中國標準時間)
new Date(2018, 08, 08)
// Sat Sep 08 2018 00:00:00 GMT+0800 (中國標準時間)
*** 特殊地
普通對象求值，都默認調(diào)用其valueOf()方法翎碑，而Date實例求值谬返，默認調(diào)用toString()方法
var a = 'hello'
a
// "hello"
a.valueOf()
// "hello"
a.toString()
// "hello"
var b = 3
b
// 3
b.valueOf()
// 3
b.toString()
// "3"
var c = new Date()
c
// Tue Sep 04 2018 17:31:30 GMT+0800 (中國標準時間)
c.valueOf()
// 1536053490129
c.toString()
// "Tue Sep 04 2018 17:31:30 GMT+0800 (中國標準時間)"
使用Date構造函數(shù)生產(chǎn)日期實例可傳遞各種類型的參數(shù)
new Date().valueOf()
// 1536053659322
// 參數(shù)為時間零點開始計算的毫秒數(shù)
new Date(1536053659322)
// Tue Sep 04 2018 17:34:19 GMT+0800 (中國標準時間)
// 參數(shù)為日期字符串
new Date('Sep 4, 2018')
// Tue Sep 04 2018 00:00:00 GMT+0800 (中國標準時間)
new Date('Oct 4, 2018')
// Thu Oct 04 2018 00:00:00 GMT+0800 (中國標準時間)
new Date('Oct 4, 2018, 08:59:59')
// Thu Oct 04 2018 08:59:59 GMT+0800 (中國標準時間)
new Date('Oct 4, 2018, 08:61:59')
// Invalid Date
// 參數(shù)為多個整數(shù)
// 代表年、月日杈、日遣铝、小時、分鐘莉擒、秒翰蠢、毫秒
new Date(2018, 10, 23, 6, 34, 59, 500)
// Fri Nov 23 2018 06:34:59 GMT+0800 (中國標準時間)
new Date('Fri Nov 23 2018 06:34:59')
// Fri Nov 23 2018 06:34:59 GMT+0800 (中國標準時間)
new Date('Fri Nov 23 2018 06:34:59').valueOf()
// 1542926099000
既然這樣，那么Date()構造方法的參數(shù)都可以是什么格式的呢啰劲？
答：任何可以被Date.parse()方法解析的字符串
注意點
參數(shù)可以是負整數(shù)梁沧，代表1970年元旦之前的時間
參數(shù)為多個整數(shù)時，至少需要兩個參數(shù)蝇裤，即年和月廷支，若只傳遞一個參數(shù)，將按照毫秒數(shù)處理
參數(shù)取值范圍
年：使用四位數(shù)年份栓辜，比如2000恋拍。如果寫成兩位數(shù)或個位數(shù)，則加上1900藕甩，即10代表1910年施敢。如果是負數(shù)，表示公元前
月：0表示一月狭莱，依次類推僵娃，11表示12月
日：1到31
小時：0到23
分鐘：0到59
秒：0到59
毫秒：0到999
參數(shù)如果超出了正常范圍，會被自動折算
參數(shù)只有一個時腋妙，使用負整數(shù)表示
1970年元旦之前的時間默怨，參數(shù)為多個整數(shù)時，使用負整數(shù)表示從基準日扣去相應的時間
new Date(-1542926099000)
// Wed Feb 09 1921 09:25:01 GMT+0800 (中國標準時間)
new Date(2018, 09, -1)
// Sat Sep 29 2018 00:00:00 GMT+0800 (中國標準時間)
new Date(2018, 0)
Mon Jan 01 2018 00:00:00 GMT+0800 (中國標準時間)
new Date(2018, 0, -1)
Sat Dec 30 2017 00:00:00 GMT+0800 (中國標準時間)
new Date(2018, 1, -1)
Tue Jan 30 2018 00:00:00 GMT+0800 (中國標準時間)
new Date(2018, 1)
Thu Feb 01 2018 00:00:00 GMT+0800 (中國標準時間)
留個疑問骤素，如何求
明年的昨天匙睹，比如，現(xiàn)在是Tue Sep 04 2018 18:04:58 GMT+0800 (中國標準時間)济竹，明年的昨天即是Wed Sep 03 2019 18:04:58 GMT+0800 (中國標準時間)痕檬，有好的方法可以提PR，
此處的目標時間如下：
2018 年 9 月 12 日上午 10 點（北京時間 9 月 13 日凌晨 1 點）
后記
沒想到最終呈現(xiàn)出來這么簡單的一個頁面竟涉及到這么多東西送浊，而且每一個環(huán)節(jié)都可以細究到很多深層次的東西梦谜，這就是web的世界
補充
使用vscode+搜狗輸入法編輯本md文件上傳至github后發(fā)現(xiàn)隱藏字符，形如：
[圖片上傳失敗...(image-fcce86-1536080061638)]
查得原因為
在mac版vscode的中文輸入法下，按下任意字母改淑，出現(xiàn)中文候選后按刪除鍵碍岔，刪除完剛才輸入的字母再按刪除會出現(xiàn)這個控制字符
mac版的vscode中這個隱藏字符默認隱藏，可通過修改如下配置打開朵夏，將文檔中顯示BS的退格符全局搜索并替換為空即可
//控制編輯器是否應呈現(xiàn)控制字符
"editor.renderControlCharacters": true
原理解析：BS為ASCII碼中的退格符的Unicode表示法蔼啦，而所有ASCII控制字符都有一個圖形外觀
參考鏈接：
