最终效果如下图-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. javascript类型系统——Math对象

    × 目录 [1]常量 [2]函数 前面的话 javascript使用算术运算符实现基本的算术运算,如果要实现更加复杂的算术运算,需要通过Math对象定义的常量和函数来实现.和其他对象不同,Math只是 ...

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

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

  3. java向mysql数据库插入数据显示乱码的问题

    在做一个java web工程时,有时会碰到在向数据库添加数据库时,结果出现乱码”???“的问题.针对该问题的主要解决办法就是: 一.确保是否添加了字符集过滤器: 在java web工程中的web.xm ...

  4. 开发高效的Tag标签系统数据库设计

    需求背景 目前主流的博客系统.CMS都会有一个TAG标签系统,不仅可以让内容链接的结构化增强,而且可以让文章根据Tag来区分.相比传统老式的Keyword模式,这种Tag模式可以单独的设计一个Map的 ...

  5. Hadoop官方文档翻译——MapReduce Tutorial

    MapReduce Tutorial(个人指导) Purpose(目的) Prerequisites(必备条件) Overview(综述) Inputs and Outputs(输入输出) MapRe ...

  6. 12个来自 Codrops 的创新交互和动画效果

    产品的用户体验是否被用户所接受,很大一部分取决于交互界面的设计,交互界面设计是整个产品设计中的核心,对于产品品质有着决定性的影响.这里集合了12个来自 Codrops 的创新的界面交互和动画效果,值得 ...

  7. 补充$.extend()

    这里多谢某童鞋的提醒!说我的上篇随笔jquery插件开发的方式一还还可用于合并参数和深clone,虽然方式二中用了方式一做参数合并,但并未详细介绍,所以今天在此处做点补充! 一.合并参数 jquery ...

  8. 【Java基础】枚举和注解

    在Java1.5版本中,引入了两个类型:枚举类型enum type和注解类型annotation type. Num1:用enum代替int常量 枚举类型enum type是指由一组固定的常量组成合法 ...

  9. JS网页顶部弹出可关闭广告图层

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

  10. [Java 基础]字符串

    String类 实例化String对象 String 对象初始化方式有多种. 如下代码中,各种初始化方式的效果是一样的,初始化后,String 对象的内容为 "hello" . p ...