简易计算器,窗口界面自由发挥且可以调整界面大小,编程实现两个整数的加、减、乘、除操作。要求如下: 首先进行操作数文本框检验,检验输入数据是否为纯数字; 通过分别单击加、减、乘、除按钮,对操作数1与操作数2进行相应加、减、乘、除操作,并且将其结果写入操作3文本框。
时间: 2023-07-10 09:12:34 浏览: 30
好的,这是一个简单的基于 HTML、CSS 和 JavaScript 实现的计算器代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style>
body {
font-size: 20px;
}
input[type=number] {
font-size: 20px;
width: 80px;
text-align: right;
}
input[type=button] {
font-size: 20px;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h1>简易计算器</h1>
<div>
<label>操作数1:</label>
<input type="number" id="num1">
</div>
<div>
<label>操作数2:</label>
<input type="number" id="num2">
</div>
<div>
<label>运算结果:</label>
<input type="text" id="result" readonly>
</div>
<div>
<input type="button" value="+" onclick="add()">
<input type="button" value="-" onclick="sub()">
<input type="button" value="*" onclick="mul()">
<input type="button" value="/" onclick="div()">
</div>
<script>
function add() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
if (validate(num1, num2)) {
document.getElementById("result").value = parseInt(num1) + parseInt(num2);
}
}
function sub() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
if (validate(num1, num2)) {
document.getElementById("result").value = parseInt(num1) - parseInt(num2);
}
}
function mul() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
if (validate(num1, num2)) {
document.getElementById("result").value = parseInt(num1) * parseInt(num2);
}
}
function div() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
if (validate(num1, num2)) {
if (parseInt(num2) === 0) {
document.getElementById("result").value = "除数不能为0";
} else {
document.getElementById("result").value = parseInt(num1) / parseInt(num2);
}
}
}
function validate(num1, num2) {
if (isNaN(num1) || isNaN(num2)) {
document.getElementById("result").value = "请输入纯数字";
return false;
}
return true;
}
</script>
</body>
</html>
```
这个计算器界面也很简单,有三个文本框:操作数1、操作数2和运算结果。四个按钮:加、减、乘、除。在点击按钮时,会进行相应的操作,并将结果显示在运算结果文本框中。在进行操作之前,会先进行输入的纯数字检验,如果不符合要求,则会在运算结果文本框中提示用户。