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);

functionchangeNumbers(){
  // 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;
}

<divid="preformatted"></div><divclass="number-entry-pane"><label>Enter a digit:
<inputtype="number"id="numInput"min=0  /></label></div>