Создание последовательности входных данных, которые выглядят как фактические дроби - PullRequest
Новая
       6

Создание последовательности входных данных, которые выглядят как фактические дроби

0 голосов
/ 21 мая 2018

Учитывая следующее в HTML5-кодировании в Notepad ++, как мне сделать фактическую долю A / B и C / D ?

Почему: я хочу сделать свой A /B и C / D выглядят как фактическая дробь A / B + C / D и имеют поля input, расположенные втаким же образом.

Код работает так, как написано, я просто хочу его расширить, но мне сложно разобраться, как это сделать онлайн. 

<div id="Section_1">
	<p style='font-size: 4;'></p>
	Please tell me what you are adding?
	**Placement Matters**
	Now we are going to input A / B + C / D
	A=<input type="number" id="AbsoluteA" size='6'>
	B=<input type="number" id="AbsoluteB" size='6'>
	C=<input type="number" id="AbsoluteC" size='6'>
	D=<input type="number" id="AbsoluteD" size='6'>
	<p id="FAILEDHERE"></p>
		<button onclick="Script1()" id="button2">Proceed</button>
</div>

1 Ответ

0 голосов
/ 21 мая 2018

Есть более простой способ сделать это.См. Следующие примеры:

Пример 1 (½ + ¾) 

&frac12; + &frac34;

Пример 2 ( A ⁄ B + C ⁄ D ) 

<sup>A</sup>&frasl;<sub>B</sub> + <sup>C</sup>&frasl;<sub>D</sub>

Но чтобы поставить текстовое поле вместо текста, вы должны действовать вдругой путь.Потому что использование приведенного выше примера не очень хороший результат для поля <input>.См. Примеры ниже:

ٍ Пример 3: (с использованием таблицы) 

table,
span {
  display: inline-block;
  vertical-align: middle
}
input {
  width: 30px;
  text-align: center;
  border: none
}
<table>
    <tr>
        <td style="border-bottom:solid 1px">
            <input type="text" size=3 placeholder="A">
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" size=3 placeholder="B">
        </td>
    </tr>
</table>

<span> + </span>

<table>
    <tr>
        <td style="border-bottom:solid 1px">
            <input type="text" size=3 placeholder="C">
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" size=3 placeholder="D">
        </td>
    </tr>
</table>

Пример 4: (с использованием CSS) 

function Script1() {
  var A = +document.getElementById( 'AbsoluteA' ).value,
        B = +document.getElementById( 'AbsoluteB' ).value,
        C = +document.getElementById( 'AbsoluteC' ).value,
        D = +document.getElementById( 'AbsoluteD' ).value;

  document.getElementById( 'result' ).innerText = ( A / B ) + ( C / D ) || 0
}
.frac {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  text-align: center
}
.frac span {
  display: block;
  padding: 0.5em
}
.frac span.bottom {
  border-top: thin solid black
}
input {
  width: 30px;
  text-align: center;
  border: none
}
<div class="frac">
    <span>
        <input type="text" id="AbsoluteA" size=3 placeholder="A">
    </span>
    <span class="bottom">
        <input type="text" id="AbsoluteB" size=3 placeholder="B">
    </span>
</div>

<span> + </span>

<div class="frac">
    <span>
        <input type="text" id="AbsoluteC" size=3 placeholder="C">
    </span>
    <span class="bottom">
        <input type="text" id="AbsoluteD" size=3 placeholder="D">
    </span>
</div>

<button onclick="Script1()" id="button2" type="button"> = </button>

<span id="result"></span>
...