用javascript在文本框输入两个操作数和选择运算符后，在页面上输出显示结果
显示结果是【用户输入文本框1】【selected运算符】【用户输入文本框】=【结果】【计算按钮】...
显示结果是 【用户输入文本框1】【selected 运算符】【用户输入文本框】=【结果】 【计算按钮】
展开
展开全部
这个很简单，LZ稍微研究下就能写出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单计算器</title>
</head>
<body>
<input placeholder="数字1" id="num1" />
<select id="rule">
<option value="add">+</option>
<option value="sub">-</option>
<option value="multi">*</option>
<option value="division">/</option>
</select>
<input placeholder="数字2" id="num2" /> =
<input placeholder="结果" disabled="disabled" id="result" />
<button id="calcBtn" onclick="execute();">计算</button>
<script>
/**
* 执行计算，提取数据，交给计算函数
*/
function execute() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var rule = document.getElementById("rule").value;
var rs = calc(num1, num2, rule);
var result = document.getElementById("result");
result.value = rs;
};
/**
* 计算函数，简单策略模式，严格来说应该给每个算法抽象接口。
* @param {Object} num1
* @param {Object} num2
* @param {Object} rule
*/
function calc(num1, num2, rule) {
num1 = parseFloat(num1);
num2 = parseFloat(num2);
if (isNaN(num1) || isNaN(num2)) {
return "非法的操作数";
}
switch (rule) { //简单选中算法规则
case "add":
return add(num1, num2);
case "sub":
return sub(num1, num2);
case "multi":
return multi(num1, num2);
case "division":
return division(num1, num2);
default:
return "不支持的运算符";
}
};
/**
* 加法规则，操作数必须合法。
* @param {Object} num1
* @param {Object} num2
*/
function add(num1, num2) {
return num1 + num2;
};
/**
* 减法,对于js和java这种方法有财务精度bug
* @param {Object} num1
* @param {Object} num2
*/
function sub(num1, num2) {
return num1 - num2;
};
/**
* 乘法
* @param {Object} num1
* @param {Object} num2
*/
function multi(num1, num2) {
return num1 * num2;
};
/**
* 除法
* @param {Object} num1
* @param {Object} num2
*/
function division(num1, num2) {
if (num2 == 0) {
return "除数不能为零";
}
return num1 / num2;
};
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你好，下面是根据题目描述写的一个小例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ellipsis</title>
</head>
<body>
<input type="number" id="num1">
<select name="" id="symbol">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">x</option>
<option value="/">÷</option>
</select>
<input type="number" id="num2">
<input type="button" value="计算" id="result">
<input type="text" id="showResult">
<script>
(function(){
var n1 = document.getElementById('num1'),
n2 = document.getElementById('num2'),
s = document.getElementById('symbol'),
rs = document.getElementById('result'),
sr = document.getElementById('showResult');
rs.onclick = function(ev){
sr.value = n1.value + ' ' + s.value + ' ' + n2.value + ' = ' + (eval('(' + n1.value + s.value + n2.value + ')'));
};
})();
</script>
</body>
</html>
根据你自己的代码，稍微调整下就行了，希望是你想要的答案，望采纳~~
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
