Skip to content

Instantly share code, notes, and snippets.

@hanya

hanya/bits.html

Last active August 27, 2021 11:44
Show Gist options
  • Save hanya/8b7fb83d3efb1baef3f91017ddee635a to your computer and use it in GitHub Desktop.
Save hanya/8b7fb83d3efb1baef3f91017ddee635a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bits.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Bit display</title>
<style type="text/css">
div#input2, div#input3, div#input4 {
margin-top: 1em;
}
table {
margin-top: 0.5em;
}
table, td {
border-collapse: collapse;
border: 1px solid #000000;
}
tr > td {
padding: 4px;
}
tr.bit > td, tr.data > td {
text-align: right;
min-width: 22px;
}
</style>
<script type="text/javascript">
function init_fill_bits(num, id, max, min) {
const bit_tr = document.getElementById("bit" + num + "-" + id);
const data_tr = document.getElementById("data" + num + "-" + id);
for (let i = max; i >= min; i--) {
let td = document.createElement('td');
td.id = "bit" + num + "-" + i;
td.innerHTML = i;
bit_tr.appendChild(td);
td = document.createElement('td');
td.id = "data" + num + "-" + i;
td.innerHTML = 0;
data_tr.appendChild(td);
}
}
window.onload = function(ev) {
for (let i = 1; i <= 4; i++) {
init_fill_bits(i, "31-16", 31, 16);
init_fill_bits(i, "15-0", 15, 0);
update(i);
}
}
function update(ev) {
let value = document.getElementById('value' + ev).value;
if (value.startsWith("0x")) {
value = parseInt(value, 16);
}
for (let i = 31; i >= 0; i--) {
const bit = (value & (1 << i)) != 0 ? '1' : '0';
document.getElementById("data" + ev + "-" + i).innerHTML = bit;
}
}
</script>
<body>
<div id="input1">
Value:
<input type="text" id="value1" pattern="[0-9]*|0x[0-9a-hA-H]*" value="64" class="numeric" onChange="update(1);" title="[0-9]*|0x[0-9a-hA-H]*">
</div>
<div id="result1">
<table id="bits1-31-16" class="bits">
<tr class="bit" id="bit1-31-16"></tr>
<tr class="data" id="data1-31-16"></tr>
</table>
<table id="bits1-15-0" class="bits">
<tr class="bit" id="bit1-15-0"></tr>
<tr class="data" id="data1-15-0"></tr>
</table>
</div>
<div id="input2">
Value:
<input type="text" id="value2" pattern="[0-9]*|0x[0-9a-hA-H]*" value="256" class="numeric" onChange="update(2);" title="[0-9]*|0x[0-9a-hA-H]*">
</div>
<div id="result2">
<table id="bits2-31-16" class="bits">
<tr class="bit" id="bit2-31-16"></tr>
<tr class="data" id="data2-31-16"></tr>
</table>
<table id="bits2-15-0" class="bits">
<tr class="bit" id="bit2-15-0"></tr>
<tr class="data" id="data2-15-0"></tr>
</table>
</div>
<div id="input3">
Value:
<input type="text" id="value3" pattern="[0-9]*|0x[0-9a-hA-H]*" value="256" class="numeric" onChange="update(3);" title="[0-9]*|0x[0-9a-hA-H]*">
</div>
<div id="result3">
<table id="bits3-31-16" class="bits">
<tr class="bit" id="bit3-31-16"></tr>
<tr class="data" id="data3-31-16"></tr>
</table>
<table id="bits3-15-0" class="bits">
<tr class="bit" id="bit3-15-0"></tr>
<tr class="data" id="data3-15-0"></tr>
</table>
</div>
<div id="input4">
Value:
<input type="text" id="value4" pattern="[0-9]*|0x[0-9a-hA-H]*" value="256" class="numeric" onChange="update(4);" title="[0-9]*|0x[0-9a-hA-H]*">
</div>
<div id="result4">
<table id="bits4-31-16" class="bits">
<tr class="bit" id="bit4-31-16"></tr>
<tr class="data" id="data4-31-16"></tr>
</table>
<table id="bits4-15-0" class="bits">
<tr class="bit" id="bit4-15-0"></tr>
<tr class="data" id="data4-15-0"></tr>
</table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment