成功进化到程序猿快一年多了, 还没写过计算器, 正好今天比较闲,随手写了个计算器,最简单的实现,核心是eval()方法,把字符串作为JS代码处理,把输入的信息拼接成字符串,点等号执行代码得到结果,出异常弹窗提示

只用了几十行JS代码,感觉还可以精简 ,  我是一只追求简洁的程序猿

 @author beiguapipi 1//存储算式
 var all="";
 //添加字符串到式子
 function add(obj){
     if(document.getElementById("jieguo").innerHTML){
         window.location.reload();
     }else{
         all = all+obj.value;
         document.getElementById("jisuan").innerHTML=all;
     }
 }
 //删除一个最后的字符
 function del(){
     if(all.length>0){
         all= all.substr(0 ,all.length-1)
         document.getElementById("jisuan").innerHTML=all;
     }
 }
 //计算
 function jisuan(){
     try{
         //将字符串作为JS代码处理
         var num = eval(all);
         if(isNaN(num)){
             //如果出异常了,新建异常信息
             var e = new Error();
             e.message="输入式子不合法";
             throw e;
         }else{
             if(num=="Infinity"||num=="-Infinity"){
                 alert("运算中分母不能为零")
                 window.location.reload();
             }else{
                 document.getElementById("jieguo").innerHTML=num;
             }
         }
     }catch(e){
         //输出异常信息,刷新页面
         alert(e)
         window.location.reload();
     }
 }　　　　
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单计算器</title>
<link type="text/css" rel="stylesheet" href="css.css">
<script type="text/javascript" src="control.js" charset="utf-8"></script>
</head>
<body>
<div id="body">
    <div id="title">
        <span id="sp">简单计算器</span>
    </div>
    <div id="area">
        <div id="top">
            <span id="jisuan"></span>
        </div>
        <div id="mid">
            计算结果:<span id="jieguo"></span>
        </div>
        <div id="button">
            <br>
            <input onclick="reflush()" id="clear"  class="but" type="button" value="清空">
            <input onclick="del()" id="del" class="but" type="button" value="退格">
            <input onclick="add(this)" class="but" type="button" value="/">
            <input onclick="add(this)" class="but" type="button" value="*"><br><br>
            <input onclick="add(this)" class="but" type="button" value="1">
            <input onclick="add(this)" class="but" type="button" value="2">
            <input onclick="add(this)" class="but" type="button" value="3">
            <input onclick="add(this)" class="but" type="button" value="-"><br><br>
            <input onclick="add(this)" class="but" type="button" value="4">
            <input onclick="add(this)" class="but" type="button" value="5">
            <input onclick="add(this)" class="but" type="button" value="6">
            <input onclick="add(this)" class="but" type="button" value="+"><br><br>
            <input onclick="add(this)" class="but" type="button" value="7">
            <input onclick="add(this)" class="but" type="button" value="8">
            <input onclick="add(this)" class="but" type="button" value="9"><br><br>
            <input onclick="add(this)" id="num_0" class="but" type="button" value="0">
            <input onclick="add(this)" class="but" type="button" value="."><br>
            <input onclick="jisuan()" id="num_deng" class="but" type="button" value="=">
            <input onclick="add(this)" class="but" type="button" value="(">
            <input onclick="add(this)" class="but" type="button" value=")">
        </div>
    </div>
</div>
</body>
</html>

CSS代码

@CHARSET "UTF-8";@CHARSET "UTF-8";
*{
    margin: 0px;
    padding: 0px;
}
#body{
    margin: auto;
    margin-top:10px;
    width: 450px;
    height: 600px;
    border: solid 5px rgb(241,241,241);
    background:rgb(255,255,225);
}
#title{
    width: 400px;
    height: 50px;
    position: relative;
    left:25%;
}

#sp{
    font-size: 1cm;
    font-style: oblique;
}
#area{
    width: 450px;
    height: 550px;
    border: solid 1px rgb(0,115,0);
    float: left;
}
#top{
    width: 400px;
    height: 35px;
    border: solid 3px rgb(200,225,225);
    float: left;
    position: relative;
    left:20px;
    top:15px;
    font-size: 25px;
    background-color: rgb(255,255,255)
}
#jisuan{
    float: right;
}
#mid{
    width: 400px;
    height: 35px;
    border: solid 3px rgb(200,225,225);
    float: left;
    position: relative;
    left:20px;
    top:30px;
    font-size: 25px;
    background-color: rgb(255,255,255)
}
#jieguo{
    width: 270px;
    height: 35px;
    border: solid 1px rgb(200,225,225);
    float: right;
}
#button{
    width: 400px;
    height: 400px;
    border: solid 3px rgb(200,225,225);
    float: left;
    position: relative;
    left:20px;
    top:50px;
}
.but{
    width: 90px;
    height: 45px;
    position: relative;
    left:10px;
}
#num_0{
    width: 187px;
}
#num_deng{
    height: 108px;
    position: relative;
    left:302px;
    top:-108px;
}
input{
    font-size: 25px;
}

JavaScript+HTML,简单的计算器实现的更多相关文章

  1. 用JavaScript制作简单的计算器

    <html > <head> <title>简单计算器</title> <style type="text/css"> ...

  2. jQuery/javascript实现简单网页计算器

    <html> <head> <meta charset="utf-8"> <title>jQuery实现</title> ...

  3. 利用css和javascript实现简单的计算器

    <!doctype html> <html> <head> <!--声明当前页面的编码集--> <meta http-equiv="Co ...

  4. JAVASCRIPT实现简单计算器

    最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分? ...

  5. javascript 简单的计算器

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  6. js制作简单的计算器

    学着做了一个简单的计算器!记录记录!哈哈 <!DOCTYPE html> <html> <head> <title>简单的计算器</title&g ...

  7. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

  8. Java简单公式计算器

    最近给公司开发业务代码时,碰到一个场景,简单描述是这样的: 客户要向咱们公司定制一件产品,这个产品呢,有很多属性,那公司得根据这些属性报价呀,怎么报价呢?公司针对某种类型的产品有一个基准价,在同类产品 ...

  9. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

随机推荐

  1. SQL表旋转

    在制作报表的时候,有时候会碰到基础资料是依照时间区间去一笔一笔记录的资料,但是使用者在看报表的时候想要将时间区间以横向的方式呈现不是直向的情况出现,又或者基础资料的表数据结构是横向的而使用者在看报表的 ...

  2. 浅谈HTTP中Get与Post的区别（转）

    Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...

  3. Devexpress DateEdit控件的值不反馈到数据源的处理方式。

    如果在GridControl中要把编辑的值反馈到数据源,可以用Gridview1.PostEdit()方法. 可是在datalayout中使用就会遇到一些问题:比如说DateEdit控件,在保存数据的 ...

  4. oracle分析函数与over()（转）

    文章参考:http://blog.csdn.net/haiross/article/details/15336313 -- Oracle分析函数入门-- 分析函数是什么? 分析函数是Oracle专门用 ...

  5. sqlserver查看所有的外键约束

    select a.name as 约束名, object_name(b.parent_object_id) as 外键表, d.name as 外键列, object_name(b.reference ...

  6. html input节点很多 json字符串提交解决方法

    遇到一个页面,38个input节点,页面前端写好的,不太容易改成 js框架 容易操作的样式,只能自己想办法一个一个id获取然后 setvalue getvalue(miniui): 38个一个一个写太 ...

  7. swift 命名,字符串

    命名: let  numberOfDogs = 6 +2; 字符串连接: let finishedMessage = username + "xx" + password; 字符串 ...

  8. Mysql EF Code First

    1.更新程序包EntityFramework->6.1.3 2.下载程序包MySql.Data.Entities(Ver:6.8.3) 3.修改config.cs或者web.config,包含以 ...

  9. hard

    硬盘电路板将信号转化为电压高低,电压控制电脉冲被送到磁头,产生一个电磁.磁盘和磁头很紧密.读写都是不断扫描磁盘的过程.有操作系统负责控制文件的组织,可能在不同的块中.

  10. PHP面试题之驼峰字符串转换成下划线样式例子

    自己在看到这个问题的时候,想到的是用ASCII码来处理,没往万能的正则上去想.好吧,下面来看看答案: 答案1: 代码如下 复制代码 $str = 'OpenAPI'; $length = mb_str ...