仿仿滴滴时间控制选择器(前端-移动端)

最新推荐文章于 2024-04-22 09:36:38 发布

置顶

Hao-Z-Y

最新推荐文章于 2024-04-22 09:36:38 发布

阅读量2.2k

点赞数

分类专栏：插件文章标签：仿滴滴出行时间选择器滴滴打车时间选择器移动端时间可控制

本文链接：https://blog.csdn.net/weixin_41634608/article/details/84306952

版权

本文介绍了如何在前端移动端创建一个仿照滴滴出行应用的时间选择器。通过HTML、CSS和JavaScript实现，允许用户精确控制选择时间。

摘要由CSDN通过智能技术生成

效果

HTML

<body>
	<div class="time-box">
		<div>
			<span class="time_span1">上门时间：</span>
			<input type="text" id="time" readonly placeholder="请选择上门时间" />
		</div>
	</div>
	<div class="time-controller">
		<div class="time-controller-all">
			<div class="time-controller-choice border-bottom">
				<span class="cancel">取消</span>
				<span class="sure">确定</span>
				<h1 class="time-controller-top">选择时间</h1>
			</div>
			<div class="time-controller-content">
				<div class="time-package-top border-bottom"></div>
				<div class="time-package-bottom border-top"></div>
				<div class="time-package">
					<div class="time">
						<ul class="time-list diff">
						</ul>
					</div>
					<div class="time">
						<ul class="time-list">
						</ul>
					</div>
					<div class="time">
						<ul class="time-list">
						</ul>
					</div>
				</div>
			</div>
			<div class="time-controller-bottom"></div>
		</div>
	</div>
</body>

CSS

<style>
	.time-box {
		border: 1px solid #F2F2F2;
		margin-left: 10px;
		height: 70px;
	}

	.time-box>div {
		width: 100%;
		padding-top: 27px;
	}

	.time_span1 {
		margin-left: 10px;
	}

	.time-box input {
		border: 0px;
		outline:none;
		cursor: pointer;
		width: 45%;
		margin-left: 22px;
	}
	
	.time-controller {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		width: 100%;
		height: 100%;
		overflow: hidden;
		text-align: center;
		font-size: 14px;
		background-color: rgba(37, 38, 45, .4);
	}

	.time-controller .time-controller-all {
		position: absolute;
		z-index: 600;
		bottom: 0;
		width: 100%;
		height: 273px;
		background: #fff;
	}

	.time-controller .time-controller-all .time-controller-choice {
		position: relative;
		height: 60px;
		color: #999;
	}

	.time-controller .time-controller-all .time-controller-content {
		position: relative;
		top: 20px;
		height: 173px;
	}

	.border-bottom,
	.border-top {
		position: relative;
	}

	.border-bottom:after,
	.border-bottom:before,
	.border-top:after,
	.border-top:before {
		content: "";
		display: block;
		position: absolute;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}

	.border-bottom:after {
		border-bottom: 1px solid #ebebeb;
		left: 0;
		bottom: 0;
		width: 100%;
		-webkit-transform-origin: 0 bottom;

最低0.47元/天解锁文章

Hao-Z-Y

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
仿仿滴滴时间控制选择器(前端-移动端)

效果 HTML&lt;body&gt; &lt;div class="time-box"&gt; &lt;div&gt; &lt;span class="time_span1"&gt;上门时间：&lt;/span&gt; &lt;input type="text" id="time" readonly
复制链接

扫一扫