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 操作文件 实现方法小结
Jul 02 Javascript
使用JavaScript switch case 另类写法
Mar 14 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
树结构之JavaScript
Jan 24 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 Javascript
javascript实现简单页面倒计时
Mar 02 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 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
python中__call__内置函数用法实例
2015/06/04 Python
基于python socketserver框架全面解析
2017/09/21 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
Django的Modelforms用法简介
2019/07/27 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
大学生工作求职信
2014/06/23 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技