简单的计算器功能

来源：互联网发布：php 反转字符串编辑：程序博客网时间：2024/05/16 18:52

最近几天在论坛上看到计算器的一个帖子，觉得做个用自己熟悉的计算机语言做个计算器倒是挺有意思的。于是用了周末的闲暇时间做了两个简单的计算器。

计算器一：

这个计算器算是最简单的，没有样式，只是实现简单的加减乘除。

<span style="font-size:14px;"><!DOCTYPE html><html><head><meta charset="utf-8"><title>js简单的计算器</title><script type="text/javascript">function jisuan(){//获取num1对象var num1_obj = document.getElementById("num1");//获取num1对象填写的值var num1_val = num1_obj.value;//将获取num1_val转成数num1_val = parseFloat(num1_val);//获取num2对象var num2_obj = document.getElementById("num2");//获取num2对象填写的值var num2_val = num2_obj.value;//将获取num2_val转成数num2_val = parseFloat(num2_val);//获取fuhao对象var fuhao_obj = document.getElementById("fuhao");//获取fuhao对象填写的值var fuhao_val = fuhao_obj.value;var res = 0;switch(fuhao_val){case "+":res = num1_val + num2_val; break;case "-":res = num1_val - num2_val; break;case "*":res = num1_val * num2_val; break;case "/":res = num1_val / num2_val; break;}//把这个值放回到结果框//获取result对象var result_kuang_obj = document.getElementById("result_kuang");//把值放入result_kuang.value = res.toFixed(2);}</script></head><body><div><h1>简单的计算器</h1>第一个数<input type="text" id="num1" value=""><br />选择符号：<select name="fuhao" id="fuhao"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><br />第二个数<input type="text" id="num2" value=""><br />点击计算<input type="button" value=" = " onclick="jisuan()"><br />运算结果<input type="text" value="" id="result_kuang"><br /></div></body></html></span>

计算器二：

这个计算器加了简单的样式，显得简洁大方，整体美观，比第一个功能要全一些。

<span style="font-size:14px;"><!DOCTYPE html><html><head><meta charset="utf-8"><title>js简单的计算器</title><style type="text/css">#div1{width:225px;height:335px;background-color:pink;}.div2{width:50px; height:50px; font-size:20px;}.div3{width:105px; height:50px; font-size:20px;}.div4{width:50px; height:105px; font-size:20px;position:absolute; top:176px; left:175px;}.div5{width:50px; height:105px; font-size:20px;position:absolute; top:285px; left:175px;}</style><script type="text/javascript">var clear_content = false;function getNum(num){if(clear_content){document.getElementById("result").value = " ";clear_content = false;}var result_obj = document.getElementById("result");result_obj.value += num;}function getResult(){var result2_obj = document.getElementById("result");result2_obj.value = result2_obj.value + " = " + eval(result2_obj.value);clear_content = true;}</script></head><body><h3>简易计算器</h3><div id="div1"><table><tbody><tr><td><input type="text" style="width:210px; height:50px; font-size:20px; border:1px solid red" id="result"><br /><td></tr><tr><td><input class="div2" type="button" value="C" onclick="getNum(' ')"><input class="div2" type="button" value="*" onclick="getNum('*')"><input class="div2" type="button" value="/" onclick="getNum('/')"><input class="div2" type="button" value="-" onclick="getNum('-')"></td></tr><tr><td><input class="div2" type="button" value="7" onclick="getNum(7)"><input class="div2" type="button" value="8" onclick="getNum(8)"><input class="div2" type="button" value="9" onclick="getNum(9)"></td></tr><tr><td><input class="div2" type="button" value="4" onclick="getNum(4)"><input class="div2" type="button" value="5" onclick="getNum(5)"><input class="div2" type="button" value="6" onclick="getNum(6)"></td></tr><tr><td><input class="div2" type="button" value="1" onclick="getNum(1)"><input class="div2" type="button" value="2" onclick="getNum(2)"><input class="div2" type="button" value="3" onclick="getNum(3)"></td></tr><tr><td><input class="div3" type="button" value="0" onclick="getNum(0)"><input class="div2" type="button" value="." onclick="getNum('.')"></td></tr><tr><td><input class="div4" type="button" value="+" onclick="getNum('+')"><input class="div5" type="button" value="=" onclick="getResult()"></td></tr></tbody></table></div></body></span></html>

0 0