制作网页版简易计算器(Calculator)

原创 2017年08月12日 16:21:00

网页版计算器的制作比想象中要来的容易,界面上只需固定计算器面板的宽高和按钮的宽高即可。

先放张图:
这里写图片描述
代码下载与演示:https://codepen.io/yinyoupoet/pen/oeewWw

讲一下设计思路:
首先,将按键分成四种类型——数字与符号、等于、AC、CE。
Ans是保存上一次结果的,在这里点了没用。

  • 如果点了数字,就显示在上面的input text框(以下称输出框)内,并追加(append/+=)在一个字符串content中。
  • 如果点了AC,就把字符串content清空,也把输出框清空。
  • 如果点了CE,把字符串content清掉最后一个字符,并把输出框的值设置为content的值。
  • 如果点了=,就将计算结果显示在输出框,并将content清空。

    敲黑板!!如何计算呢?
    使用eval()函数,这个函数能够执行其中的js语句,如果可执行就执行并返回执行结果,如果不能执行就直接原语句返回。详细可以W3school,传送门

下面也放上源代码,供直接复制,代码还是蛮简单的。
html

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <meta charset="utf-8">
    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="main">
        <h1>YinyouCalculator</h1>
        <input type="text" name="number" readonly class="showAns">
        <div class="buttons">
            <button value="AC">AC</button>
            <button value="CE">CE</button>
            <button value="%">%</button>
            <button value="/">/</button>
            <button value="7">7</button>
            <button value="8">8</button>
            <button value="9">9</button>
            <button value="*">*</button>
            <button value="4">4</button>
            <button value="5">5</button>
            <button value="6">6</button>
            <button value="-">-</button>
            <button value="1">1</button>
            <button value="2">2</button>
            <button value="3">3</button>
            <button value="+">+</button>
            <button value=".">.</button>
            <button value="0">0</button>
            <button value="Ans">Ans</button>
            <button value="=">=</button>
        </div>
    </div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src="js/cal.js"></script>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    background-color: #cb4042;
}
.main{
    text-align: center;
    background-color: #b9887d;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    margin: auto;
    position: absolute;
    top: 200px;
    left: 200px;
    right: 200px;
    bottom: 200px;
} 

h1{
    font-size: 2em;
    color: #fff;
}

.showAns{
    width: 280px;
    margin: 0 auto;
    margin-bottom: 5px;
    border:solid 0px #fff;
    background-color: #f19483;
    padding: 3px 5px;
    text-align: right;
}

.buttons{
    width: 275px;
    margin: 0 auto; 
    padding: 7px;
}

button{
    margin-bottom: 7px;
    width: 62px;
    height: 40px;
    background-color: #f8c3cd;
    border-style: none;
    outline: none;
    color: #656765;
}

js

var ans = 0;
$(document).ready(function(){
    var counter="";     //记录输入的数据与结果的字符串
    $("button").on("click",function(){
        var text = $(this).attr('value');
        if(text !== 'AC' && text !== 'CE' && text !== 'Ans' && text !== '='){
            counter +=text;
            $(".showAns").val(counter);
        }
        else if(text === 'AC'){
            counter="";
            $(".showAns").val(counter);
        }else if(text ==='CE'){
            counter = counter.slice(0,-1);
            $(".showAns").val(counter);
        }else if(text === '='){
            ans = eval(counter);
            $(".showAns").val(ans);
            counter = "";
        }

    });

});




有不懂的地方欢迎加我QQ,点这里加好友 一起讨论——YinyouPoet

版权声明:本文为博主原创文章,未经博主允许不得转载。

javaweb作业制作网页版简易计算器(3种方式)

我写的这三种计算器第一种是使用的javascript的方法将加减乘除做成四个按钮,每个按钮都有一个onclick,调用javascript的一个方法,最后将值设置到结果框里就行了。第二种是利用表单提交...
  • qq_24473141
  • qq_24473141
  • 2016年04月12日 20:16
  • 10547

javaScript简单实例:实现一个简易计算器

javaScript简单实例:实现一个简易计算器**样式代码** body{ font-size:12px; font-family:Arial, ...
  • SUN_song520
  • SUN_song520
  • 2015年09月17日 20:55
  • 3717

javaweb作业制作网页版简易计算器(3种方式)

我写的这三种计算器第一种是使用的javascript的方法将加减乘除做成四个按钮,每个按钮都有一个onclick,调用javascript的一个方法,最后将值设置到结果框里就行了。第二种是利用表单提交...
  • qq_24473141
  • qq_24473141
  • 2016年04月12日 20:16
  • 10547

一个基于JavaScript的简单网页计算器

一个基于JavaScript的简单网页计算器,真的很简单。 效果如下: A simple Calculator .number{ ...
  • Youyou_0826
  • Youyou_0826
  • 2017年04月20日 14:26
  • 1209

运用swt制作一个简易计算器,附加关于html制作网页中的搜索框的一个小知识

学了那么久了,终于开始决定开始写博客。把每天的收获写出来,时间久了可能有些知识会忘了,这也是一个永久存储知识点的好地方。毕竟我的电脑有事没事出问题重装系统。今天没有上课,说说最近的收获吧。 帮学妹做了...
  • lsp199508
  • lsp199508
  • 2015年12月29日 00:07
  • 654

S2.高效制作网页.当当网完整版

  • 2015年08月23日 22:08
  • 945KB
  • 下载

简易版网页计算器js代码页面

var initData=""; var lastOp=""; var num1=""; var num2=""; var result = ""; /** 需求:获取数据 思路: ...
  • qq_30976301
  • qq_30976301
  • 2015年09月20日 21:42
  • 240

简易版网页计算器

需求: 通过用鼠标点击数字按钮和运算符按钮,实现现实中计算器的功能,能够做加减乘除及取余运算。并能够清零和取消上一次错误输入。 1、简单界面的实现:            首先建一个表单,在表单里插入...
  • u012716909
  • u012716909
  • 2015年09月11日 20:34
  • 373

JS版简易网页计算器

var num=""; var operator=""; var front=""; var back=""; function numsend(val){ var getnum=val.v...
  • arthur_d
  • arthur_d
  • 2011年10月05日 23:59
  • 646

简易计算器 calculator

  • 2008年09月13日 15:37
  • 2KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:制作网页版简易计算器(Calculator)
举报原因:
原因补充:

(最多只允许输入30个字)