最终效果如下图-2，有bug：就是整数后点击%号结果正确，如果小数后面点击%的话结果就错误！其他都正常，求指点：input的value是string类型的，在JS中改如何正确处理下图-1中的if部分？？

图-1

图-2

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:;

    padding:;

    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实现简单计算器的更多相关文章

  1. 学习笔记之javascript编写简单计算器

      感觉自己的的实力真的是有待提高,在编写计算器的过程中,出现了各种各样的问题,暴露了自己的基础不扎实,逻辑思维能力不够,学得知识不能运用到自己的demo中区.先介绍一些这个这个计算器的整体思路.大致 ...

  2. JavaScript —— 实现简单计算器【带有 开/关机 清零 退格 功能】

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. JavaScript+HTML,简单的计算器实现

    成功进化到程序猿快一年多了, 还没写过计算器, 正好今天比较闲,随手写了个计算器,最简单的实现,核心是eval()方法,把字符串作为JS代码处理,把输入的信息拼接成字符串,点等号执行代码得到结果,出异 ...

  4. 用JavaScript制作简单的计算器

    <html > <head> <title>简单计算器</title> <style type="text/css"> ...

  5. Ext实现简单计算器

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!少帅的博客 使用Ext实现简单计算器,网页版实现 1.页面部分calculator. ...

  6. 1.C#WinForm基础制作简单计算器

    利用c#语言编写简单计算器: 核心知识点: MessageBox.Show(Convert.ToString(comboBox1.SelectedIndex));//下拉序号 MessageBox.S ...

  7. 菜鸟学Android编程——简单计算器《一》

    菜鸟瞎搞,高手莫进 本人菜鸟一枚,最近在学Android编程,网上看了一些视频教程,于是想着平时手机上的计算器应该很简单,自己何不尝试着做一个呢? 于是就冒冒失失的开撸了. 简单计算器嘛,功能当然很少 ...

  8. PAT 06-1 简单计算器

    想看一般简单计算器实现的看客不好意思了,这不是你想要点东西,此处题设为“只能进行加减乘除”.“都是整数”.”优先级相同“和"从左到右".此题来自PAT(http://www.pat ...

  9. php大力力 [005节] php大力力简单计算器001

    2015-08-22 php大力力005. php大力力简单计算器001: 上网看视频,看了半天,敲击代码,如下: <html> <head> <title>简单计 ...

随机推荐

  1. MIME参考列表

    定义 MIME(multipurpose internet mail extensions)多用途互联网邮件扩展类型是描述消息内容类型的因特网标准.MIME消息能包含文本.图像.音频.视频以及其他应用 ...

  2. Docker之Linux UnionFS

    UnionFS UnionFS是一种为Linux,FreeBSD和NetBSD操作系统设计的把其他文件系统联合到一个联合挂载点的文件系统服务.它使用branch把不同文件系统的文件和目录"透 ...

  3. 构建自己的PHP框架--抽象Controller的基类

    上一篇博客中,我们将简单的路由解析和执行,从入口文件public/index.php中移入到框架中.入口文件顿时变得清爽无比-- 但是,去我们的controller里看一下,会看到如下的code: p ...

  4. c#文本控件实现换行

    要让一个Windows Form的C# TextBox换行显示多行文本就得把它的Multiline属性设置为true. 这个大家都知道,可是当你要在代码中为Text属性设置多行文本的时候可能会遇到点麻 ...

  5. Spring学习总结（一）——Spring实现IoC的多种方式

    控制反转IoC(Inversion of Control),是一种设计思想,DI(依赖注入)是实现IoC的一种方法,也有人认为DI只是IoC的另一种说法.没有IoC的程序中我们使用面向对象编程对象的创 ...

  6. Android基于mAppWidget实现手绘地图（十一）–移动地图到某个坐标

    你可以使用以下几个方法: MapWidget.scrollMapTo(android.location.Location location); MapWidget.scrollMapTo(androi ...

  7. zmNgFrameWork 架构升级ng1.5和md5静态资源缓存方案【angular1.x】

    前言: 在我前面的博客,angular项目总结——angular + browserify + gulp + bower + less 架构分享  把我开发angular的架构进行了分享,并上传到了g ...

  8. 对比MFC资源文件谈谈WPF布局方式

    对比MFC资源文件谈谈WPF布局方式 MFC方式 对于传统的MFC基于UI的应用程序设计通常分两步走,首先是设计UI,使用的是RC文件,然后是代码文件,对RC文件进行操作,如下面Figure 1 的基 ...

  9. php版本历史

    php最初就是为了快速构建一个web页面而迅速被大家广为接受的.它的好处是在代码中能内嵌html的代码,从而让程序员能再一个页面中同时写html代码和php代码就能生成一个web页面. 这篇文章用时间 ...

  10. 地图定位IOS8之后的定位

    从ios8开始,苹果进一步加强了对用户隐私的保护. 当app想要访问用户的隐私信息时  系统不再自动弹出一个对话框让用户授权 解决方法: (1)调用ios8.0的API 主动请求用户授权 - (voi ...