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 相关文章推荐
prototype class详解
Sep 07 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
jQuery的一些特性和用法整理小结
Jan 13 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
js实现圆盘记速表
Aug 03 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
详解用async/await来处理异步
Aug 28 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
php UTF8 文件的签名问题
2009/10/30 PHP
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
JQuery select标签操作代码段
2010/05/16 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
Python中使用partial改变方法默认参数实例
2015/04/28 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Django的信号机制详解
2017/05/05 Python
Python 字符串池化的前提
2020/07/03 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
python 获取计算机的网卡信息
2021/02/18 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
优秀信贷员先进事迹
2014/01/31 职场文书
cf搞笑广告词
2014/03/14 职场文书
林肯就职演讲稿
2014/05/19 职场文书
开除通知书范本
2015/04/25 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server