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 相关文章推荐
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
javascript闭包的理解
Apr 01 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 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
php方法调用模式与函数调用模式简例
2011/09/20 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
python 整数越界问题详解
2019/06/27 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
美国牛仔品牌:True Religion
2018/11/16 全球购物
应届生体育教师自荐信
2013/10/03 职场文书
本科生求职简历的自我评价
2013/10/21 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
离婚协议书格式
2014/11/21 职场文书
小型婚礼主持词
2015/06/30 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers