定番の、入力した10進数を2進数、8進数、16進数に変換を作ってみました。
■HTMLは少し追加が必要
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>16進数変換</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="links/rule.css">
</head>
<body>
入力した10進数を2進数、8進数、16進数に変換<br>
<h3>
<input type="text" id="decimal-input"><br>
<button onclick="convertToBinary()"> 2進数 </button>
<button onclick="convertToOctal()"> 8進数 </button>
<button onclick="convertToHex()"> 16進数 </button>
<p id="result"></p>
<br>
<!-- それぞれの進数ボタンをクリックしたらJavaScriptで定義した 2進数はconvertToBinaryを実行
8進数はconvertToOctalを実行
16進数は convertToHexを実行-->
<script src="links/action.js"></script>
<p id="binary-output"></p>
<p id="octal-output"></p>
<p id="hex-output"></p>
<!--2進数を表示
8進数を表示
16進数を表示-->
</h3>
</body>
</html>
<!-- index.html -->
■JavaScript
/* action.js */
function convertToBinary() {
let decimalInput =
document.getElementById("decimal-input").value;
/* 数字を入力して数値変換
getElementByIdは、任意のHTMLタグで指定したIDにマッチする
ドキュメント要素を取得するメソッド
decimal-inputは、10進数を入力。valueは入力文字列を数値変換*/
let decimalNumber = parseInt(decimalInput, 10);
/* 入力した数値を10進数に変換 */
let binaryNumber = decimalNumber.toString(2);
/* 10進数を2進数に変換 */
document.getElementById("result").textContent =
"入力された数値の2進数は： " + binaryNumber + " です";
/* 2進数の値を表示する*/
}
function convertToOctal() {
let decimalInput =
document.getElementById("decimal-input").value;
/* 数字を入力して数値変換 */
let decimalNumber = parseInt(decimalInput, 10);
/* 入力した数値を10進数に変換 */
let octalNumber = decimalNumber.toString(8);
/* 10進数を8進数に変換 */
document.getElementById("result").textContent =
"入力された数値の8進数は： " + octalNumber + " です";
/* 8進数の値を表示する*/
}
function convertToHex() {
let decimalInput =
document.getElementById("decimal-input").value;
/* 数字を入力して数値変換 */
let decimalNumber = parseInt(decimalInput, 10);
/* 入力した数値を10進数に変換 */
let hexNumber = decimalNumber.toString(16);
/* 10進数を16進数に変換 */
document.getElementById("result").textContent =
"入力された数値の16進数は： " + hexNumber + " です";
/* 16進数の値を表示する*/
}
/* action.js */
■CSSはいつもの通り
/* rule.css */
@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
body {
color: #000000;
background-color: aliceblue;
text-align: center;
font-size: 16px;
line-height: 2.0;
-webkit-text-size-adjust: 100%;
}
input{
font-size: 16px;
text-align:right;
}
button {
width: 80px;
height: 30px;
font-size: 16px;
}
h3 {
font-size: 18px;
color: red;
}
/* rule.css */
ページを表示したら・・・
10進数を入れて変換したい進数ボタンをクリックするだけです。
