javascript实现简单计算器效果【推荐】


Posted in Javascript onApril 19, 2016

最终效果如下图-2,有bug:就是整数后点击%号结果正确,如果小数后面点击%的话结果就错误!其他都正常,求指点:input的value是string类型的,在JS中改如何正确处理下图-1中的if部分??

图-1

javascript实现简单计算器效果【推荐】

图-2

javascript实现简单计算器效果【推荐】

HTML代码如下

<body>
<div id="calculator">
  <div class="LOGO">
    <span class="name">简单的计算器</span>
    <span class="verson">@walker</span>
  </div>
  <div id="shuRu">
    <!--screen输入栏-->
    <div class="screen">
      <input type="text" id="screenName" name="screenName" class="screen">
    </div>
  </div>
  <div id="keys">
    <!-- j -->
    <!--第一排-->
    <input type="button" id="7" onclick="jsq(this.id)" value="7" class="buttons">
    <input type="button" id="8" onclick="jsq(this.id)" value="8" class="buttons">
    <input type="button" id="9" onclick="jsq(this.id)" value="9" class="buttons">
    <input type="button" id="Back" onclick="tuiGe()" value="Back" class="buttons">
    <input type="button" id="C" onclick="clearNum()" value="C" class="buttons" style="margin-right:0px">
    <!--第二排-->
    <input type="button" id="4" onclick="jsq(this.id)" value="4" class="buttons">
    <input type="button" id="5" onclick="jsq(this.id)" value="5" class="buttons">
    <input type="button" id="6" onclick="jsq(this.id)" value="6" class="buttons">
    <input type="button" id="*" onclick="jsq(this.id)" value="X" class="buttons">
    <input type="button" id="/" onclick="jsq(this.id)" value="/" class="buttons" style="margin-right:0px">
    <!--第三排-->
    <input type="button" id="1" onclick="jsq(this.id)" value="1" class="buttons">
    <input type="button" id="2" onclick="jsq(this.id)" value="2" class="buttons">
    <input type="button" id="3" onclick="jsq(this.id)" value="3" class="buttons">
    <input type="button" id="+" onclick="jsq(this.id)" value="+" class="buttons">
    <input type="button" id="-" onclick="jsq(this.id)" value="-" class="buttons" style="margin-right:0px">
    <!--第四排-->
    <input type="button" id="0" onclick="jsq(this.id)" value="0" class="buttons">
    <input type="button" id="00" onclick="jsq(this.id)" value="00" class="buttons">
    <input type="button" id="." onclick="jsq(this.id)" value="." class="buttons">
    <input type="button" id="%" onclick="jsq(this.id)" value="%" class="buttons">
    <input type="button" id="eva" onclick="eva()" value="=" class="buttons" style="margin-right:0px">
  </div>
  <div class="footer">
    <span class="aside">欢迎使用JavaScript计算器</span>
      <span class="link">
        <a href="#" title="声明" target="_blank">反馈</a>
      </span>
  </div>
</div>
</body>

CSS代码如下:

<style>
    /*Basic reset*/
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  font: 14px Arial,sans-serif;
}
html{
  height:100%;
  background-color:lightslategrey;
}

#calculator{
  margin: 15px auto;
  width:330px;
  height:400px;
  border: 1px solid lightgray;
  background-color:darkgrey;
  padding:15px;
}

/*LOGO*/
.LOGO{
  height:20px;

}
.LOGO .name{
  float:left;
  line-height:30px;
}
.LOGO .verson{
  float:right;
  line-height:30px;
}
/*screen*/
#shuRu{
  margin-top:15px;
}
.screen{
  margin-top:5px;
  width:300px;
  height:40px;
  text-align: right;
  padding-right:10px;
  font-size:20px;
}
#keys{
  border:1px solid lightgray;
  height:223px;
  margin-top:25px;
  padding:8px;
}
#keys .last{
  margin-right:0px;
}
.footer{
  margin-top:20px;
  height:20px;
}
.footer .link{
  float:right;
}

#keys .buttons{
  float:left;
  width: 42px;
  height: 36px;
  text-align:center;
  background-color:lightgray;
  margin: 0 17px 20px 0;
}
  </style>

javascript代码如下:

<script> 
    var num = 0; // 定义第一个输入的数据 
    function jsq(num) { 
      //获取当前输入 
      if(num=="%"){ 
        document.getElementById('screenName').value=Math.round(document.getElementById('screenName').value)/100; 
      }else{ 
        document.getElementById('screenName').value += document.getElementById(num).value; 
      } 
    } 
    function eva() { 
      //计算输入结果 
      document.getElementById("screenName").value = eval(document.getElementById("screenName").value); 
    } 
    function clearNum() { 
      //清0 
      document.getElementById("screenName").value = null; 
      document.getElementById("screenName").focus(); 
    } 
    function tuiGe() { 
      //退格 
      var arr = document.getElementById("screenName"); 
      arr.value = arr.value.substring(0, arr.value.length - 1); 
    } 
  </script>

以上这篇javascript实现简单计算器效果【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
根据地区不同显示时间的javascript代码
Aug 13 Javascript
js中的如何定位固定层的位置
Jun 15 Javascript
js字符串操作方法实例分析
May 06 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
javascript实现继承的简单实例
Jul 26 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 #Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 #Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 #Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 #Javascript
深入浅析JavaScript中的constructor
Apr 19 #Javascript
js点击返回跳转到指定页面实现过程
Aug 20 #Javascript
javascript html5摇一摇功能的实现
Apr 19 #Javascript
You might like
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
php中http与https跨域共享session的解决方法
2014/12/20 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
vuex的简单使用教程
2018/02/02 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
Python 通配符删除文件的实例
2018/04/24 Python
Python WSGI的深入理解
2018/08/01 Python
python绘制彩虹图
2019/12/16 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
Python3运算符常见用法分析
2020/02/14 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
大四学生找工作的自荐信
2014/03/27 职场文书
邓小平理论心得体会
2014/09/09 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书