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

最新推荐文章于 2025-06-30 20:49:31 发布

原创最新推荐文章于 2025-06-30 20:49:31 发布 · 8.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #日期时间选择器 #日期选择器 #Javascript

Javascript 同时被 2 个专栏收录

3 篇文章

订阅专栏

自定义js控件

3 篇文章

订阅专栏

本文详细介绍了一个日期时间选择器的样式实现过程，包括控件高度、选择项高度的设定，以及各部分如中间横线、滑动列表的具体样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

准备工作

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

示意图:

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

开始撸码

新建工程,作者是采用WebStorm进行开发(前端神器),具体创建过程就不详述了.应该都会.
新建一个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预览一下:

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
}