Question

我有这个程序，你可以输入一个数字，它将从0开始计数直到你指定的数字，我设法让它从0到12水平对齐，然后从一个新行开始。

然而我想要的是它垂直命令0 - 9然后它在0旁边开始一个新行并从10到19计数并继续前进直到达到指定值。

 function action() {
   document.getElementById("container").innerHTML = "";
   var hoogste = document.getElementById("getallen").value;
   var count = 0;
   for (var i = 0; i < hoogste; i++) {
     document.getElementById("container").innerHTML += i + " ";
   }
 }

#container {
  overflow: scroll;
  height: 200px;
  width: 200px;
}

<input type="number" id="getallen">
<br>
<input type="button" onclick="action()" value="Submit">
<div id="container"></div>

Answer 1

我认为这就是你正在寻找的......你的问题对我来说不太清楚，所以我希望这对你来说是正确的。

＆＃13;

function action() {
var hoogste = document.getElementById("getallen").value;
var output="";
 for (var i = 0; i<hoogste; i++) {
  if(i>0&&(i % 10)==0){
// i is more than 0 and every 10(TH)
   output+="<br/>"+i+" ";
  }else{
     output+=i+" ";
  }
 }
document.getElementById("container").innerHTML=output;
}

＆＃13;

<input type="number" id="getallen"><br>
<input type="button" onclick="action()" value="Submit">
<div id="container"></div>

＆＃13;

如果您对上述源代码有任何疑问，请在下面留言，我会尽快给您回复。

我希望这会有所帮助。快乐的编码！

Answer 2

您可以使用CSS中的writing-mode和text-orientation来实现此目的：

＆＃13;

function action() {
    var container = document.getElementById('container');
    var hoogste = document.getElementById("getallen").value;
    container.innerHTML = '';

    for (var i = 0; i < hoogste; i++) {

        if (i < 10) {
   	        var nextSpan = '<span>' + i + '</span>';
   	    }

   	    else {
   	        var nextSpan = '<span class="double-digit">' + i + '</span>';
   	    }

        container.innerHTML += nextSpan;
    }
}

＆＃13;

body {
font-size: 24px;
}

input {
width: 100px;
}

#container {
margin-top: 1em;
height: 14em;
width: 14em;
font-size: 1em;
writing-mode: vertical-lr;
text-orientation: upright;
vertical-align: top;
}

#container span {
display: inline-block;
width: 1em;
height: 1em;
padding: 0.2em;
}

.double-digit {
position: relative;
top: -0.15em;
writing-mode: horizontal-tb;
}

＆＃13;

<input type="number" id="getallen">
<br>
<input type="button" onclick="action()" value="Submit">
<div id="container"></div>

＆＃13;

Answer 3

我在循环中添加了<br>而不是空格，在#container中我添加了columns: 10px;并且它有效！：）

特别感谢@Pete

滚动条内的中心数字垂直

3 个答案: