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学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
javascript操作cookie
Jan 17 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
对 Vue-Router 进行单元测试的方法
Nov 05 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简单计算页面加载时间的方法
2015/06/19 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
Python格式化压缩后的JS文件的方法
2015/03/05 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
python中random模块详解
2021/03/01 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
满月酒答谢词
2014/01/14 职场文书
服务员岗位职责
2014/01/29 职场文书
小学运动会报道稿
2014/10/04 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书