<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title></title>
</head>
<body>
<table>
<tr>
<td><input type="button" value="add" onclick="setOp('+', 'add')"/></td>
<td><input type="button" value="miner" onclick="setOp('-', 'miner')"/></td>
<td><input type="button" value="times" onclick="setOp('*', 'times')"/></td>
<td><input type="button" value="divide" onclick="setOp('/', 'divide')"/></td>
</tr>
</table>
<table id="tb_calc" style="display:none">
<tr>
<td> <input id="x" type="text" style="width:100px" value="" name="x" /></td>
<td> <lable id="op" name="op"></lable> </td>
<td> <input id="y" type="text" style="width:100px" value="" name="y" /> </td>
<td> <input id="opTips" type="button" value="" onclick="calc()"/> </td>
<td> <lable id="z" name="z"></lable> </td>
</tr>
</table>
<script type="application/javascript">
function setOp(op, opTips)
{
var tb=document.getElementById("tb_calc")
tb.style.display = "none"
document.getElementById("x").value = ""
document.getElementById("y").value = ""
document.getElementById("z").innerText = ""
document.getElementById("op").innerText = op
document.getElementById("opTips").value = opTips
tb.style.display = "block"
}
function calc()
{
var x = parseInt(document.getElementById("x").value)
var y = parseInt(document.getElementById("y").value)
var op = document.getElementById("op").innerText
var z = ""
switch(op)
{
case '+':
z = x + y
break
case '-':
z = x - y
break
case '*':
z = x * y
break
case '/':
z = x / y
break
default:
z = ''
}
console.log(x, op, y, '=', z)
document.getElementById("z").innerText = z
}
</script>
</body>
</html>
实现的步骤，第一步是加4个按钮，如图所示：
第二步需要加两个输入框，两个，一个按钮
这个需要知道javascript,这方面语言会吗？不会的话，帮你写一个了！
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>计算器</title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
var first = parseInt($("#first").val())//获取第一个数的值并转化为数字
var second = parseInt($("#second").val())//获取第二个数的值并转化为数字
var sum = 0//定义结果值
var symbol = parseInt($("[type=radio]:checked").val())//获取符号的值
//通过对符号的判断计算结果
switch(symbol){
case 0:
sum = first + second
break
case 1:
sum = first - second
break
case 2:
sum = first * second
break
case 3:
sum = first / second
break
}
var arr = ['+','-','*','/']//输出的符号
$("h2 span").text(first + arr[symbol] + second +" = " +sum)//把结果输出到结果栏中
})
})
</script>
<body>
<h1>计算器</h1>
<p>数字一：<input type="text" id="first" style="width: 40px" /></p>
<p>
<label><input type="radio" name="symbol" value="0" checked="checked"/>+</label>
<label><input type="radio" name="symbol" value="1" />-</label>
<label><input type="radio" name="symbol" value="2" />*</label>
<label><input type="radio" name="symbol" value="3" />/</label>
</p>
<p>数字二：<input type="text" id="second" style="width: 40px" /></p>
<p><button>计算</button></p>
<h2>结果：<span></span></h2>
</body>
</html>
这边找到一段代码，供参考<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<title>加、减、乘、除运算</title>
<script type="text/javascript">
function calculate(){
var num1 = parseFloat(document.getElementById("num1").value)
var num2 = parseFloat(document.getElementById("num2").value)
var val = document.getElementById("value").value
if(val=="+"){
document.getElementById("num3").value = num1 + num2
}
else if(val=="-"){
document.getElementById("num3").value = num1 - num2
}
else if(val=="*"){
document.getElementById("num3").value = num1 * num2
}
else if(val=="/"){
document.getElementById("num3").value = num1 / num2
}
}
</script>
</head>
<body>
<form>
<center>
<fieldset style="height:80px">
<legend>请输入要运算的数</legend>
<input type="number" id="num1" value="" />
<select name="cal" id="value">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="number" id="num2" value=""/>=
<input type="number" id="num3" value=""/>
<input type="button" value="提交" onClick="calculate()"/>
</fieldset>
</center>
</form>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）