JavaScript实现简易计算器

来源：互联网发布：淘宝运营系统架构编辑：程序博客网时间：2024/05/19 15:26

从input取值并将值放入input2的操作：

var value = document.getElementById(“input”).value;

document.getElementById(“input2”).value =value;

最终效果

实现代码

<!DOCTYPE html><html><head><title>简易计算器</title><style type="text/css">* {font: normal normal 18px "黑体";} #main {margin: 0 auto;}h1 {font: normal normal 24px "微软雅黑";text-align: center;}div {width: 610px;}input {width: 140px;height: 25px;border: 1px solid #666;outline: 0;margin: 8px 2px; }.btn {width: 80px;border: 0;background-color: #89B;}</style><script type="text/javascript">function add() {var a = document.getElementById("addNum1").value;var b = document.getElementById("addNum2").value;a = parseFloat(a);b = parseFloat(b); document.getElementById("addRes").value = (a+b).toFixed(3);}function sub() {var a = document.getElementById("subNum1").value;var b = document.getElementById("subNum2").value;a = parseFloat(a);b = parseFloat(b); document.getElementById("subRes").value = (a-b).toFixed(3);}function multi() {var a = document.getElementById("multiNum1").value;var b = document.getElementById("multiNum2").value;a = parseFloat(a);b = parseFloat(b); document.getElementById("multiRes").value = (a*b).toFixed(3);}function div() {var a = document.getElementById("divNum1").value;var b = document.getElementById("divNum2").value;a = parseFloat(a);b = parseFloat(b); document.getElementById("divRes").value = (a/b).toFixed(3);}</script></head><body><div id="main"><h1>JavaScript实现简易计算器</h1><div><input type="text" id="addNum1">+<input type="text" id="addNum2">=<input type="text" id="addRes"><input type="button" class="btn" value="计算" onclick="add()"></div><div><input type="text" id="subNum1">-<input type="text" id="subNum2">=<input type="text" id="subRes"><input type="button" class="btn" value="计算" onclick="sub()"></div><div><input type="text" id="multiNum1">*<input type="text" id="multiNum2">=<input type="text" id="multiRes"><input type="button" class="btn" value="计算" onclick="multi()"></div><div><input type="text" id="divNum1">/<input type="text" id="divNum2">=<input type="text" id="divRes"><input type="button" class="btn" value="计算" onclick="div()"></div></div></body></html>

阅读全文

0 0