jquery实现手机端移动端预约时间选择效果代码-html代码-BFW代码库

代码语言：html
所属分类：选择器
代码描述：jquery实现手机端移动端预约时间选择效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">


    <!--页面布局样式-->
    <style type="text/css">
@charset "utf-8";
        /* CSS Document */
        .am-btn {
            padding: 0
        }
        * {
            margin: 0;
            padding: 0;
        }
        body,html {
            width: 100%;
        }
        a:focus, a:hover {
            color: inherit
        }

        a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer,
        form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, dl, dt, dd, dt + dd {
            margin: 0;
            padding: 0;
            border: 0;
            font: inherit;
            vertical-align: baseline;
            word-wrap: break-word;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0
        }

        .am-form input[type=number], .am-form input[type=search], .am-form input[type=text], .am-form input[type=password], .am-form input[type=datetime], .am-form input[type=datetime-local], .am-form input[type=date], .am-form input[type=month], .am-form input[type=time], .am-form input[type=week], .am-form input[type=email], .am-form input[type=url], .am-form input[type=tel], .am-form input[type=color], .am-form select, .am-form textarea, .am-form-field, .am-btn {
            font: inherit;
        }

        [class*=am-u-] {
            padding: 0
        }

        button, input, select, textarea {
            outline: 0;
            -webkit-box-sizing: border-box
        }

        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
            display: block
        }

        li, ol, ul {
            list-style: none
        }

        blockquote, q {
            quotes: none
        }

        blockquote:after, blockquote:before, q:after, q:before {
            content: '';
            content: none
        }

        b, strong {
            font-weight: 700
        }

        img {
            max-width: 100%;
            vertical-align: middle;
            border: 0;
            -ms-interpolation-mode: bicubic;
            -webkit-touch-callout: none
        }

        .img-width100 {
            width: 100%;
        }

:focus {
            outline: 0
        }

        a {
            color: #323333;
            text-decoration: none
        }

        a.active {
            color: #06c
        }

        .clearfix:after, .clearfix:before {
            display: table;
            content: " "
        }

        .clearfix:after {
            clear: both
        }

        .pull-right {
            float: right !important
        }

        .pull-left {
            float: left !important
        }

        body {
            font-family: "Microsoft Yahei", Helvetica, STHeiTi, sans-serif;
            background-color: #f0f3f5;
            /*margin:0 auto;
    position:relative;*/
            width: 100%;
            overflow-x: hidden
        }

        input {
            outline: 0;
            -webkit-box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            -webkit-appearance: none
        }

        input:focus, textarea:focus {
            outline: 0;
        }

        .text-left {
            text-align: left
        }

        .text-center {
            text-align: center
        }

        .text-right {
            text-align: right
        }

        .vm {
            vertical-align: middle
        }

        .block {
            display: block !important
        }

        .bold {
            font-weight: 700
        }

        .touch_ui_btn {
            -webkit-appearance: none;
            -webkit-tap-highlight-color: transparent
        }

        .touch_ui_btn.active {
            background-color: #ddd;
            color: #F60
        }

        body a:hover {
            -webkit-transition: color .2s linear, background-color .3s linear;
            -moz-transition: color .2s linear, background-color .3s linear;
            -o-transition: color .2s linear, background-color .3s linear;
            -ms-transition: color .2s linear, background-color .3s linear;
            transition: color .2s linear, background-color .3s linear;
        }

        /*
.box-shadow{
box-shadow: 0 0 6px rgba(215,222,224,.5);
}
*/
        .main-con {
            padding: 0 2.666%
        }

        .main-con-left {
            padding-left: 2.666%
        }

        .margin-con-left {
            margin-left: 2.666%;
            padding-right: 2.666%;
            width: 97.334%
        }

        .margin-con-left02 {
            margin-left: 5.332%;
            padding-left: 2.666%;
            padding-right: 2.666%;
            width: 94.668%
        }

        .margin-con-left03 {
            padding-right: 2.666%;
        }

        .mt-line {
            margin-top: 0.267rem
        }

        .mt-line-block {
            height: 0.267rem;
            background: #f5f5f5
        }

        .bottom-fixed {
            position: fixed;
            bottom: 0;
            width: 100%;
            z-index: 999;
            overflow: hidden
        }

        .box-bottom {
            height: 1.567rem;
            width: 100%;
            clear: both
        }

        .box-bottom01 {
            height: 1.467rem;
            width: 100%;
            clear: both
        }

        .box-bottom02 {
            height: 2.45rem;
            width: 100%;
            clear: both
        }

        .bg-white {
            background: #fff
        }

        .border-none {
            border: none
        }

        .margin-l0 {
            margin-left: 0
        }

        .main-txt {
            padding: 0 .6rem
        }

        .txt-green {
            color: #01b38a
        }

        .txt-yellow {
            color: #c5bb67
        }

        .txt-light-yellow {
            color: #ff9921
        }

        .txt-light-gray {
            color: #afb2b2
        }

        .txt-index-yellow {
            color: #ff8f0b
        }

        .txt-gray {
            color: #646666
        }

        .txt-dark {
            color: #333
        }

        .txt-ye {
            color: #f29221
        }

        .txt-gray-green {
            color: #75b3a5
        }

        .txt-pink {
            color: #ff6e56
        }

        .bg-pink {
            background: #f17388
        }

        .bg-yellow {
            background: #ded160
        }

        .bg-blue {
            background: #42b7e8
        }

        .bg-green {
            background: #5bd2b4
        }

        .font11 {
            font-size: 11px;
        }

        .txt-zy {
            color: #ff9110
        }

        .coupon-over .txt-zy {
            color: #bababa !important
        }

        .coupon-over .txt-gray｛color:#666｝
        [data-dpr="2"] .font11 {
            font-size: 22px;
        }

        [data-dpr="3"] .font11 {
            font-size: 33px;
        }

        .font12 {
            font-size: 12px;
        }

        [data-dpr="2"] .font12 {
            font-size: 24px;
        }

        [data-dpr="3"] .font12 {
            font-size: 36px;
        }

        .font13 {
            font-size: 13px;
        }

        [data-dpr="2"] .font13 {
            font-size: 26px;
        }

        [data-dpr="3"] .font13 {
            font-size: 39px;
        }

        .font14 {
            font-size: 14px;
        }

        [data-dpr="2"] .font14 {
            font-size: 28px;
        }

        [data-dpr="3"] .font14 {
            font-size: 42px;
        }

        .font15 {
            font-size: 15px;
        }

        [data-dpr="2"] .font15 {
            font-size: 30px;
        }

        [data-dpr="3"] .font15 {
            font-size: 45px;
        }

        .font16 {
            font-size: 16px;
        }

        [data-dpr="2"] .font16 {
            font-size: 32px;
        }

        [data-dpr="3"] .font16 {
            font-size: 48px;
        }

        .font17 {
            font-size: 17px;
        }

        [data-dpr="2"] .font17 {
            font-size: 34px;
        }

        [data-dpr="3"] .font17 {
            font-size: 51px;
        }

        .font20 {
            font-size: 20px;
        }

        [data-dpr="2"] .font20 {
            font-size: 40px;
        }

        [data-dpr="3"] .font20 {
            font-size: 60px;
        }

        .font30 {
            font-size: 30px;
        }

        [data-dpr="2"] .font20 {
            font-size: 60px;
        }

        [data-dpr="3"] .font20 {
            font-size: 90px;
        }

        .padding-4 {
            padding-top: .4rem;
            padding-bottom: .4rem;
            display: block;
            clear: both;
            overflow: hidden;
            position: relative;
        }

        .padding-r4 {
            padding-right: .37rem
        }

        .font4 {
            font-size: .4rem;
            color: #afb2b2;
            position: absolute;
            top: 50%;
            right: -0.1rem;
            margin-top: -0.2rem
        }

        .am-panel {
            box-shadow: none;
            -webkit-box-shadow: none
        }

        .link-a {
            display: block;
            clear: both;
            overflow: hidden
        }

        .am-form input[type=number]:focus, .am-form input[type=search]:focus, .am-form input[type=text]:focus, .am-form input[type=password]:focus, .am-form input[type=datetime]:focus, .am-form input[type=datetime-local]:focus, .am-form input[type=date]:focus, .am-form input[type=month]:focus, .am-form input[type=time]:focus, .am-form input[type=week]:focus, .am-form input[type=email]:focus, .am-form input[type=url]:focus, .am-form input[type=tel]:focus, .am-form input[type=color]:focus, .am-form select:focus, .am-form textarea:focus, .am-form-field:focus {
            background-color: none;
            border-color: none;
            outline: 0;
            -webkit-box-shadow: none;
            box-shadow: none
        }

        .am-alert, .am-alert a {
            color: #646666
        }

        .am-tabs-bd {
            border: none
        }

        .am-btn:focus, .am-btn:hover {
            color: inherit
        }

        .bg-gray {
            background: #f7f9fa
        }

        .border-top {
            border-top: 1px solid #dedede;
        }

        .btn-bg-white {
            background: #fff;
            color: #ff9921
        }

        .btn-bg-gray {
            background: #fafafa;
            color: #cccccc
        }

        .btn-bg-green, .btn-bg-green a {
            background: #36bc9b;
            color: #fff
        }

        .btn-bg-white:focus, .btn-bg-white:hover {
            color: #ff9921
        }

        .btn-bg-gray:focus, .btn-bg-gray:hover {
            color: #cccccc
        }

        .btn-bg-green:focus, .btn-bg-green:hover {
            color: #fff
        }

        .w1-3 {
            width: 33.333333%;
            margin: 0;
            height: 1.333rem;
        }

        .mask-time {
            background: rgba(0, 0, 0, .4);
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
     .........完整代码请登录后点击上方下载按钮下载查看