1

長さが常に固定されているはずのhtml、css、jsを使用して定規スケールを作成しています。スケールをクリックすると、任意の 2 つのバーの間でプロンプトが生成され、ユーザーは No を表す数字を入力します。スケールの長さ (任意の 2 つの棒の間) が等分されて表示されるセクションの数。

たとえば、最初のスケールが の場合|_____|_____|_____|、2 番目のバーをクリックして 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