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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
Javascript实现的鼠标经过时播放声音
May 18 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
js实现显示手机号码效果
Mar 09 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 Javascript
vue解决跨域问题(推荐)
Nov 10 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
php cookie的操作实现代码(登录)
2010/12/29 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
php常量详细解析
2015/10/27 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
jQuery bind事件使用详解
2011/05/05 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
Python 返回汉字的汉语拼音
2009/02/27 Python
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
python并发和异步编程实例
2018/11/15 Python
python实现按行分割文件
2019/07/22 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
Python Selenium库的基本使用教程
2021/01/04 Python
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
股份合作协议书范本
2014/04/14 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
超市开店计划书
2014/09/15 职场文书
2014年保管员工作总结
2014/11/18 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书