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的超简单上下翻
Apr 20 Javascript
TBCompressor js代码压缩
Jan 05 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
JS防抖和节流实例解析
Sep 24 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
php中curl和file_get_content的区别
2014/05/10 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
python安装oracle扩展及数据库连接方法
2017/02/21 Python
Python实现自动访问网页的例子
2020/02/21 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
初二学习计划书范文
2014/04/27 职场文书
教师党员承诺书2015
2015/01/21 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
python简单验证码识别的实现过程
2021/06/20 Python
总结Python连接CS2000的详细步骤
2021/06/23 Python
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
前端JavaScript大管家 package.json
2021/11/02 Javascript
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang
springboot读取resources下文件的方式详解
2022/06/21 Java/Android