Javascript 我怎样才能把一个数字放在另一个数字的前面，就像一个LCD时钟一样？

我正在生成一个lcd时钟样式的数字

我想知道怎样才能把一个号码放在另一个号码前面。例如，我想展示123

但我不知道怎么做。多谢各位

 <div id="preformatted">

 </div>

 <div class="number-entry-pane">
 <label>Enter a digit:
 <input type="number" id="numInput" min=0 max=9 /></label>

  // Save references to my two control elements.
  var myPre = document.getElementById("preformatted");
  var numInput = document.getElementById("numInput");

  // Create an array of the numbers 0 through 9 as 7 segment digits.
  var numberStrings = [
   " __ <br/>|  |<br/>|__|<br/> ",
   "    <br/>   |<br/>   |<br/>",
   " __ <br/> __|<br/>|__ <br/>",
   " __ <br/> __|<br/> __|<br/>",
   "    <br/>|__|<br/>   |<br/>",
   " __ <br/>|__ <br/> __|<br/>",
   " __ <br/>|__ <br/>|__|<br/>",
   " __ <br/>   |<br/>   |<br/>",
   " __ <br/>|__|<br/>|__|<br/>",
   " __ <br/>|__|<br/> __|<br/>"];

  console.log(numberStrings)
  // Attach the listeners for the input changes.
  numInput.addEventListener("keyup", changeNumbers);
  numInput.addEventListener("change", changeNumbers);

  function changeNumbers(){
    // Simply use the element from the array associated with
    //  the entered number to update the preformatted display.
    myPre.innerHTML = numberStrings[numInput.value];
  }

输入数字：
//保存对我的两个控件元素的引用。
var myPre=document.getElementById（“预格式化”）；
var numInput=document.getElementById（“numInput”）；
//创建一个数字0到9的数组，作为7段数字。
变量编号字符串=[
“uuu
| |
| uuu124;
”，
“
|
|
”，
“_u
_124;
| _u
”，
“_uu
_124;
_124;
”，
“
| | |
|
”，
“_u
| _
_124;
”，
“uu
| uu
| uuu124;
”，
“uuu
|
|
”，
“uu
| uu124;
| u124;
”，
“_uu
| _124;
uu124;
”]；
console.log（数字字符串）
//附加输入更改的侦听器。
numInput.addEventListener（“键控”，更改编号）；
numInput.addEventListener（“变更”，变更编号）；
函数changeNumbers（）{
//只需使用与关联的数组中的元素
//用于更新预格式化显示的输入号码。
myPre.innerHTML=numberString[numInput.value]；
}

---

我的想法是不要使用几个div。

试试这个解决方案，它会起作用的。我已经取消了对输入的

max

限制，以便使用更大的数字进行测试

//保存对我的两个控件元素的引用。
var myPre=document.getElementById（“预格式化”）；
var numInput=document.getElementById（“numInput”）；
//创建一个数字0到9的数组，作为7段数字。
变量编号字符串=[
“uuu
| |
| uuu124;
”，
“
|
|
”，
“_u
_124;
| _u
”，
“_uu
_124;
_124;
”，
“
| | |
|
”，
“_u
| _
_124;
”，
“uu
| uu
| uuu124;
”，
“uuu
|
|
”，
“uu
| uu124;
| u124;
”，
“_uu
| _124;
uu124;
”]；
//附加输入更改的侦听器。
numInput.addEventListener（“键控”，更改编号）；
numInput.addEventListener（“变更”，变更编号）；
函数changeNumbers（）{
//只需使用与关联的数组中的元素
//用于更新预格式化显示的输入号码。
变量位数=numInput.value.split（“”）；
变量行=[''，'']；
用于（i个数字）{
var numString=numberStrings[digits[i]]。拆分（“
”）；
行[0]+=numString[0]；
行[1]+=numString[1]；
行[2]+=numString[2]；
}
myPre.innerHTML=line.join（“
”）；
}

#预格式化{
字体系列：monospace；
空白：预处理；
填充物：5px；
保证金：5px；
边框：1px点红色；
宽度：500px；
高度：50px；
位置：相对位置；
文本对齐：居中；
}
标签{
显示：块；
}

输入数字：

有多种方法，但我假设您希望使用多个div，因为您的逻辑支持一个div。因此，为每个字符设置一个div，并将时钟的每个数字输出到div。我添加了新的细节。谢谢…我的想法是不要使用几个div。有多个div，你几乎不需要改变任何东西，不知道那会是什么样的恐惧。但既然你说你不想这样做，你就需要改变你的逻辑，这样你就可以产生多行。您基本上需要查看一个数组并将其连接起来以构建每一行字符串。@epascarello您能帮我举一个例子来说明您的想法吗？谢谢！你能帮我做这个吗？