jquery实现手机端移动端预约时间段选择效果代码
代码语言：html
所属分类：选择器
代码描述：jquery实现手机端移动端预约时间段选择效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
<style>
.office {
margin: 0 auto;
background: #f7f7f7;
}
.office .office-time {
padding: 15px;
background: #fff;
margin-top: 15px;
}
.office .office-time h4 {
font-size: 16px;
color: #010101;
margin-bottom: 10px;
}
.office .office-time p {
font-size: 14px;
color: #7f7f7f;
margin-bottom: 15px;
}
.office-time-legend {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 15px 0;
}
.office-time-legend .office-time-legend-item {
display: flex;
}
.office-time-legend .legend-img {
width: 19px;
height: 19px;
border-radius: 3px;
border: 1px solid #ddd;
margin-right: 5px;
}
.office-time-legend .legend-img.used {
background: #fff;
}
.office-time-legend .legend-img.disabled {
background: #d7d7d7;
}
.office-time-legend .legend-img.checked {
background: #7ed320;
}
.office-time-legend .legend-text {
font-size: 14px;
color: #010101;
}
.office .office-time-con.office-time-slot {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.office .office-time-con.office-time-slot .office-time-item {
font-size: 14px;
margin-bottom: 10px;
margin-right: 10px;
cursor: pointer;
}
.office .office-time-con .office-time-item {
width: 53px;
height: 53px;
border: 1px solid #ddd;
border-radius: 6px;
text-align: center;
line-height: 53px;
color: #010101;
}
.office .office-time-con.office-time-slot .office-time-item.checked {
color: #010101;
background: #7ed320;
}
.office .office-time-con.office-time-slot .office-time-item.disable {
color: #010101;
background: #d7d7d7;
}
.weui-btn-area {
margin: 0.5em 15px 1.17em;
}
.weui-btn {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
padding-left: 14px;
padding-right: 14px;
box-sizing: border-box;
font-size: 18px;
text-align: center;
text-decoration: none;
color: #fff;
line-height: 2.55555556;
border-radius: 5px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
overflow: hidden;
}
.weui-btn_main {
background-color: #38acff;
margin: 20px 0 50px;
}
.office .office-time-con.office-time-data {
overflow-x: scroll;
display: -webkit-box;
-webkit-overflow-scrolling: touch;
}
.office-time-data::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
.office .office-time-con.office-time-data .office-time-item {
margin-right: 10px;
cursor: pointer;
}
.office .office-time-con.office-time-data .office-time-item.checked {
border: 1px solid #38adfd;
color: #38adfd;
background: #f2f9ff;
}
.office .office-time-con.office-time-data .office-time-item span {
font-size: 12px;
color: #999;
display: inline-block;
margin-top: 8px;
}
.office .office-time-con.office-time-data .office-time-item.checked span {
color: #38adfd;
}
.office .office-time-con.office-time-slot .office-time-item:nth-child(6n+0) {
margin-right: 0;
}
.office .office-time-con.office-time-data .office-time-item {
font-size: 13px;
line-height: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
</head>
<body>
<div class="office">
<!--预约时间-->
<div class="weui-panel">
<div class="office-time">
<h4>请选择预约日期</h4>
<p>
只可提前预约最近5天
</p>
<div class="office-time-con office-time-data">
<div class="checked office-time-item date_" val="2019-12-01">
今天<span>12月01日</span>
</div>
<div class="office-time-item date_" val="2019-12-02">
星期一<span>12月02日</span>
</div>
<div class="office-time-item date_" val="2019-12-03">
星期二<span>12月03日</span>
</div>
<div class="office-time-item date_" val="2019-12-04">
星期三<span>12月04日</span>
</div>
<div class="office-time-item date_" val="2019-12-05">
星期四<span>12月05日</span>
</div>
<div class="office-time-item date_" val="2019-12-06">
星期五<span>12月06日</span>
</div>
<div class="office-time-item date_" val="2019-12-07">
星期六<span>12月07日</span>
</div>
<div class="office-time-item date_" val="2019-12-08">
星期天<span>12月08日</span>
</div>
<div class="office-time-item date_" val="2019-12-09">
星期一<span>12月09日</span>
</div>
</div>
</div>
</div>
<!--预约时段-->
<div class="weui-panel">
<div class="office-time">
<h4>请选择预约时段</h4>
<p>
每个数字代表一个时段，例如9点表示9:00:00~9:59:59
</p>
<div class="office-time-legend">
<div class="office-time-legend-item">
<div class="legend-img used"></div>
<div class="legend-text">
可选
</div>
</div>
<div class="office-time-legend-item">
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0