最终效果如下图-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. hibernate（六）一对一映射

    关系映射是指对象之间的关系,并不是指数据库的关系,关系映射是解决当对象处于以下关系之一时,数据库表该如何映射的问题 (一)一对一单向外键关联 1.注解方式配置 创建一个Husband类和Wife类 H ...

  2. jsp获得文件的绝对路径

    当前WEB应用的物理路径:<%=application.getRealPath("/")%>当前访问的JSP文件的物理路径:<%=application.getR ...

  3. Debugging WebLogic Server Applications Using Eclipse and the WebLogic-Plugin

    http://www.oracle.com/technetwork/cn/tutorials/eclipse-plugin-093411.html

  4. php操作mongodb中的ISODate格式日期

    mongodb 中数据记录的日期格式为"dateCreated" : ISODate("2011-12-20T07:22:50.836Z")经过翻阅php官网中 ...

  5. HTML5移动Web开发（六）——定义一个内容策略

    通过分析工具搜集到的数据,你可以定义一个内容策略,这对已经有了一个桌面网站的人是非常有用的. 1.确认你已经把分析工具的Javascript代码嵌入到网站中.(http://www.cnblogs.c ...

  6. Intention.js – 动态重构 HTML 为响应式模式

    Intention.js 提供一个轻量级的和明确的方式,帮助你动态重组 HTML,成为响应式的方式.操作方法都放在了元素自己里面,所以灵活的布局看起来就似乎不会那么的抽象和凌乱. 您可以轻松地增加布局 ...

  7. js单击输入框后弹出提示信息效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. MVC中的默认Model绑定者DefaultModelBinder

    一.题外话 接续上一篇: MVC中Action参数绑定的过程 public IModelBinder DefaultBinder { get { if (this._defaultBinder == ...

  9. IOS 字典快速转换为Model 模型

    一般情况下IOS得局部页面加载的过程是,创建一个Model然后,将Nib文件与Model进行关联,然后能够快速的获取到Nib文件上的控件实例.操作生成页面. 但是原生的内容是没有直接通过Json获取M ...

  10. SQL Server存储过程多角度介绍

    什么是存储过程: 存储过程(Procedure)类似于C#语言中的方法,它是SQL语句和控制流语句的预编译集合.存储过程存储在数据库内,可由应用程序通过一个调用执行,而且允许用户声明变量.逻辑控制语句 ...