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 相关文章推荐
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 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表单提交与$_POST实例分析
2015/01/26 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
NumPy排序的实现
2020/01/21 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
采购主管的岗位职责
2013/12/17 职场文书
《学会待客》教学反思
2014/02/22 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android