1、显示效果
2、代码
<!doctype html>
<html>
<head>
<!--声明当前页面的编码集:charset=gbk,gb2312(中文编码),utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--当前页面的三要素-->
<title>计算器版本3</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="a" value="" />
<select id="op">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
<input type="text" id="b" value="" />
<input type="button" value="结果" οnclick="jisuan()"/>
<span id="result"></span></br>
</fieldset>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function jisuan() {
var a = $("a").value;
var b = $("b").value;
var op = $("op").value;
var resultDom = $("result");
resultDom.innerHTML = eval(a+op+b);
}
</script>
</body>
</html>