<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>スマホ電卓</title>
<style>
/* 全体のリセットと設定 */
* {
box-sizing: border-box;
touch-action: manipulation; /* スマホでのタップ反応を良くする */
}
body {
margin: 0;
padding: 0;
height: 100vh; /* 画面の高さ100% */
display: flex;
flex-direction: column;
background-color: #000;
font-family: sans-serif;
overflow: hidden; /* スクロール禁止 */
}
/* 計算結果の画面 */
#display-container {
flex: 1; /* 残りのスペースの1割くらい */
display: flex;
justify-content: flex-end;
align-items: flex-end;
padding: 20px;
background-color: #000;
}
#display {
width: 100%;
background: transparent;
border: none;
color: white;
font-size: 3.5rem; /* 文字を大きく */
text-align: right;
outline: none;
}
/* ボタンエリア */
.buttons {
flex: 2; /* 画面の2/3くらいを使う */
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 1px; /* ボタンの隙間 */
background-color: #333; /* 隙間の色 */
padding-bottom: env(safe-area-inset-bottom); /* iPhoneの下部バー対策 */
}
button {
border: none;
font-size: 1.5rem;
cursor: pointer;
background-color: #e0e0e0;
color: #000;
/* 押した感じのアニメーション */
transition: background-color 0.1s;
}
button:active {
background-color: #ccc;
}
/* 演算子ボタンの色 */
.operator {
background-color: #ff9f0a;
color: white;
font-size: 1.8rem;
}
.operator:active {
background-color: #d48406;
}
/* 数字ボタンの色 */
.number {
background-color: #333333;
color: white;
}
.number:active {
background-color: #555;
}
/* クリアなどの機能ボタン */
.func {
background-color: #a5a5a5;
color: black;
}
</style>
</head>
<body>
<div id="display-container">
<input type="text" id="display" readonly value="0">
</div>
<div class="buttons">
<button class="func" onclick="clearDisplay()">C</button>
<button class="func" onclick="deleteLast()">←</button>
<button class="func" onclick="appendDisplay('%')">%</button>
<button class="operator" onclick="appendDisplay('/')">÷</button>
<button class="number" onclick="appendDisplay('7')">7</button>
<button class="number" onclick="appendDisplay('8')">8</button>
<button class="number" onclick="appendDisplay('9')">9</button>
<button class="operator" onclick="appendDisplay('*')">×</button>
<button class="number" onclick="appendDisplay('4')">4</button>
<button class="number" onclick="appendDisplay('5')">5</button>
<button class="number" onclick="appendDisplay('6')">6</button>
<button class="operator" onclick="appendDisplay('-')">−</button>
<button class="number" onclick="appendDisplay('1')">1</button>
<button class="number" onclick="appendDisplay('2')">2</button>
<button class="number" onclick="appendDisplay('3')">3</button>
<button class="operator" onclick="appendDisplay('+')">+</button>
<button class="number" onclick="appendDisplay('0')" style="grid-column: span 2; border-radius: 0 0 0 10px;">0</button>
<button class="number" onclick="appendDisplay('.')">.</button>
<button class="operator" onclick="calculateResult()" style="border-radius: 0 0 10px 0;">=</button>
</div>
<script>
const display = document.getElementById('display');
// 演算子のリスト
const operators = ['/', '*', '-', '+', '%'];
function appendDisplay(input) {
const currentVal = display.value;
const lastChar = currentVal.slice(-1);
// 初期表示が0で、数字が押されたら0を消して上書きする（01とかにならないように）
if (currentVal === '0' && !operators.includes(input) && input !== '.') {
display.value = input;
return;
}
// 【ここがポイント！】
// もし「今回押されたのが記号」かつ「最後の文字も記号」なら
if (operators.includes(input) && operators.includes(lastChar)) {
// 何もしないで終了（リターン）＝連続入力を防ぐ
// ※もし「最後に入力した記号を新しい記号に置き換えたい」場合は
// display.value = currentVal.slice(0, -1) + input; に変更してください
return;
}
display.value += input;
}
function clearDisplay() {
display.value = "0";
}
function deleteLast() {
if (display.value.length > 1) {
display.value = display.value.slice(0, -1);
} else {
display.value = "0";
}
}
function calculateResult() {
try {
// 表示上の×÷を、プログラム用の*/に戻してから計算
let expression = display.value;
// セキュリティ対策と計算実行
display.value = new Function('return ' + expression)();
} catch (error) {
display.value = "Error";
}
}
</script>
</body>
</html>
使用変数
| appendDisplay -------( Function ) | |
| calculateResult -------( Function ) | |
| charset | |
| class | |
| clearDisplay -------( Function ) | |
| content | |
| currentVal | |
| deleteLast -------( Function ) | |
| display | |
| expression | |
| id | |
| lang | |
| lastChar | |
| name | |
| onclick | |
| operators | |
| scalable | |
| scale | |
| style | |
| type | |
| value | |
| width |