简单计算器的实现（入门级）：
实现效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>calculator</title>
<style>
div{
text-align: center;
margin-top: 100px;
}
span{
color: red;
font-size: 33px;
}
body{
background: url('../images/gf-style.jpeg');
}
</style>
</head>
<body>
<div>
<form>
<!-- 第一个数 -->
<input type="text" id="num1">
<!-- 符号选项 -->
<select id="options">
<option value="+" selected="selected">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
<!--符号选项end-->
<!-- 第二个数 -->
<input type="text" id="num2">
=
<!-- 显示结果位置 -->
<span id="result"></span>
<!-- 计算按钮 -->
<button type="button" onclick="calc()">计算</button>
</form>
</div>
<script>
// 该函数获取输入的数
function calc(){
// 获取下拉菜单的id
var options = document.getElementById("options").value;
//获取第一个数
var num1 = parseInt(document.getElementById("num1").value);
// 获取第二个数
var num2 = parseInt(document.getElementById("num2").value);
// 调用该calculator()函数并赋值
var total = calculator(options,num1,num2);
// 显示结果
document.getElementById("result").innerText = total;
}
// 该函数用于计算第一个数与第二个数之间的结果
// 定义函数并传参
function calculator(ops,n1,n2) {
switch(ops){
case '+': //匹配下拉菜单中的+号
return n1+n2;
case '-': //匹配下拉菜单中的-号
return n1-n2;
case '*': //匹配下拉菜单中的*号
return n1*n2;
case '/': //匹配下拉菜单中的/号
return n1/n2;
case '%' :
return n1%n2;
default:
return "未知操作符"; //如果都不匹配，则显示默认值
}
}
</script>
</body>
</html>背景图像：
