最终效果如下图-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. C#多线程之旅(4)——APM初探

    源码地址:https://github.com/Jackson0714/Threads 原文地址:C#多线程之旅(4)——APM初探 C#多线程之旅目录: C#多线程之旅(1)——介绍和基本概念 C# ...

  2. JSP网站开发基础总结《二》

    有了上一篇的学习,我相信大家对于JSP一定有了一定的认识,从今天开始我们真正开启JSP模式,如果你有HTML的基础,那学起JSP来也就方便了很多了,首先JSP做为网站开发语言,它与HTML有很多相似的 ...

  3. Html标签之frameset&图片切换

    今天为大家分享一下刚刚总结好的html经验,以备不时之需. 首先介绍一下frameset标签,此标签用于同一页面内切换网页,在大多数网页中都可以看到,因为项目的需要,故而研究一二. frameset标 ...

  4. C#薪水和前途

    这1,2年有更新简历,一直在看市场行情,最近这么多年在聊C#的薪水,我也说说我看到的情况,只限上海: 仅供大家参考: 高端职位: 纯技术,不谈管理, 一般是架构师职位,偶尔可能需要带团队, 猎头有报了 ...

  5. Apache+MySQL+PHP开发环境的搭建（二）

    通过自主选择相应的apache,mysql,php等软件,根据自己的应用开发需求进行安装.此方法搭建的环境自主性较强,搭建过程较为复杂,繁琐. 1.所需软件: Apache: http-2.2.22- ...

  6. 对于MVC中应用百度富文本编辑器问题的解决办法

    1.对于应用富文本编辑器post提交表单内容提示有危险的解决办法: [ValidateInput(false)] //文本编辑器的表单提交不用提示危险 [HttpPost] public Action ...

  7. 关于Entity Framework中的Attached报错的完美解决方案

    我们在使用Entity Framework进行CRUD时,为了提升查询效率,一般均会启动NoTracking,即不追踪变化,设置代码如下: //这是DB First模式下设置方法: aTestEnti ...

  8. Java Lambda表达式初探

    Java Lambda表达式初探 前言 本文受启发于Trisha Gee在JavaOne 2016的主题演讲Refactoring to Java 8. Java 8已经发行两年多,但很多人仍然在使用 ...

  9. 从零开始学习jQuery (一) 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

  10. 九个Console命令，让js调试更简单

    一.显示信息的命令 最常用的就是console.log了. 二.占位符 console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s).整数(%d或%i).浮点数(%f)和对象( ...