手把手教你写Js日期时间选择器(2)-样式实现

上一节为大家分析了一下日期时间选择器的基本组成结构;
这一节主要讲解样式实现.

准备工作

1. 首先来确定一下各个部分的大小,主要是高度.为了组件显示比较和谐,这里整个控件高度为200px;
2. 选择项的高度为40px;

示意图:

大家可以根据需要自行调整.

开始撸码

1. 新建工程,作者是采用WebStorm进行开发(前端神器),具体创建过程就不详述了.应该都会.
2. 新建一个HTML文件.

接下来按照前面介绍的组件结构写几个div.

    <div class="最外层">
    <div class="中间横线">div>
    <div class="滑动列表1">
        <ul>
            <li>li>
        ul>
    div>
    <div class="滑动列表2">
        <ul>
            <li>li>
        ul>
    div>
div>

样式实现

先指定最外层div样式:

 .wrap {
          width: 100%;
          height: 200px;
          background: #fff;
          position: relative;
          text-align: center
       }

用chrome预览一下:

发现有边距,把边距去掉;

 * {
      margin: 0; 
      padding: 0;
   }

再实现中间横线部分的样式:

        .wrap .line {
            height: 40px;
            border-top: 1px solid #D6DDE7;
            border-bottom: 1px solid #D6DDE7;
            width: 100%;
            position: absolute;
            top: 40%
        }

实现中间选中部分的样式后就可以大致看出一点模样了;

接下来实现滑动列表的样式:

        .wrap .item {
            margin: 0;
            padding: 0 3%;
            display: inline-block;
            vertical-align: top;
            text-align: center;
            overflow: hidden;
            height: 200px;
        }

        .wrap .item ul {
            list-style: none;
            margin: 0;
            padding: 0;
            text-align: center;
            min-height: 120px;
            width: 80px;
            overflow: hidden;
        }

        .wrap .item ul li {
            height: 40px;
            line-height: 40px;
            color: #898c90;
            font-size: 15px
        }

        .wrap .item ul li.selected {
            color: #292a2b;
            font-size: 17px
        }

现在整个控件就有模有样了,看图.

字体不好看,换一个.

body {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #000;
    font-size: 14px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    overflow-y: auto
}

好了,控件的样式实现就完成了.
大家可以根据需要再自行调整.

结语

现在我们的控件还不能滑动,只有一个基本的样式,但是也可以装个逼哒,下一节为大家讲解如何让控件滑动起来;敬请期待.

---

修改增加item高度200px.