Click here for free DL of the app version that can save data.

No:795

162

←

Prev Next

→

Dont make games, make calculators.
Developer User3136｜Date and time 23/6/17 18:16:03
Build time 39.299 sec｜Game capacity 2.961KB｜

Script

了解しました。以下に電卓を作るプログラムを記述します。

電卓

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

Click here for free DL of the app version that can save data.

了解しました。以下に電卓を作るプログラムを記述します。

<!DOCTYPE html>
<html>
<head>
	<title>電卓</title>
	<meta charset="UTF-8">
	<style>
		body {
			background-color: #f2f2f2;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		h1 {
			color: #333333;
		}
		input {
			font-size: 1.5em;
			padding: 10px;
			margin: 10px;
			border: none;
			border-radius: 5px;
			box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
			background-color: #ffffff;
			text-align: right;
			width: 200px;
		}
		table {
			margin: auto;
			margin-top: 20px;
			margin-bottom: 20px;
			border-collapse: collapse;
			width: 250px;
		}
		td {
			padding: 10px;
		}
		button {
			font-size: 1.5em;
			padding: 10px;
			margin: 5px;
			border: none;
			border-radius: 5px;
			box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
			background-color: #ffffff;
			cursor: pointer;
			width: 50px;
			height: 50px;
		}
		button:hover {
			background-color: #e6e6e6;
		}
		button:active {
			box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
			transform: translateY(1px);
		}
		#clear {
			background-color: #ff6666;
			color: #ffffff;
		}
	</style>
	<script>
		var result = ""; // 入力された数式の文字列を保持する変数
		function clearResult() { // Cボタンの処理
			result = "";
			document.getElementById("result").value = result;
		}
		function addChar(char) { // 数字ボタンや演算子ボタンの処理
			result += char;
			document.getElementById("result").value = result;
		}
		function calculateResult() { // =ボタンの処理
			var calculation = eval(result); // eval関数を使って式を計算
			result = calculation.toString(); // 計算結果を文字列に変換してresult変数に代入
			document.getElementById("result").value = result;
		}
	</script>
</head>
<body>
	<h1>電卓</h1>
	<input id="result" type="text" disabled="disabled" value="">
	<table>
		<tr>
			<td colspan="3"><button id="clear" onclick="clearResult()">C</button></td>
			<td><button onclick="addChar('/')">÷</button></td>
		</tr>
		<tr>
			<td><button onclick="addChar('7')">7</button></td>
			<td><button onclick="addChar('8')">8</button></td>
			<td><button onclick="addChar('9')">9</button></td>
			<td><button onclick="addChar('*')">×</button></td>
		</tr>
		<tr>
			<td><button onclick="addChar('4')">4</button></td>
			<td><button onclick="addChar('5')">5</button></td>
			<td><button onclick="addChar('6')">6</button></td>
			<td><button onclick="addChar('-')">－</button></td>
		</tr>
		<tr>
			<td><button onclick="addChar('1')">1</button></td>
			<td><button onclick="addChar('2')">2</button></td>
			<td><button onclick="addChar('3')">3</button></td>
			<td><button onclick="addChar('+')">＋</button></td>
		</tr>
		<tr>
			<td colspan="2"><button onclick="addChar('0')">0</button></td>
			<td><button onclick="addChar('.')">.</button></td>
			<td><button onclick="calculateResult()">＝</button></td>
		</tr>
	</table>
</body>
</html>