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

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

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

CSS代码

  1. @CHARSET "UTF-8";@CHARSET "UTF-8";
  2. *{
  3. margin: 0px;
  4. padding: 0px;
  5. }
  6. #body{
  7. margin: auto;
  8. margin-top:10px;
  9. width: 450px;
  10. height: 600px;
  11. border: solid 5px rgb(241,241,241);
  12. background:rgb(255,255,225);
  13. }
  14. #title{
  15. width: 400px;
  16. height: 50px;
  17. position: relative;
  18. left:25%;
  19. }
  20.  
  21. #sp{
  22. font-size: 1cm;
  23. font-style: oblique;
  24. }
  25. #area{
  26. width: 450px;
  27. height: 550px;
  28. border: solid 1px rgb(0,115,0);
  29. float: left;
  30. }
  31. #top{
  32. width: 400px;
  33. height: 35px;
  34. border: solid 3px rgb(200,225,225);
  35. float: left;
  36. position: relative;
  37. left:20px;
  38. top:15px;
  39. font-size: 25px;
  40. background-color: rgb(255,255,255)
  41. }
  42. #jisuan{
  43. float: right;
  44. }
  45. #mid{
  46. width: 400px;
  47. height: 35px;
  48. border: solid 3px rgb(200,225,225);
  49. float: left;
  50. position: relative;
  51. left:20px;
  52. top:30px;
  53. font-size: 25px;
  54. background-color: rgb(255,255,255)
  55. }
  56. #jieguo{
  57. width: 270px;
  58. height: 35px;
  59. border: solid 1px rgb(200,225,225);
  60. float: right;
  61. }
  62. #button{
  63. width: 400px;
  64. height: 400px;
  65. border: solid 3px rgb(200,225,225);
  66. float: left;
  67. position: relative;
  68. left:20px;
  69. top:50px;
  70. }
  71. .but{
  72. width: 90px;
  73. height: 45px;
  74. position: relative;
  75. left:10px;
  76. }
  77. #num_0{
  78. width: 187px;
  79. }
  80. #num_deng{
  81. height: 108px;
  82. position: relative;
  83. left:302px;
  84. top:-108px;
  85. }
  86. input{
  87. font-size: 25px;
  88. }

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. activeMq 消费者整合spring

    package com.mq.consumer; import javax.jms.JMSException;import javax.jms.Message;import javax.jms.Mes ...

  2. Emmet 使用说明。

    Emmet for Sublime Text Official Emmet plugin for Sublime Text. How to install Available actions Exte ...

  3. 012 VS2013常用快捷键

    2016-01-28 1.回到上一个光标位置/前进到下一个光标位置  1)回到上一个光标位置:使用组合键“Ctrl + -”: 2)前进到下一个光标位置:“Ctrl + Shift + - ”. 2. ...

  4. JAVA第四周作业

    import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream; ...

  5. [Python]logging模块使用basicConfig后记录日志重复问题

    logging.basicConfig配置日志记录到文件A后,再使用logging.FileHandler生成记录到文件B的logger 在使用此logger记录日志时,会同时记录的文件A和文件B,感 ...

  6. 数据导出到excel

    jsp页面: 数据table: <form action="/export.jsp" method="post" id="expform&quo ...

  7. 使用vs2010创建MFC C++ Ribbon程序

    Your First MFC C++ Ribbon Application with Visual Studio 2010 Earlier this month, I put together my ...

  8. hdu 2066

    ps:我天...之前看了迪杰斯特拉..现在这题要用到floyd..就是先建一个图,然后从列开始遍历,每列里遍历行,行又对应每列... 从A列开始遍历每行,比如遍历到B,这时候B->A知道是2,接 ...

  9. Java集合与算法

    梗概: 集合接口 集合实现(链表.数组列表.散列集.树集.队列与双端队列.映射表) 集合与数组之间的转换 算法(排序.二分查找). 文章链接: http://mp.weixin.qq.com/s?__ ...

  10. CoreJava学习笔记1-基本概念、对象和类

    一.    java的基本程序设计结构 (一)   java共有8种基本类型:4种整型,2种浮点类型,1种char,1种boolean. 1)       4种整型:byte(1).short(2). ...