要显示1-23之间的刻度数,可以使用以下方法:
<div>
元素作为容器,并设置其样式为适当的宽度和高度。::before
或::after
来创建刻度,并设置其样式,如宽度、高度、背景颜色、位置等。position: absolute
和left
属性来确定刻度的位置。for
循环)生成1-23之间的刻度数,并将其添加到刻度容器中。以下是一个示例代码:
HTML:
<div class="scale-container"></div>
CSS:
.scale-container {
width: 100%;
height: 20px;
background-color: #f2f2f2;
border: 1px solid #ccc;
position: relative;
}
.scale-container::before {
content: "";
width: 1px;
height: 10px;
background-color: #000;
position: absolute;
top: 5px;
}
.scale-container span {
position: absolute;
top: 15px;
font-size: 12px;
}
JavaScript:
var scaleContainer = document.querySelector(".scale-container");
for (var i = 1; i <= 23; i++) {
var scale = document.createElement("span");
scale.textContent = i;
scale.style.left = (i / 23) * 100 + "%";
scaleContainer.appendChild(scale);
}
这样,就可以在页面上显示1-23之间的刻度数。你可以根据需要调整样式和布局。
领取专属 10元无门槛券
手把手带您无忧上云