javascript - 如何使用 _ 和 | 从 javascript 制作数字形状？

Question

希望能让自己明白。我非常不擅长正则表达式。我正在尝试显示从 0 到 9 的数字。但现在我只需要显示数字 0，如此处所示。

如何从 javascript 生成它？原谅我的无知，我想我做错了，我不知道我是否应该使用......

不要以为我没有尽力，说真的我不知道如何正确显示数字零。

var myPre = document.getElementById("pre");

myPre.innerHTML = "|  -- <br> |"

<div id="pre">

</div>

Answer 1

您将需要等宽字体，必须使用下划线而不是连字符，并且必须牢记第一行空格的影响。 .

var myPre = document.getElementById("preformatted");

myPre.innerHTML = " __<br/>|  |<br/>|__|<br/>"

#preformatted {
    font-family: monospace;
    white-space: pre;
}

<div id="preformatted">

</div>

而且，只是为了咧嘴一笑......

// 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.
  myPre.innerHTML = numberStrings[numInput.value];
}

#preformatted {
    font-family: monospace;
    white-space: pre;
    padding: 5px;
    margin: 5px;
    border: 1px dotted red;
    width: 50px;
    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 max=9 /></label>