如何以LCD时钟的方式将一个数字放在另一个数字的前面？ [英] How can I put one number in front of another in the style of an LCD clock?

问题描述

我想知道如何将一个数字放在另一个数字的前面。例如我想显示123.

但我不知道该怎么做。非常感谢。

 < div id =preformatted> 
 
< / div> 
 
< div class =number-entry-pane> 
< label>输入数字：
< input type =numberid =numInputmin = 0 max = 9 />< / label> 
 
 //保存对我的两个控制元素的引用。 
 var myPre = document.getElementById（preformatted）; 
 var numInput = document.getElementById（numInput）; 
 
 //创建一个数字0到9的数组作为7段数字。 
 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）
 //附加输入更改的侦听器。 
 numInput.addEventListener（keyup，changeNumbers）; 
 numInput.addEventListener（change，changeNumbers）; 
 $ b $ function changeNumbers（）{
 //只需使用与
关联的数组中的元素//输入的数字来更新预先格式化的显示。 
 myPre.innerHTML = numberStrings [numInput.value]; 
} 
  

https://jsfiddle.net/5e1dnt8m/

我的想法是不使用多个div。

解决方案

试试这个解决方案，它会起作用。我已经删除了输入中的 max 限制，以便用更大的数字进行测试。

  //保存对我的两个控制元素的引用myValue = document.getElementById（preformatted）; var numInput = document.getElementById（numInput）; // Create数字0到9的数组为7段数字.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 />]; //为输入添加监听器changes.numInput.addEventListener（keyup，changeNumbers）; numInput.addEventListener（change，changeNumbers）; function changeNumbers（）{//只需使用与输入数字相关的数组中的元素来更新预先格式化的显示。 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;填充：5px; margin：5px;边框：1px点缀红色;宽度：500px; height：50px;位置：相对; text-align：center;} label {display：block;}  

< div id =preformatted>< / div>< div class =number-entry-pane> < label>输入一个数字：< input type =numberid =numInputmin = 0 />< / label>< / div>

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 how to do it. thank you very much.

 <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];
  }

https://jsfiddle.net/5e1dnt8m/

My idea is not to use several divs.

解决方案

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>

这篇关于如何以LCD时钟的方式将一个数字放在另一个数字的前面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！