diff options
Diffstat (limited to '080_blog/00040_Hex-Converter/hexman.html')
| -rw-r--r-- | 080_blog/00040_Hex-Converter/hexman.html | 170 |
1 files changed, 170 insertions, 0 deletions
diff --git a/080_blog/00040_Hex-Converter/hexman.html b/080_blog/00040_Hex-Converter/hexman.html new file mode 100644 index 0000000..86af3ef --- /dev/null +++ b/080_blog/00040_Hex-Converter/hexman.html @@ -0,0 +1,170 @@ +<body> + <head> + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> + <script> + var radix_str="26"; + + var str_map = {}; + str_map[777] = "Jackpot! You are Lucky Today!"; + str_map[13] = "Bad Bad Bad"; + str_map[666] = "The Number of the Beast."; + + function toggle_bin() { + var x = document.getElementById("details_bin"); + if (x.style.display === "none") { + x.style.display = "flex"; + } else { + x.style.display = "none"; + } +} + + function convert(val,rad) + { + if(val=="")return; + + /* guard radix */ + var oldradix=radix_str; + + radix_str=document.getElementById("custom_radix").value; + var radix=parseInt(radix_str,10); + + if(!radix || radix <2 || radix > 36)radix_str=oldradix + document.getElementById("custom_radix").value=radix_str; + var radix=parseInt(radix_str,10); + // + + var i=parseInt(val,rad); + if(i) + { + document.getElementById("custom").value = i.toString(radix); + document.getElementById("dec").value = i.toString(10); + document.getElementById("oct").value = i.toString(8); + document.getElementById("bin").value = i.toString(2); + document.getElementById("hex").value = i.toString(16); + + + var bytes="<p>"; + + for(var j=0;j<32;j++) + { + bytes+="byte "+j.toString(10)+" : "+(((i&(2**j))>0)?"1":"_")+"<br />"; + } + bytes+="</p>"; + document.getElementById("bytes").innerHTML=bytes; + } + + var info=str_map[i]; + + if(info) + { + document.getElementById("info").innerHTML = i.toString(10) + " - " + info; //"Page location is " + window.location.href; + } + else + { + document.getElementById("info").innerHTML = ""; + } + + } + </script> + <style> + </style> + </head> + <html> + + <div class="container"> + + <div class="row"> + <div class="col-4"></div> + <div class="col-4"> + <h1 class="text-primary">Miguel's Converter</h1> + <p>Convert numbers between different bases. Supports decimal, octal, binary and hex. You can use a custom base as well.</p> + </div> + <div class="col-4"></div> + </div> + + <div class="row"> + <div class="col-4"></div> + <div class="col-4"> + <input id='dec' class="w-100 mb-3" type=text placeholder="decimal" name="dec" onkeyup="convert(this.value,10)" /> + </div> + <div class="col-1"> + 10 + </div> + <div class="col-3"></div> + </div> + + <div class="row"> + <div class="col-4"></div> + <div class="col-4"> + <input id='oct' class="w-100 mb-3" type=text placeholder="octal" name="oct" onkeyup="convert(this.value,8)" /> + </div> + <div class="col-1"> + 8 + </div> + <div class="col-3"></div> + </div> + + <div class="row"> + <div class="col-4"></div> + <div class="col-4"> + <input id='bin' class="w-100 mb-3" type=text placeholder="binary" name="binary" onkeyup="convert(this.value,2)" /> + </div> + <div class="col-1"> + 2 + </div> + <div class="col-1"> + <button onclick="toggle_bin()"> + toggle + </button> + </div> + <div class="col-2"></div> + </div> + + <div id="details_bin" class="row" style="display:none"> + <div class="col-4"></div> + <div class="col-4" id='bytes'> + Need value first. + </div> + <div class="col-4"></div> + </div> + + <div class="row"> + <div class="col-4"></div> + <div class="col-4"> + <input id='hex' class="w-100 mb-3" type=text placeholder="hex" name="hex" onkeyup="convert(this.value,16)" /> + </div> + <div class="col-1"> + 16 + </div> + <div class="col-3"></div> + </div> + + <div class="row"> + <div class="col-4"></div> + <div class="col-4"> + <input id='custom' class="w-100 mb-3" type=text placeholder="custom" onkeyup="convert(this.value,document.getElementById('custom_radix').value)" /> + </div> + <div class="col-1"> + <input id='custom_radix' class="w-100 mb-3" type=text placeholder="radix" onkeyup="convert(document.getElementById('custom').value,this.value)" value="26" /> + </div> + <div class="col-3"></div> + </div> + <div class="row"> + <div class="col-4"></div> + <div class="col-4" id="info"> + </div> + <div class="col-4"></div> + </div> + <div class="row"> + <div class="col-4"></div> + <div class="col-4"> + <p>Hacked together by <a href=https://www.idziorek.net>miguel</a></p> + <p>powered by JavaScript and Bootstrap.</p> + </div> + <div class="col-4"></div> + </div> + + + + </html> +</body> |