1、显示效果
2、代码
<!doctype html>
<html>
<head>
<!--声明当前页面的编码集:charset=gbk,gb2312(中文编码),utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--当前页面的三要素-->
<title>计算器版本2</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="">
<style type="text/css">
body{font-size:14px;font-family:"微软雅黑";background:#111;color:#fff;}
legend{color:#fff;}
</style>
</head>
<body>
<fieldset>
<legend>简单的计算器</legend>
<input type="text" id="aa" value="100"/> +
<input type="text" id="ab" value="200"/>
<input type="button" value="结果" οnclick="jisuan('a','+')"/>
<span id="aresult"></span></br>
<input type="text" id="ba" value="100"/> -
<input type="text" id="bb" value="200"/>
<input type="button" value="结果" οnclick="jisuan('b','-')"/>
<span id="bresult"></span></br>
<input type="text" id="ca" value="100"/> *
<input type="text" id="cb" value="200"/>
<input type="button" value="结果" οnclick="jisuan('c','*')"/>
<span id="cresult"></span></br>
<input type="text" id="da" value="100"/> /
<input type="text" id="db" value="200"/>
<input type="button" value="结果" οnclick="jisuan('d','/')"/>
<span id="dresult"></span></br>
<input type="text" id="ea" value="100"/> %
<input type="text" id="eb" value="200"/>
<input type="button" value="结果" οnclick="jisuan('e','%')"/>
<span id="eresult"></span>
</fieldset>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function jisuan(c, op) {
var aa = $(c+"a").value;
var ab = $(c+"b").value;
var resultDom = $(c+"result");
resultDom.innerHTML = eval(aa+op+ab);
}
</script>
</body>
</html>