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 相关文章推荐
jquery 操作DOM的基本用法分享
Apr 05 Javascript
UI Events 用户界面事件
Jun 27 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
JavaScript中闭包的写法和作用详解
Jun 29 Javascript
Augularjs-起步详解
Jul 08 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
React Native实现进度条弹框的示例代码
Jul 17 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 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正则校验用户名介绍
2008/07/19 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
php微信开发接入
2016/08/27 PHP
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python使用matplotlib绘制折线图教程
2017/02/08 Python
关于Django外键赋值问题详解
2017/08/13 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
几道Java和数据库的面试题
2013/05/30 面试题
社区母亲节活动方案
2014/03/05 职场文书
同志主要表现材料
2014/08/21 职场文书
社区两委对照检查材料
2014/08/23 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
技术员岗位职责范本
2015/04/11 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript