1、显示效果
2、代码
<!doctype html>
<html>
<head>
<!--声明当前页面的编码集:charset=gbk,gb2312(中文编码),utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--当前页面的三要素-->
<title>计算器版本1</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="add()"/>
<span id="aresult"></span></br>
<input type="text" id="ba" value="100"/> -
<input type="text" id="bb" value="200"/>
<input type="button" value="结果" οnclick="jianfa()"/>
<span id="bresult"></span></br>
<input type="text" id="ca" value="100"/> *
<input type="text" id="cb" value="200"/>
<input type="button" value="结果" οnclick="chengfa()"/>
<span id="cresult"></span></br>
<input type="text" id="da" value="100"/> /
<input type="text" id="db" value="200"/>
<input type="button" value="结果" οnclick="chufa()"/>
<span id="dresult"></span></br>
<input type="text" id="ea" value="100"/> %
<input type="text" id="eb" value="200"/>
<input type="button" value="结果" οnclick="qumo()"/>
<span id="eresult"></span>
</fieldset>
<script type="text/javascript">
function add() {
var aa = document.getElementById("aa").value*1;
var ab = document.getElementById("ab").value*1;
var resultDom = document.getElementById("aresult");
resultDom.innerHTML = aa + ab;
}
function jianfa() {
var aa = document.getElementById("ba").value*1;
var ab = document.getElementById("bb").value*1;
var resultDom = document.getElementById("bresult");
resultDom.innerHTML = aa - ab;
}
function chengfa() {
var aa = document.getElementById("ca").value*1;
var ab = document.getElementById("cb").value*1;
var resultDom = document.getElementById("cresult");
resultDom.innerHTML = aa * ab;
}
function chufa() {
var aa = document.getElementById("da").value*1;
var ab = document.getElementById("db").value*1;
var resultDom = document.getElementById("dresult");
resultDom.innerHTML = aa / ab;
}
function qumo() {
var aa = document.getElementById("ea").value*1;
var ab = document.getElementById("eb").value*1;
var resultDom = document.getElementById("eresult");
resultDom.innerHTML = aa % ab;
}
</script>
</body>
</html>