基于javascript实现简单计算器功能

本文实例为大家介绍javascript实现简单计算器功能的详细代码，分享给大家供大家参考，具体内容如下

效果图：

实现代码：

<html>
  <head>
    <script>
      function calc(event){
        // test
        //window.alert(event.value);
        var val = new String(event.value);
        // clear space
        val = val.trim();
        var res = document.getElementById("res");
        // clear
        if(val == "clear"){
          res.value = "";
        } 

        // back
        if(val == "back"){
          res.value = res.value.substring(0, res.value.length - 1);
        } 

        // power
        if(val == "power"){
          val = "p";
        }
        // add val to text
        if(val.length == 1 && val != "="){
          res.value = res.value + val;
        } 

        // calc result
        if(val == "="){
          var arr;
          var result;
          // power
          if(res.value.indexOf("p") != -1){
            arr = res.value.split("p");
            //window.alert(arr);
             result = Math.pow(parseFloat(arr[0]) ,parseFloat(arr[1]));
            //window.alert(res);
            res.value = result;
          }
          // plus
          if(res.value.indexOf("+") != -1){
            arr = res.value.split("+");
            //window.alert(arr);
             result = parseFloat(arr[0]) + parseFloat(arr[1]);
            //window.alert(res);
            res.value = result;
          } else if(res.value.indexOf("-") != -1){
            // minus
            arr = res.value.split("-");
            //window.alert(arr);
            result = parseFloat(arr[0]) - parseFloat(arr[1]);
            //window.alert(res);
            res.value = result;
          } else if(res.value.indexOf("*") != -1){
            // multiply
            arr = res.value.split("*");
            //window.alert(arr);
            result = parseFloat(arr[0]) * parseFloat(arr[1]);
            //window.alert(res);
            res.value = result;
          } else if(res.value.indexOf("/") != -1){
            // division
            arr = res.value.split("/");
            //window.alert(arr);
            result = parseFloat(arr[0]) / parseFloat(arr[1]);
            //window.alert(res);
            res.value = result;
          } else if(res.value.indexOf("%") != -1){
            // module
            arr = res.value.split("%");
            //window.alert(arr);
            result = parseFloat(arr[0]) % parseFloat(arr[1]);
            //window.alert(res);
            res.value = result;
          }
        }
      }
    </script>
  </head>
  <body>
    <table border="1px" cellpadding="10px" cellspacing="5px" align="center">
      <tr align="center">
        <td colspan="4"><input type="text" id="res" size="35px" value="" style="text-align:right;"/></td>
      </tr>
      <tr align="center">
        <td><input type="button" value="power" onclick="calc(this)"/></td>
        <td><input type="button" value="clear" onclick="calc(this)"/></td>
        <td colspan="2"><input type="button" value="   back   " onclick="calc(this)"/></td>
      </tr>
      <tr align="center">
        <td><input type="button" value="  1  " onclick="calc(this)"/></td>
        <td><input type="button" value="  2  " onclick="calc(this)"/></td>
        <td><input type="button" value="  3  " onclick="calc(this)"/></td>
        <td><input type="button" value="  +  " onclick="calc(this)"/></td>
      </tr>
      <tr align="center">
        <td><input type="button" value="  4  " onclick="calc(this)"/></td>
        <td><input type="button" value="  5  " onclick="calc(this)"/></td>
        <td><input type="button" value="  6  " onclick="calc(this)"/></td>
        <td><input type="button" value="  -  " onclick="calc(this)"/></td>
      </tr>
      <tr align="center">
        <td><input type="button" value="  7  " onclick="calc(this)"/></td>
        <td><input type="button" value="  8  " onclick="calc(this)"/></td>
        <td><input type="button" value="  9  " onclick="calc(this)"/></td>
        <td><input type="button" value="  *  " onclick="calc(this)"/></td>
      </tr>
      <tr align="center">
        <td><input type="button" value="  0  " onclick="calc(this)"/></td>
        <td><input type="button" value="  =  " onclick="calc(this)"/></td>
        <td><input type="button" value="  %  " onclick="calc(this)"/></td>
        <td><input type="button" value="  /  " onclick="calc(this)"/></td>
      </tr>
    </table>
  </body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

赞 (0)

相关推荐

  • 基于JSP实现一个简单计算器的方法

    本文实例讲述了基于JSP实现一个简单计算器的方法.分享给大家供大家参考.具体实现方法如下: index.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>  <%  String path = request.getContextPath();  String basePath = request.getSch

  • js的表单操作 简单计算器

    js的表单操作 简单计算器

    代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

  • javascript简单计算器 可美化

    JS计算器代码: javascript简单计算器 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 说明: JavaScript eval() 函数 定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 返回值 通过计算 string 得到的值(如果有的话). 说明 该方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回.因此请不要为 eval() 函数传递 String 对象来作为参数. 如果试图

  • JS简单计算器实例

    本文实例讲述了JS简单计算器的实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml">  <head>      <title></title>      <script type="text/javascript">          function sum() {              //js

  • js当月水电气简单计算器

    function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.hre

  • js实现简单计算器

    js实现简单计算器

    参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入框加入默认显示为0的时候,选择数据输入时,该0会显示输入数字的前面,例如"0123",由于能力有限,待后续实力提升再来补充完善! 2:目前只能实现鼠标控制选择按钮,待完善键盘录入功能. 3:乘法的那个符号在本来想改成"×"这个符号的,待后续完善. 附图片一张: html

  • javascript实现简单计算器效果【推荐】

    javascript实现简单计算器效果【推荐】

    最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分?? 图-1 图-2 HTML代码如下 <body> <div id="calculator"> <div class="LOGO"> <span class="name">简单的计算器</span

  • Javascript 实现简单计算器实例代码

    Javascript 实现简单计算器实例代码

    效果图: 刚开始做时没考虑到清零和退格两个功能,嘻嘻,后来加的整体与传统计算器比有点小瑕疵. 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js简单计算器</title> <style type="text/css"> *{ margin:0px; padding:0px; } input{ margi

  • 使用JavaScript 编写简单计算器

    本文方法超级简单,思路非常的值得推荐,小伙伴们参考下吧 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      <title>javascript 简单计算器</title>     <script>     

  • 纯js代码实现简单计算器

    纯js代码实现简单计算器

    本文实例分享了纯js代码实现简单计算器代码,相信大家会喜欢.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title> new document </title> <script type="text/javascript"> function count(){ var txt1 = parseInt( document.getElementById(

随机推荐