最终效果如下图-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. Android开发之广播

    广播是Android开发中的一个重要的功能,在Android里面有各式各样的广播,比如:电池的状态变化.信号的强弱状态.电话的接听和短信的接收等等,现在给大家简单介绍一下系统发送.监听这些广播的机制. ...

  2. 编译原理：正规式转变成DFA算法

    //将正规式转变成NFApackage hjzgg.formal_ceremony_to_dfa; import java.util.ArrayList; class Edge{ public int ...

  3. codeforces Gargari and Permutations(DAG+BFS)

    /* 题意:求出多个全排列的lcs! 思路:因为是全排列,所以每一行的每一个数字都不会重复,所以如果有每一个全排列的数字 i 都在数字 j的前面,那么i, j建立一条有向边! 最后用bfs遍历整个图, ...

  4. java中同步嵌套引起的死锁事例代码

    /* 目的:自己写一个由于同步嵌套引起的死锁! 思路:多个线程在执行时,某一时刻,0-Thread绑定了LockA锁,1-Thread绑定了LockB锁! 当0-Thread要去绑定LockB锁时 和 ...

  5. JS实现单击按钮后弹出新的窗口页面

    点击按钮后,弹出指定大小的页面窗口. 效果图: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  6. 利用Solr服务建立的站内搜索雏形---solr1

    最近看完nutch后总感觉像好好捯饬下solr,上次看到老大给我展现了下站内搜索我便久久不能忘怀.总觉着之前搭建的nutch配上solr还是有点呆板,在nutch爬取的时候就建立索引到solr服务下, ...

  7. javascript学习7

    JavaScript  Math(算数)对象 Math(算数)对象的作用是:执行常见的算数任务. 实例 round() 如何使用 round(). random() 如何使用 random() 来返回 ...

  8. html/css基础篇——DOM中关于脱离文档流的几种情况分析

    所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...

  9. Design Pattern: Observer Pattern

    1. Brief 一直对Observer Pattern和Pub/Sub Pattern有所混淆,下面打算通过这两篇Blog来梳理这两种模式.若有纰漏请大家指正. 2. Use Case 首先我们来面 ...

  10. 《ASP.NET SignalR系列》第四课 SignalR自托管(不用IIS)

    从现在开始相关文章请到: http://lko2o.com/moon 接着上一篇:<ASP.NET SignalR系列>第三课 SignalR的支持平台 一.概述 SignalR常常依托于 ...