1

我正在使用 html、css、js 制作标尺刻度，其长度应该始终是固定的。在任何两个条之间单击刻度时，将生成一个提示，然后用户将输入一个表示否的数字。比例长度（在任何两个条之间）将被分成相等的部分并显示在上面的部分。

例如，如果最初的比例是|_____|_____|_____|，那么在点击第二条并输入除以 2 时，比例应该看起来像|_____|__|__|_____|

我参考了以下链接来制作标尺：

如何在 HTML 和 CSS 中制作标尺

但是在上面链接中给出的答案中，用户必须手动更改“data-items”属性的值，以做出不同的否。每次不同的时间段，而且，在改变它的值时，规模的整体大小也会增加，这与我的情况相矛盾。

这是我到目前为止编写的代码，我真的不知道如何在不改变总长度的情况下拆分用户输入的任何条。

https://jsfiddle.net/yoshi2095/pvjhLggz/9/

HTML：

<div>
<a href="#" onclick="inputNumber()"><ul class="ruler" data-items="10"></ul></a>         
</div>

CSS：

 .ruler, .ruler li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
/* IE6-7 Fix */
.ruler, .ruler li {
*display: inline;
}
.ruler {
background: lightYellow;
box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset;
border-radius: 2px;
border: 1px solid #ccc;
color: #ccc;
margin: 0;
height: 3em;
padding-right: 1cm;
white-space: nowrap;
}
.ruler li {
padding-left: 1cm;
width: 2em;
margin: .64em -1em -.64em;
text-align: center;
position: relative;
text-shadow: 1px 1px hsl(60, 60%, 84%);
}
.ruler li:before {
content: '';
position: absolute;
border-left: 1px solid #ccc;
height: .64em;
top: -.64em;
right: 1em;
}

/* Make me pretty! */
body {
font: 12px Ubuntu, Arial, sans-serif;
margin: 20px;
}

div {
margin-top: 2em;
}

JS：

function inputNumber() {

            var inputNum = prompt("Divide by");
            $("a").attr("data-items",inputNum);
        }


$(function() {
// Build "dynamic" rulers by adding items
$(".ruler[data-items]").each(function() {
    var ruler = $(this).empty(),
        len = Number(ruler.attr("data-items")) || 0,
        item = $(document.createElement("li")),
        i;
    for (i = 0; i < len; i++) {
        ruler.append(item.clone().text(i + 1));
    }
  });
});

任何帮助将不胜感激。谢谢。

4

0 回答 0