js html 时间控件源码 [未完成] 

<!DOCTYPE html>
<html>

<head>
    <style>
        /*字体*/
        @font-face {
            font-family: 'Chinese Quote';
            src: local('PingFang SC'), local('SimSun');
            unicode-range: U+2018, U+2019, U+201c, U+201d;
        }

        #my_time {
            /*调用字体*/
            font-family: Arial, 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Sans Serif', sans-serif;
            width: 278px;
            background-color: #fff;
            border-radius: 4px;
            /*阴影边框 + 圆角*/
            -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            position: relative;
        }

        #my_time:hover {
            box-shadow: 0 2px 8px #1890ff;
        }

        /*时间头*/
        #my_time .time_head {
            border-bottom: 1px solid #e8e8e8;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        /*鼠标手形*/
        #my_time .time_head a {
            cursor: pointer;
        }

        /*鼠标放上*/
        #my_time .time_head a:hover {
            color: #40a9ff;
        }

        /* 上一年，上一月 */
        #my_time .syn:after {
            content: '\AB';
        }

        #my_time .xyn:after {
            content: '\BB';
        }

        #my_time .syy:after {
            content: '\2039';
        }

        #my_time .xyy:after {
            content: '\203A';
        }

        #my_time .syn,
        #my_time .xyn,
        #my_time .syy,
        #my_time .xyy {
            position: absolute;
        }

        #my_time .syn {
            left: 7px;
        }

        #my_time .xyn {
            right: 7px;
        }

        #my_time .syy {
            left: 29px;
        }

        #my_time .xyy {
            right: 29px;
        }

        #my_time .time_head span a {
            padding: 0 2px;
        }

        /*时间体*/

        #my_time .time_body th {
            line-height: 18px;
            width: 33px;
            padding: 6px 0;
            text-align: center;
            color: rgba(0, 0, 0, 0.65);
        }

        #my_time .time_body td {
            line-height: 18px;
            width: 33px;
            padding: 6px 0;
            text-align: center;
        }

        #my_time .time_body .No_Include {
            color: rgba(0, 0, 0, 0.25);
        }


        #my_time .time_body td div {
            width: 24px;
            height: 24px;
            line-height: 22px;
        }

        #my_time .time_body td div:hover {
            background: #e6f7ff;
            cursor: pointer;
        }

        #my_time .time_body {
            padding: 8px 12px;
            border-bottom: 1px solid #e8e8e8;
        }

        /*
        底部
        */
        .time_footer {
            border-top: 1px solid #e8e8e8;
            line-height: 38px;
            padding: 0 12px;
            position: relative;
        }

        #my_time .time_footer .btn {
            display: inline-block;
            cursor: pointer;
            border: 1px solid transparent;
            background-color: #1890ff;
            border-color: #1890ff;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
            box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
            padding: 0 7px;
            font-size: 14px;
            border-radius: 4px;
            height: 24px;
            line-height: 22px;
            color: #fff;
        }

        /*此刻*/
        #my_time .time_footer .ck {
            color: #1890ff;
            cursor: pointer;
        }

        /*选择时间*/
        #my_time .time_footer .xzsj {
            position: absolute;
            right: 80px;
            color: #1890ff;
            cursor: pointer;
        }

        #my_time .time_footer .ck:hover,
        #my_time .time_footer .xzsj:hover {
            color: #40a9ff;
        }

        /*确认*/
        #my_time .time_footer .qr {
            position: absolute;
            right: 10px;
            top: 15%;
            cursor: pointer;
        }

        #my_time .time_footer .qr:hover {
            color: #fff;
            background-color: #40a9ff;
            border-color: #40a9ff;
        }



        /*选中*/
        #my_time .time_footer .xz {
            background: #1890ff;
            color: #fff;
        }

        /*历史*/
        #my_time .time_footer .ls {
            border-color: #1890ff;
            font-weight: bold;
            color: #1890ff;
            border: 1px solid;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" value="2020 2020 2020">
    </div>
    <div id="my_time">
        <div>
            <div class="time_head">
                <a title="上一年" class="syn"></a>
                <a title="上个月" class="syy"></a>
                <sapn>
                    <a title="选择年份">2020年</a>
                    <a title="选择月份">3月</a>
                </sapn>
                <a title="下个月" class="xyy"></a>
                <a title="下一年" class="xyn"></a>
            </div>
            <div class="time_body">
                <table>
                    <tr>
                        <th title="周一">
                            <span>一</span>
                        </th>
                        <th title="周二">
                            <span>二</span>
                        </th>
                        <th title="周三">
                            <span>三</span>
                        </th>
                        <th title="周四">
                            <span>四</span>
                        </th>
                        <th title="周五">
                            <span>五</span>
                        </th>
                        <th title="周六">
                            <span>六</span>
                        </th>
                        <th title="周日">
                            <span>日</span>
                        </th>
                    </tr>

                    <tr role="row" class="">
                        <td title="2020年2月24日" class="">
                            <div class="No_Include">24</div>
                        </td>
                        <td title="2020年2月25日" class="">
                            <div class="No_Include">25</div>
                        </td>
                        <td title="2020年2月26日" class="">
                            <div class="No_Include">26</div>
                        </td>
                        <td title="2020年2月27日" class="">
                            <div class="No_Include">27</div>
                        </td>
                        <td title="2020年2月28日" class="">
                            <div class="No_Include">28</div>
                        </td>
                        <td title="2020年2月29日" class="">
                            <div class="No_Include">29</div>
                        </td>
                        <td title="2020年3月1日" class="">
                            <div class="xz">1</div>
                        </td>
                    </tr>
                    <tr role="row" class="">
                        <td title="2020年3月2日" class="ant-calendar-cell">
                            <div class="ls">2</div>
                        </td>
                        <td title="2020年3月3日" class="ant-calendar-cell">
                            <div class="">3</div>
                        </td>
                        <td title="2020年3月4日" class="ant-calendar-cell">
                            <div class="">4</div>
                        </td>
                        <td title="2020年3月5日" class="ant-calendar-cell">
                            <div class="">5</div>
                        </td>
                        <td title="2020年3月6日" class="ant-calendar-cell">
                            <div class="">6</div>
                        </td>
                        <td title="2020年3月7日" class="ant-calendar-cell">
                            <div class="">7</div>
                        </td>
                        <td title="2020年3月8日" class="ant-calendar-cell">
                            <div class="">8</div>
                        </td>
                    </tr>
                    <tr role="row" class="">
                        <td title="2020年3月9日" class="ant-calendar-cell">
                            <div class="">9</div>
                        </td>
                        <td title="2020年3月10日" class="ant-calendar-cell">
                            <div class="">10</div>
                        </td>
                        <td title="2020年3月11日" class="ant-calendar-cell">
                            <div class="">11</div>
                        </td>
                        <td title="2020年3月12日" class="ant-calendar-cell">
                            <div class="">12</div>
                        </td>
                        <td title="2020年3月13日" class="ant-calendar-cell">
                            <div class="">13</div>
                        </td>
                        <td title="2020年3月14日" class="ant-calendar-cell">
                            <div class="">14</div>
                        </td>
                        <td title="2020年3月15日" class="ant-calendar-cell">
                            <div class="">15</div>
                        </td>
                    </tr>
                    <tr role="row" class="">
                        <td title="2020年3月16日" class="ant-calendar-cell">
                            <div class="">16</div>
                        </td>
                        <td title="2020年3月17日" class="ant-calendar-cell">
                            <div class="">17</div>
                        </td>
                        <td title="2020年3月18日" class="ant-calendar-cell">
                            <div class="">18</div>
                        </td>
                        <td title="2020年3月19日" class="ant-calendar-cell">
                            <div class="">19</div>
                        </td>
                        <td title="2020年3月20日" class="ant-calendar-cell">
                            <div class="">20</div>
                        </td>
                        <td title="2020年3月21日" class="ant-calendar-cell">
                            <div class="">21</div>
                        </td>
                        <td title="2020年3月22日" class="ant-calendar-cell">
                            <div class="">22</div>
                        </td>
                    </tr>
                    <tr role="row" class="ant-calendar-current-week ant-calendar-active-week">
                        <td title="2020年3月23日" class="ant-calendar-cell">
                            <div class="">23</div>
                        </td>
                        <td title="2020年3月24日"
                            class="ant-calendar-cell ant-calendar-today ant-calendar-selected-date ant-calendar-selected-day">
                            <div aria-selected="true" class="">24</div>
                        </td>
                        <td title="2020年3月25日" class="ant-calendar-cell">
                            <div class="">25</div>
                        </td>
                        <td title="2020年3月26日" class="ant-calendar-cell">
                            <div class="">26</div>
                        </td>
                        <td title="2020年3月27日" class="ant-calendar-cell">
                            <div class="">27</div>
                        </td>
                        <td title="2020年3月28日" class="ant-calendar-cell">
                            <div class="">28</div>
                        </td>
                        <td title="2020年3月29日" class="ant-calendar-cell">
                            <div class="">29</div>
                        </td>
                    </tr>
                    <tr role="row" class="">
                        <td title="2020年3月30日" class="ant-calendar-cell">
                            <div class="">30</div>
                        </td>
                        <td title="2020年3月31日" class="ant-calendar-cell ant-calendar-last-day-of-month">
                            <div class="">31</div>
                        </td>
                        <td title="2020年4月1日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
                            <div class="">1</div>
                        </td>
                        <td title="2020年4月2日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
                            <div class="">2</div>
                        </td>
                        <td title="2020年4月3日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
                            <div class="">3</div>
                        </td>
                        <td title="2020年4月4日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
                            <div class="">4</div>
                        </td>
                        <td title="2020年4月5日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
                            <div class="">5</div>
                        </td>
                    </tr>

                </table>
            </div>
            <div class="time_footer">
                <span class="">
                    <a title="2020年3月24日" class="ck">此刻</a>
                    <a class="xzsj">选择时间</a>
                    <a class="btn qr">确 定</a>
                </span>
                <i></i>
            </div>
        </div>
    </div>
</body>

</html>

 

posted @ 2020-03-24 17:51  enych  阅读(376)  评论(0)  编辑  收藏  举报