How Can I Put One Number In Front Of Another In The Style Of An Lcd Clock?

I am generating a number in the style of lcd clocks. I would like to know how I can put one number in front of another. for example I would like to show 123. but I do not know h

Solution 1:

Try this solution, it will work. I have removed the max limit on the input for testing with bigger numbers.

// 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/>"];

// 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.
  var digits = numInput.value.split('');
  var line=['','',''];
  for (i in digits) {
  	var numString = numberStrings[digits[i]].split('<br/>');
    line[0] += numString[0];
    line[1] += numString[1];
    line[2] += numString[2];
  }
  myPre.innerHTML = line.join('<br/>');
}

#preformatted {
    font-family: monospace;
    white-space: pre;
    padding: 5px;
    margin: 5px;
    border: 1px dotted red;
    width: 500px;
    height: 50px;
    position: relative;
    text-align: center;
}
label {
  display: block;
}

<div id="preformatted"></div>

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