JavaScript制作简易计算器(不用eval)


Posted in Javascript onFebruary 05, 2017

本文实例为大家分享了js制作简易计算器的具体代码,供大家参考,具体内容如下

<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style type="text/css">
  * {
   padding: 0;
   margin: 0;
  }
  li {
   list-style: none;
  }
  body {
   background: #940032;
  }

  #counter {
   width: 500px;
   height: 420px;
   background: #939;
   margin: 50px auto 0;
   position: relative;
  }

  #counter h2 {
   line-height: 42px;
   padding-left: 15px;
   font-size: 14px;
   font-family: arial;
   color: #ff3333;
  }

  #counter a {
   font-weight: normal;
   text-decoration: none;
   color: #ff3333;
  }

  #counter a:hover {
   text-decoration: underline;
  }

  #bg {
   width: 280px;
   height: 200px;
   border: 3px solid #680023;
   background: #990033;
   filter: alpha(opacity=80);
   opacity: 0.8;
   position: absolute;
   left: 50%;
   top: 115px;
   margin-left: -141px;
  }

  #counter_content {
   width: 250px;
   position: absolute;
   top: 130px;
   left: 130px;
   z-index: 1;
  }

  #counter_content h3 {
   margin-bottom: 10px;
  }

  #counter_content h3 input {
   border: none;
   width: 223px;
   height: 30px;
   line-height: 30px;
   padding: 0 10px;
   background: url(img/ico.png) no-repeat;
   text-align: right;
   color: #333;
   font-size: 14px;
   font-weight: bold;
  }

  #counter_content div {
   width: 250px;
  }

  #counter_content input {
   width: 60px;
   height: 30px;
   line-height: 30px;
   float: left;
   background: url(img/ico.png) no-repeat -303px 0;
   text-align: center;
   color: #fff;
   cursor: pointer;
   margin: 0 1px 4px 0;
   border: 0;
  }

  #counter_content div > input:hover {
   background: url(img/ico.png) no-repeat -243px 0;
  }

  #counter p {
   width: 500px;
   position: absolute;
   bottom: 20px;
   left: 0;
   color: #ff3333;
   text-align: center;
   font-size: 12px;
  }
 </style>
</head>
<body>
<div id="counter">
 <h2>简易计算</h2>
 <div id="counter_content">
  <h3><input id="input1" type="text" value="0"/></h3>
  <div id="div1">
   <input type="button" value="7" onclick="kick('7')"/>
   <input type="button" value="8" onclick="kick('8')"/>
   <input type="button" value="9" onclick="kick('9')"/>
   <input type="button" value="+" onclick="kick('+')"/>
   <input type="button" value="4" onclick="kick('4')"/>
   <input type="button" value="5" onclick="kick('5')"/>
   <input type="button" value="6" onclick="kick('6')"/>
   <input type="button" value="-" onclick="kick('-')"/>
   <input type="button" value="1" onclick="kick('1')"/>
   <input type="button" value="2" onclick="kick('2')"/>
   <input type="button" value="3" onclick="kick('3')"/>
   <input type="button" value="*" onclick="kick('*')"/>
   <input type="button" value="0" onclick="kick('0')"/>
   <input type="button" value="C" onclick="kick('C')"/>
   <input type="button" value="=" onclick="kick('=')"/>
   <input type="button" value="/" onclick="kick('/')"/>
  </div>
 </div>
</div>
</body>
<script>
 var showInput = document.getElementById("input1");
 var isClear = false;
 var tempStr = "";
 var clacType = "";
 var isContinue = true;
 function kick(clickValue) {
  switch (clickValue) {
   case "=":
    if (tempStr != "" && clacType != "") {
     showInput.value = clac(tempStr, showInput.value, clacType);
     isContinue = false;
     clacType = "";
    }
    break;
   case "+":
   case "-":
   case "*":
   case "/":
    //如果预存的操作符不为空 表示表示连续操作
    if (clacType != "" && !isContinue) { //先执行计算
     tempStr = clac(tempStr, showInput.value, clacType);
     isClear = true;
     clacType = clickValue;
    } else {
     tempStr = showInput.value; //点击操作符之后 预存字符
     isClear = true;//表示点击了操作符
     clacType = clickValue;//预存操作符
    }
    isContinue = true;
    break;
   case "C":
    showInput.value = "0";
    isClear = false;
    tempStr = "";
    clacType = "";
    break;
   default://普通的数字按钮点击
    showInput.value = showInput.value == "0" ? "" : showInput.value;
    isContinue = false;
    if (isClear) {
     showInput.value = "";
     showInput.value += clickValue;
     isClear = false;
    } else {
     showInput.value += clickValue;
    }
    break;
  }
 }


 function clac(num1, num2, type) {
  switch (type) {
   case "+":
    return Number(num1) + Number(num2);
   case "-":
    return Number(num1) - Number(num2);
   case "*":
    return Number(num1) * Number(num2);
   case "/":
    return Number(num1) / Number(num2);
   default:
    break;
  }
  }
 </script>

关于计算器的精彩文章请查看《计算器专题》 ,更多精彩等你来发现!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
JavaScript 应用技巧集合[推荐]
Aug 30 Javascript
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
javascript 闭包
Sep 15 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 Javascript
flexslider.js实现移动端轮播
Feb 05 #Javascript
简单实现js悬浮导航效果
Feb 05 #Javascript
用js制作淘宝放大镜效果
Oct 28 #Javascript
js实现百度搜索提示框
Feb 05 #Javascript
jQuery.Form上传文件操作
Feb 05 #Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 #Javascript
用jquery的attr方法实现图片切换效果
Feb 05 #Javascript
You might like
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
js资料toString 方法
2007/03/13 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
js定时器实例分享
2016/12/20 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
当当网软件测试笔试题
2015/11/24 面试题
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
医学生个人求职信范文
2013/09/24 职场文书
中医药大学市场营销专业自荐信
2013/09/29 职场文书
导游实习生自荐书
2014/01/28 职场文书
化妆品店促销方案
2014/02/24 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers