这是我使用JavaScript开发的简易计算器
项目来源：www.bilibili.com/video/BV1Sy…
思路
1.创建按钮（引入鼠标点击事件）并且设置样式
2.创建函数，根据用户输入的值用if-else判断，然后调用局部变量里返回的值输出结果
这是最终的效果(gif)：
<html>
<head>
<meta charset="utf-8">
<title>JS简易计算器</title>
<style>
/* 设置简单按钮样式 */
.button {
text-align: center;
margin-top: 200px;
}
input {
border: none;
height: 80px;
width: 300px;
border-radius: 10px;
cursor: pointer;
font-size: 22px;
transition: all .25s;
}
input:hover {
background-color: pink;
transform: scale(0.98);
}
</style>
</head>
<body>
<!-- 按钮 -->
<div class="button">
<!-- 引入鼠标点击事件 -->
<input type="button" onclick="count()" value="开启简易计算器">
</div>
</body>
<script>
//鼠标点击弹出
function count() {
// 弹出框-用户输入
var Counter = prompt('欢迎使用简易计算器:\n1.加法运算：\n2.减法运算：\n3.乘法运算：\n4.除法运算：\n5.退出：\n请输入您的选项');
//局部变量
function Add() { //加法
var a = prompt('请输入第一个数');
var b = prompt('请输入第二个数');
return Number(a) + Number(b); // 函数返回
}
function Sub() { //减法
var a = prompt('请输入第一个数');
var b = prompt('请输入第二个数');
return Number(a) - Number(b);
}
function Mul() { //乘法
var a = prompt('请输入第一个数');
var b = prompt('请输入第二个数');
return Number(a) * Number(b);
}
function Div() { //除法
var a = prompt('请输入第一个数');
var b = prompt('请输入第二个数');
return Number(a) / Number(b);
}
if (Counter == 1) {
alert("两数运算结果为：" + Add()); // 调用函数
}
else if (Counter == 2) {
alert("两数运算结果为：" + Sub());
}
else if (Counter == 3) {
alert("两数运算结果为：" + Mul());
}
else if (Counter == 4) {
alert("两数运算结果为：" + Div());
}
else if (Counter == 5) {
alert('正在退出计算器...');
}
else {
alert("无效，请重新输入...");
}
}
</script>
</html>
