手把手教你写Js日期时间选择器(1)-基本结构

最近研究了一下js的日期时间选择器;但是网上资料比较少,所以准备写一系列的文章记录一下;给大家提供思路.

项目github链接

先上最终效果图:

手把手教你写Js日期时间选择器(1)-基本结构_第1张图片

这一节为大家分析一下控件的基本布局结构.

基本结构

首先分析一下选择器的布局结构.

手把手教你写Js日期时间选择器(1)-基本结构_第2张图片

如上图所示:
1. 中间的选中区域由是一个div,加上上边框和下边框;
2. 选择列表区域是一个ul列表;
3. 最外层由一个div包裹中间的内容.

下一节将带来样式实现,敬请期待.

你可能感兴趣的:(Javascript,自定义js控件)