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: #5.........完整代码请登录后点击上方下载按钮下载查看