仿苹果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