HTML5移動APP計算器代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>計算器</title>
<style>
body {
background-color: #f2f2f2;
}
.header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px;
}
.button {
background-color: #4CAF50;
color: white;
border: none;
padding: 15px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 2px;
}
.button:hover {
background-color: #3e8e41;
}
.row::after {
content: "";
clear: both;
display: table;
}
.col {
float: left;
width: 25%;
padding: 15px;
height: 280px;
}
.row {
margin-top: 20px;
margin-bottom: 20px;
}
.input-field {
width: 100%;
display: block;
margin: 10px 0;
padding: 10px;
border-radius: 2px;
border: 1px solid #ccc;
font-size: 16px;
}
</style>
</head>
<body>
<div class="header"><h1>計算器</h1></div>
<div class="row">
<div class="col">
<input id="input1" class="input-field" type="text" placeholder="輸入數(shù)字1">
<input id="input2" class="input-field" type="text" placeholder="輸入數(shù)字2">
<button class="button" onclick="add()">+</button>
<button class="button" onclick="subtract()">-</button>
<button class="button" onclick="multiply()">*</button>
<button class="button" onclick="divide()">/</button>
<input id="output" class="input-field" type="text" placeholder="計算結(jié)果" readonly>
</div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<script>
function add() {
var num1 = parseFloat(document.getElementById("input1").value);
var num2 = parseFloat(document.getElementById("input2").value);
if (isNaN(num1) || isNaN(num2)) {
document.getElementById("output").value = "請輸入數(shù)字";
} else {
document.getElementById("output").value = num1 + num2;
}
}
function subtract() {
var num1 = parseFloat(document.getElementById("input1").value);
var num2 = parseFloat(document.getElementById("input2").value);
if (isNaN(num1) || isNaN(num2)) {
document.getElementById("output").value = "請輸入數(shù)字";
} else {
document.getElementById("output").value = num1 - num2;
}
}
function multiply() {
var num1 = parseFloat(document.getElementById("input1").value);
var num2 = parseFloat(document.getElementById("input2").value);
if (isNaN(num1) || isNaN(num2)) {
document.getElementById("output").value = "請輸入數(shù)字";
} else {
document.getElementById("output").value = num1 * num2;
}
}
function divide() {
var num1 = parseFloat(document.getElementById("input1").value);
var num2 = parseFloat(document.getElementById("input2").value);
if (isNaN(num1) || isNaN(num2)) {
document.getElementById("output").value = "請輸入數(shù)字";
} else {
if (num2 == 0) {
document.getElementById("output").value = "除數(shù)不能為0";
} else {
document.getElementById("output").value = num1 / num2;
}
}
}
</script>
</body>
</html>