应用CSS时，请查看文本的顶部：“溢出：隐藏；”

Question

我正在尝试使用以下元素创建时间选择器：

• 向上按钮显示小时和时间；
• 下一次显示两个，一个显示下一个小时，另一个显示下一个分钟；
• 两个显示当前时间，一个显示当前时间，另一个显示当前分钟；
• 前两次显示为两个，前一个小时显示为前一分钟；
• 小时和时间的向下按钮。

当您按下任意按钮时，我正在尝试创建运动的想法。

这是我到目前为止实现的视觉效果：

我不能做的事情：

• 要显示数字的上部，请在上次显示时显示。

我在做什么错，如何使用javascript，css，jquery和html修复它？

要创建我的时间选择器的视觉效果，我使用了以下代码：

$(document).ready(function() {
$("#th31").html("01");
$("#tm31").html("01");
$("#th3").html("00");
$("#tm3").html("00");
$("#th32").html("23");
$("#tm32").html("59");
} );

.modal-pop-up-time{
  background-color: WhiteSmoke   ;
  cursor:pointer;
  display:block;
  width: 200px;
  height: 150px;
  position: absolute;
  left: 52%;
  z-index:10001;
}
.flex-container{
  position: relative;
  /* Other styling stuff */
  width: 50px;
  height: 25px;
  background-color: #3498db;
}
.flex-container1{
  position: relative;
   display: inline-block;
  /* Other styling stuff */
  width: 50px;
  height: 10px;
  background-color: red;
}
.spinner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.spinner-input-wrapper {
	display: flex;
}
.spinner-input {
	margin: 0 3px;
}
.inner-element{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  height: 100%;
  transform: translate(-50%,-50%);
  /* or 3d alternative if you will add animations (smoother transitions) */
  transform: translate3d(-50%,-50%,0);
}
.triangle-up,
.triangle-down {
	width: 0;
  height: 0;
  border: 4px solid transparent;
}
.triangle-up {
	border-bottom-width: 8px;
	border-bottom-color: #555;
}
.triangle-down {
  border-top-width: 8px;
  border-top-color: #555;
}
.div-overflow-hide{
  overflow: hidden;
}
.input-line-height{
  line-height: 10% !important;
}
.input-text-center{
  text-align: center !important;
}
.input-background-color{
  background-color:  DeepSkyBlue  ;
}
.input-background-color-white{
  background-color:  white  ;
}
.input-text-color{
  color: White; 
}
.div-center-element{
	margin:auto;
}
.div-ml-40{
  margin-left: 40% !important;
}
.div-mlr-5{
  margin-right: 5% !important;
  margin-left: 5% !important;
}
.div-ml-10{
  margin-left: 10% !important;
}
.div-ml-5{
  margin-left: 20% !important;
}
.div-tiangles-background-color{
   background-color: yellow;
}

<link href="lib/noty.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div tabindex="-1" class = "modal-pop-up-time" id = "popupreg">
	<div class="spinner-input-wrapper div-ml-10">
		<div class="spinner div-mt-5">
			<label class="div-ml-5">HH</label>
			<div class="div-tiangles-background-color" tabindex="2">
				<div class="triangle-up div-ml-40" id="up4"></div>
			</div>
			<div class= "flex-container1" tabindex="1">
				<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "th31" ></div>
			</div>
			<div class= "flex-container " tabindex="2" >
				<div tabindex="2" class = "input-text-center input-background-color input-text-color inner-element" id = "th3" ></div>
			</div>
			<div class= "flex-container1" tabindex="1"> 
				<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "th32" ></div>
			</div>
			<div class="div-tiangles-background-color"  tabindex="2">
				<div class="triangle-down div-ml-40" id="down4"></div>
			</div>
		</div>
		<div class= "spinner div-mt-5">
			<label class="div-mlr-5" >:</label>
		</div>
		<div class="spinner divmarginhor div-mt-5" >
			<label class="div-ml-5" >MM</label>
			<div class="div-tiangles-background-color" tabindex="2">
				<div class="triangle-up div-ml-40" id="up5"></div>
			</div>
			<div class= "flex-container1" tabindex="1">
				<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "tm31" ></div>
			</div>
			<div class= "flex-container" tabindex="2">
				<div tabindex="2" class = "input-text-center input-background-color input-text-color inner-element" id = "tm3" ></div>
			</div >
			<div class= "flex-container1" tabindex="1">
				<div tabindex="1" class = "input-text-center input-line-height input-background-color-white inner-element div-overflow-hide" id = "tm32" ></div>
			</div>
			<div class="div-tiangles-background-color" tabindex="2">
				<div class="triangle-down div-ml-40" id="down5"></div>
			</div>
		</div>
	</div>
</div>

Answer 1

您可以使用一些绝对的位置和行高来实现所需的目标：

.timebox {
  display: inline-block;
  line-height: 2em;
  height: 4em;          /* only wants to be double the line-height */
  overflow: hidden;
  position: relative;
  width: 2em;           /* can be what you want */
}

.inner {
  height: 6em;                  /* timebox line-height multiplied by 3 (number of numbers */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.number {
  width: 2em;
  text-align: center;
}

<div class="timebox">
  <div class="inner">
    <div class="number">
      1
    </div>
    <div class="number">
      2
    </div>
    <div class="number">
      3
    </div>
  </div>
</div>
<div class="timebox">
  <div class="inner">
    <div class="number">
      21
    </div>
    <div class="number">
      22
    </div>
    <div class="number">
      23
    </div>
  </div>
</div>