仿蘋果h5時間選擇器

A. H5培訓班培訓什麼內容

"HTML5課程培訓包括以下階段的學習，時長16周培訓時間。
第一階段
移動前端製作基礎
（HTML5+CSS3基礎）
學時3周。

第二階段
移動前端交互
（js+JQ+Ajax）
學時5周。

第三階段
移動前端綜合開發
（H5+C3+jQ Mobile ）
學時5周。

第四階段
項目實訓
1、真實項目模擬
2、完整項目的整體流程實施過程
3、無縫鏈接輕松過渡到崗
學時5周。
Ios和Android先難後易，HTML5先易後難，起步學還是簡單的。

B. 有什麼前端框架自帶h5端日期時間控制項的

WijmoJS 前端開發工具包在2018 V3 中推出了日歷選擇器控制項，WijmoJS 在 Calendar 和 InputDate 控制項中添加了一個小但有用的功能。您現在可以單擊年份標題打開日歷選擇器，這樣您就可以更輕松地跳轉到不同的年份。這個小小的改進可以在選擇日期時為最終用戶節省一些時間。網頁鏈接

網頁鏈接

C. Web前端開發主要學哪些課程

老實說，前端經過這幾年的快速發展，網上的文章和教程還是蠻多的，有經驗的人能夠根據資料制定出屬於自己的學習方法和路徑，但對於小白來說，還是有些難度。知了姐來給大家分享前端學習路徑。針對0基礎，非科班，沒有編程經驗，想學前端，但是不知道如何入門的人群。

基礎部分：

1、HTML + CSS 這部分學習，可以模仿一些網站做些頁面，在實踐中積累經驗。做到能與UI對接，能100%重構網站靜態頁面的開發，為後期編寫頁面邏輯、動態效果打基礎。

2、Javascript 要學的內容實在很多，如果沒有其他編程語言的基礎的話，學起來可能要費些力，這個階段需要掌握編程基礎概念，培養邏輯思維能力。能夠獨立完成網站的頁面開發（包括合理布局，JavaScript操作DOM）

D. H5前端學習內容有哪些

學習內容：

第一階段：Web網頁基礎

HTML入門基本內容，CSS+DIV的基礎知識，選擇器，盒子模型，網頁布局，Photoshop

第二階段：Web編程基礎

學習路線：JavaScript基礎，BOM和DOM模型，事件處理，jQuery，交互及動畫，jQuery優質插件，文檔處理，數組和對象操作

第三階段：Web編程高級及全棧開發

學習路線：JavaScript高級編程，原型模式，jQuery插件開發，模塊化組件開，AJAX，Express(Node.js)，Mongodb，RequireJS，MongoDB

第四階段：響應式網站開發

學習路線：HTML5/CSS3，響應式原理及布局，Bootstrap，前端依賴管理，CSS預處理語言（Less+Sass），Grunt/Gulp自動化構建工具，Angular4

第五階段：框架與項目管理

學習路線：Grunt/Gulp，Webpack模塊載入器&打包工具，MVC（backbone）架構前端，VUE2，React

第六階段：混合式移動及微信開發

學習路線：React Native，微信小程序，視圖層，邏輯層

E. 物理學的 H5 應用：模擬慣性滑動

在移動端 H5 中，時間選擇器（ date-picker ）、省市區選擇器（ area-picker ）等組件經常會使用這樣的交互效果：

這個 gif 是在【微信錢包 - 賬單】中錄制的 ios 原生時間選擇器。可見， 當用戶手指在選擇器上先是滑動再從屏幕上移開，內容會繼續保持一段時間的滾動效果，並且滾動的速度和持續的時間是與滑動手勢的強烈程度成正比。 這種交互思路源於 ios 系統原生元素的滾動回彈（ momentum-based scrolling ），來看 H5 的一個普通列表在 ios 上的滾動表現：

社區上大部分的移動端組件庫的選擇器組件都採取了這種交互方式，看看效果：

weui 的選擇器實現了慣性滑動，但滑動動畫結束得有稿掘點突兀，效果一般。

vant 的選擇器壓根沒有做慣性滑動，當手指從屏幕上移開後，選擇器的滑動會立刻停止。可見這樣的交互體驗是比較差的。

接下來我會從設計層面剖析和模擬慣性滑動的交互效果。

不難想像，慣性滑動非常貼合現實生活中的一些場景，如汽車剎車等。除此之外，與物理力學中的滑塊模型也十分相似，由此我會參考滑塊模型來剖析慣性滑動的全過程。

慣性 來源於物理學中的慣性定律（即 牛頓第一定律 ）：一切物體在沒有受到力的作用的時候，運動狀態不會發生改變，物體所擁有的這種性質就被稱為慣性。我們不妨把慣性滑動模擬成滑動滑塊然後釋放的過程（以下討論中用戶滑動的目標皆模擬成 滑塊 ），主要劃分為兩個階段：

描述滑塊的慣性滑動，首先需要求出滑動的距離。在上述二階段中，滑塊受摩擦力 作 勻減速直線運動 。假設滑動距離為 ，初速度為 ，末速度為 。根據位移公式

加速度公式

可以仔昌算出慣性滑動距離

由於勻減速運動的加速度為負，不妨設一個加速度常量 ，使其滿足 ，那麼

這里 為正數。也就是說，我們只需要求出初始速度即可。

關注第一個階段，假設用戶滑動滑塊的距離為 ，滑動的持續時間是 ，那麼二階段的初速度 可以根據位移公式求得

綜上，求慣性滑動的距離我們需要記錄用戶滑動滑塊的 距離 和 持續時間 ，並設置一個合理的 加速度常量 。念敬扒

注意，這里的距離和持續時間並不是用戶滑動滑塊的總距離和時長，而是觸發慣性滑動范圍內的距離和時長，詳見【慣性滑動的啟動條件】。

針對二階段的勻減速直線運動，時間段 產生的位移差 ，其中 。也就是說時間越往後，同等時間間距下通過的位移越來越小，也就是動畫的推進速度越來越慢。

這與 CSS3 transition-timing-function 中的 ease-out 速度曲線相吻合， ease-out （即 cubic-bezier(0, 0, .58, 1) ）的貝塞爾曲線為

上圖來自 在線繪制貝塞爾曲線網站 。圖表中的縱坐標是指 動畫推進的進程 ；橫坐標是指 時間 ；原點坐標為 (0, 0) ，終點坐標為 (1, 1) ，假設動畫持續時間為2秒， (1, 1) 坐標點則代表離動畫開始2秒時動畫執行完畢（100%）。根據圖表可以得出，時間越往後動畫進程的推進速度越慢，符合勻減速直線運動的特性。

然而這樣的速度曲線過於線性平滑，減速效果不明顯。我們基於 ios 滾動回彈的效果，調整貝塞爾曲線的參數為 cubic-bezier(.17, .89, .45, 1) 。

滑塊滑動不是無邊界的，我們來考慮這樣的場景：當滑塊向下滑動，其頂部正要接觸容器上邊界時速度還沒有降到 ，此時如果讓滑塊瞬間停止運動，這樣的交互效果是不理想的。

我們可以把上邊界想像成一條與滑塊緊密貼合的固定彈簧， 當滑塊到達臨界點而速度還沒有降到 時，滑塊會繼續滑動並拉動彈簧使其往下形變，同時會受到彈簧的反拉力作減速運動（動能轉化為內能）；當滑塊速度降為 ，此時彈簧的形變數最大，由於彈性特質彈簧會恢復原狀（內能轉化成動能），從而拉動滑塊反向運動 。

回彈過程也可以分為兩個階段：

根據上述分析，回彈的第一階段作加速度越來越大的變減速直線運動，設此階段的初速度為 ，可以與 建立以下關系

那麼回彈距離為

微積分都來了，簡直沒法算好吧…

我們可以根據運動模型來簡化 的計算，由於該階段的加速度大於 非回彈慣性滑動 的加速度，設 非回彈慣性滑動 的總距離為 ，那麼

所以可以設置一個合理的常量 ，使其滿足

整個觸發回彈的慣性滑動模型包括三個運動階段：

然而把 階段a 和 階段b 描繪成 CSS 動畫是有一定復雜度和風險的：

出於簡化的考慮，可以將 階段a、b 合並為一個運動階段：

對於合並後的 階段a 末段，由於反向加速度越來越大，因此滑塊減速的效率會比 非回彈慣性滑動 同期更大，對應的貝塞爾曲線末段也會更陡，參數調整為 cubic-bezier(.25, .46, .45, .94) 。

在 階段b 中，滑塊先變加速後變減速，嘗試 ease-in-out 的動畫曲線：

可以看出，由於 階段b 初始的 ease-in 曲線使 階段a、b 的銜接段稍有停留，效果體驗一般。所以我們選擇只描繪變減速運動這一段，調整貝塞爾曲線為 cubic-bezier(.165, .84, .44, 1) 。

一次慣性滑動可能會出現兩種情況：

慣性滑動的啟動需要有足夠的動量。我們可以簡單地認為，當用戶滑動的距離足夠大（大於 15px ）和持續時間足夠短（小於 300ms ）時，即可產生慣性滑動。也就是說，最後一次 touchmove 事件觸發的時間和 touchend 事件觸發的時間間隔小於 300ms ，且兩者產生的距離差大於 15px 時認為啟動慣性滑動。

當慣性滑動未結束（包括處於回彈過程），用戶再次觸碰滑塊時會暫停滑塊的運動。原理上是通過 getComputedStyle 和 getPropertyValue 方法獲取當前的 transform: matrix() 矩陣值，抽離出水平 y 軸偏移量後重新調整 translate 的位置。

demo 基於 vuejs 實現，預覽地址： https://codepen.io/JunreyCen/pen/arRYem