计算器

最新推荐文章于 2024-05-08 13:15:46 发布
最新推荐文章于 2024-05-08 13:15:46 发布
阅读量270 收藏
点赞数
分类专栏： html js 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yzp3055506633/article/details/78113985
版权

用前端实现计算器

**原理**：利用中缀表达式转换后缀表达式来实现运算符的优先级
我这里就不啰嗦了,嘿嘿，大家很容易理解的,有兴趣可以去百度

**作用**: 正常的计算器功能，主要是加了挂号功能,嗯然后有个
记录功能来记录你计算的结果，右边的记录框里面的内容可拖动....

**心得**:js代码写的有点乱,自己都看不下去......没办法刚开始
接触js,不太习惯,我会尽量去注释....

效果:
这里写图片描述

这里写图片描述

页面代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .body{
            background-color: #999999;
        }
        #result{
            width: 350px;
            height: 300px;
            background-color: #F1F3F2;
            margin: auto;
            margin-top: 10px;
            overflow: hidden;
        }
        #caltextone,#caltexttwo{
            width: 350px;
            height:100px;
            font-size: 40px;
            text-align: right;
            line-height: 100px;
            overflow: hidden;
        }
        #relt{
            width: 340px;
            height:100px;
            font-size: 40px;
            text-align: right;
            line-height: 100px;
            overflow: hidden;
        }
        #coontent{
            width: 352px;
            height: 360px;
            background-color: #FAFBFD;
            margin: auto;
            box-sizing: border-box;

        }
        #coontent tr td{
            width: 88px;
            height:60px;
            border: 1px solid rgba(153, 153, 153, 0.22);
            text-align: center;
            line-height: 60px;
            font-size: 24px;
            font-family: "Arial Black";
            cursor: default;
        }
        #ac{
            color: #FB772F;
        }
        #sum{
            background-color: #FB772F;
        }
        #histiory,#closehistory{
            width: 100px;
            height:50px;

        }
        #histiory span{
            font-size: 24px;
            text-align: center;
            line-height: 50px;
        }
        #closehistory span{
            font-size: 24px;
            text-align: center;
            line-height: 50px;
        }
        #histiory{
            position: relative;
            top:-600px;
            left: 50px;
        }
        #closehistory{
            position: relative;
            top:-650px;
            left: 250px;
        }
        #histiory,#closehistory:hover{
            cursor: pointer;
        }
        #histiory span:hover{
              color: seagreen;
          }
        #closehistory span:hover{
            color: seagreen;
        }
        #writehis{
            width: 350px;
            height: 670px;
            background-color: #F1F3F2;
            position: absolute;
            right: 80px;
            top:10px;
            overflow: hidden;
            display: none;
        }
        #writehishow:hover{
            cursor: move;
        }
        #writehishow{
            width: 100%;
            list-style: none;
            font-size: 24px;
            text-align: right;
            position: absolute;
        }
        #writehisshow li{
            width: 100%;
            height: 30px;
            line-height: 30px;
        }
    </style>
    <script type="text/javascript" src="controlcalcu.js"></script>
</head>
<body class="body">
<div id="result">
    <p id="caltexttwo"></p>
    <p id="caltextone"></p>
    <p id="relt"></p>
</div>
<table id="coontent" cellpadding="0" cellspacing="0">
    <tr>
        <td  id="left">(</td>
        <td colspan="2">月月鸟</td>
        <td  id="right">)</td>
    </tr>
    <tr>
        <td id="ac">AC</td>
        <td id="fm">FM</td>
        <td id="divied">/</td>
        <td id="seq">*</td>
    </tr>
    <tr>
        <td id="seven">7</td>
        <td id="eight">8</td>
        <td id="nine">9</td>
        <td id="sub">-</td>
    </tr><tr>
        <td id="four">4</td>
        <td id="five">5</td>
        <td id="six">6</td>
        <td id="add">+</td>
    </tr><tr>
        <td id="one">1</td>
        <td id="two">2</td>
        <td id="three">3</td>
        <td id="sum" rowspan="2">=</td>
    </tr><tr>
        <td id="hud">%</td>
        <td id="zero">0</td>
        <td id="point">.</td>
</tr>
</table>
<div id="histiory"><span>历史记录</span></a></div>
<div id="closehistory"><span>清除记录</span></div>
<div id="writehis">
    <ul id="writehishow">
        <li>历史记录</li>
        <li></li>
    </ul>
</div>
</body>
</html>

js代码：

var caltext=[];
var calreplace=[];
var c=["","+","*","("];
var c1=[")","-","/"];
var stack1=[];
var stack2=[];
var stack3=[];
var stack4=[];
var flag=true;
window.onload=function () {
    var content = document.getElementById("coontent");
    var openhistory = document.getElementById("histiory");
    var closehistory = document.getElementById("closehistory");
     //控制打开记录的监听事件
    openhistory.onclick=function () {
        if(flag){
            var elementById = document.getElementById("writehis");
            elementById.style.display="block";
            flag=false;
        }else {
            var elementById = document.getElementById("writehis");
            elementById.style.display="none";
            flag=true;
        }
    }
    //清除记录的监听事件
    closehistory.onclick=function () {
        var elementById2 = document.getElementById("writehishow");
        var children = elementById2.children;
        console.log(children.length)
        while (children.length>1){
            elementById2.removeChild(children[children.length-1]);
        }
    }
    var oDiv = document.getElementById("writehishow");
     //实现记录拖动的效果
    oDiv.onmousedown=function(ev)
    {
        var oEvent = ev;
        var disX = oEvent.clientX - oDiv.offsetLeft;
        var disY = oEvent.clientY - oDiv.offsetTop;
        document.onmousemove=function (ev)
        {
            oEvent = ev;
            oDiv.style.left = oEvent.clientX -disX+"px";
            oDiv.style.top = oEvent.clientY -disY+"px";
        }
        document.onmouseup=function()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }

     //给各个按钮创建监听事件
    content.addEventListener("click",function (Event) {
        var target = Event.target;
        switch (target.id){
            case "ac":
                changeac();
                break;
            case "fm":
                subtext();
                break;
            case "left":
                addtext(target.innerHTML);
                break;
            case "right":
                addtext(target.innerHTML);
                break;
            case "divied":
                addtext(target.innerHTML);
                break;
            case "seq":
                addtext(target.innerHTML);
                break;
            case "sub":
                addtext(target.innerHTML);
                break;
            case "add":
                addtext(target.innerHTML);
                break;
            case "sum":
                addtext(target.innerHTML);
                caltext.pop();
                changecaltext();
                istrue();
                playcal();
                writehistory();
                break;
            case "point":
                addtext(target.innerHTML);
                break;
            case "one":
                addtext(target.innerHTML);
                break;
            case "two":
                addtext(target.innerHTML);
                break;
            case "three":
                addtext(target.innerHTML);
                break;
            case "four":
                addtext(target.innerHTML);
                break;
            case "five":
                addtext(target.innerHTML);
                break;
            case "six":
                addtext(target.innerHTML);
                break;
            case "seven":
                addtext(target.innerHTML);
                break;
            case "eight":
                addtext(target.innerHTML);
                break;
            case "nine":
                addtext(target.innerHTML);
                break;
            case "zero":
                addtext(target.innerHTML);
                break;
        }
    })
}
 //给输入框添加内容
function addtext(string) {
    if(caltext.length<=12){
        var elementById3 = document.getElementById("caltexttwo");
        elementById3.innerHTML="";
    }
    var elementById = document.getElementById("relt");
    elementById.innerHTML="";
    if(string=="/"||string=="*"||string=="-"||string=="+"){
        if(caltext[caltext.length-1]=="/"||caltext[caltext.length-1]=="*"||caltext[caltext.length-1]=="+"||caltext[caltext.length-1]=="-"){
            alert("非法输入.....");
            string=caltext[caltext.length-1];
            caltext.pop();
        }
    }
   caltext[caltext.length]=string;
    var length = caltext.length;
       if(length<=12){
           var elementById = document.getElementById("caltextone");
           var s="";
           for(var i=0; i<length; i++){
               s+=caltext[i];
           }
           elementById.innerText=s;
       }else {
           var s1="";
           var s2="";
           var elementById = document.getElementById("caltextone");
           var elementById2 = document.getElementById("caltexttwo");
           for(var l=length-12;l<length;l++){
               s1+=caltext[l];
           }
           for(var j=0;j<length-12;j++){
               s2+=caltext[j];
           }
           elementById2.innerText=s2;
           elementById.innerText=s1;

       }
}
function subtext() {
    var elementById = document.getElementById("relt");
    elementById.innerHTML="";
    caltext.pop();
    var length = caltext.length;
    if(length<=12){
        var elementById = document.getElementById("caltextone");
        var s="";
        for(var i=0; i<length; i++){
            s+=caltext[i];
        }
        elementById.innerText=s;
    }else {
        var s1="";
        var s2="";
        var elementById = document.getElementById("caltextone");
        var elementById2 = document.getElementById("caltexttwo");
        for(var l=length-12;l<length;l++){
            s1+=caltext[l];
        }
        for(var j=0;j<length-12;j++){
            s2+=caltext[j];
        }
        elementById2.innerText=s2;
        elementById.innerText=s1;

    }

}
 //实现AC功能清除之前的输入
function changeac() {
    caltext.splice(0,caltext.length);
    var elementById = document.getElementById("relt");
    elementById.innerHTML="";
    var elementById = document.getElementById("caltextone");
    var elementById2 = document.getElementById("caltexttwo");
    elementById2.innerText="";
    elementById.innerText="";
}

 //计算结果
function playcal() {
    for(var p=0; p<calreplace.length; p++){

        if(calreplace[p]=="/"||calreplace[p]=="*"||calreplace[p]=="+"||calreplace[p]=="-"||calreplace[p]=="("||calreplace[p]==")"){
            if(stack1.length==0){
                stack1[stack1.length]=calreplace[p];
            }else {
                if(getnum(calreplace[p])-getnum(stack1[stack1.length-1])>0){
                    stack1[stack1.length]=calreplace[p];
                }else {
                    while(true){
                        if(getnum(calreplace[p])-getnum(stack1[stack1.length-1])<=0){
                            if(getnum(stack1[stack1.length-1])-getnum(calreplace[p])==3){
                                stack1.pop();
                                break;
                            }else if(stack1[stack1.length-1]=="("){
                                stack1[stack1.length]=calreplace[p];
                                break;
                            }else {
                                stack2[stack2.length]=stack1.pop();
                            }

                        }
                        if(stack1.length==0){
                            stack1[stack1.length]=calreplace[p];
                            break;
                        }

                        if(getnum(calreplace[p])-getnum(stack1[stack1.length-1])>0){
                            stack1[stack1.length]=calreplace[p];
                            break;
                        }
                    }
                }
            }
        }else {
            stack2[stack2.length]=calreplace[p];
        }
    }
    if(stack1.length>0){
        while (stack1.length>0){
            stack2[stack2.length]=stack1.pop();
        }
    }
    while (stack2.length>0){
        var c = stack2.shift();
        if(c=="+"||c=="*"||c=="-"||c=="/"){
            var a = stack3.pop();
            var b = stack3.pop();
            stack3[stack3.length]=calcu(b,a,c);
        }else if(c=="(" || c==")"){

        }
        else {
            stack3[stack3.length]=c;
        }
    }
    var elementById = document.getElementById("relt");
    elementById.innerHTML=stack3.pop();

    caltext.splice(0,caltext.length);
    stack1.splice(0,caltext.length);
    stack2.splice(0,caltext.length);
    stack3.splice(0,caltext.length);
    calreplace.splice(0,calreplace.length);
}

 //对输入内容进行处理 输入的内容是 2,2,+,2,2 转换成22,+,22
function changecaltext() {
    var ss="";
    for (var i = 0,k=0; i < caltext.length;) {
        if (caltext[i] == "+" || caltext[i] == "-" || caltext[i] == "*" || caltext[i] == "/"|| caltext[i] == "("|| caltext[i] == ")") {
            calreplace[k] = caltext[i];
            k++;
            i++;
        } else {
            while (!(caltext[i] == "+" || caltext[i] == "-" || caltext[i] == "*" || caltext[i] == "/"|| caltext[i] == "("|| caltext[i] == ")")) {
                ss += caltext[i];
                i++;
                if (i == caltext.length)
                    break;
            }
            calreplace[k] = ss;
            ss = "";
            k++;
        }
    }
}
 //判断符号的优先级
function getnum(string) {
    for(var a=0; a<c.length; a++){
        if(string==c[a]){
            return a;
        }
    }
    for(var a=0; a<c1.length; a++){
        if(string==c1[a]){
            return a;
        }
    }
}
 //进行计算
function calcu(a,b,c) {
    var sum = 0.0;
    switch (c) {
        case "+":
            sum = a*1 + b*1;
            break;
        case "-":
            sum = a - b;
            break;
        case "/":
            sum = a / b;
            break;
        case "*":
            sum = a * b;
            break;
    }
    return sum;
}
 //判断输入的挂号是否成对匹配
function istrue() {
    var left=0;
    var right=0;
    for(var i=0; i<calreplace.length;i++){
        if(calreplace[i]=="("){
            left++;
        }
        if(calreplace[i]==")"){
            right++;
        }
    }
    if(!(right==left)){
        alert("输入有误...挂号少了..答案可能有误..");
    }
}

 //增加历史记录
function writehistory() {
    var element = document.createElement("li");
    var elementById = document.getElementById("writehishow");
    var elementById1 = document.getElementById("caltexttwo");
    var elementById2 = document.getElementById("caltextone");
    var elementById3 = document.getElementById("relt");
    var s=elementById1.innerHTML+elementById2.innerHTML+elementById3.innerHTML;
    element.innerHTML=s;
    elementById.appendChild(element);
}
月月鸟鸟月月
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
计算器计算器计算器计算器
04-17
计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器计算器...
JavaScript 计算器
allway2的博客
06-02 7046
在本教程中，我们将创建一个简单的JavaScript 计算器。该计算器能够对 2 个或 2 个以上的数字进行加减乘除。计算器可以成为日常生活中非常有用的应用程序。您可以使用计算器来计算您的购物账单、计算您的贷款、执行简单的数学计算等。一般来说，我们有两种类型的计算器，一种是科学计算器，另一种是简单计算器。科学计算器用于执行复杂的数学计算，如平方根、平方、立方、对数、三角函数等。而简单的计算器用于执行简单的数学计算，如加法、减法、乘法和除法。我们将在本文中使用 HTML、CSS 和 JavaScript 逐步
c#计算器
m0_65451009的博客
11-30 1893
C#计算器!
java 简易计算器
m0_56078449的博客
07-15 2万+
java 简易计算器
Android计算器实现
m0_72104085的博客
06-20 5909
这次项目中学习到如何在Android应用中实现计算器功能。如何在Activity中创建和管理视图。解如何使用XML布局文件来设计和布局界面。需要熟悉各种布局元素，如。学习到如何使用各种UI组件来实现用户交互。这包括如何使用等组件来输入和显示文本。在实现计算器功能时，你需要了解各种运算的规则和算法。这包括加法、减法、乘法和除法的基本原理，以及如何处理浮点数和括号等复杂表达式。可以掌握Android应用开发的基本概念，包括布局、事件处理和计算功能。这将在Android开发领域的进一步学习打下坚实的基础。
Java编写简单计算器--实现篇
热门推荐
weixin_50301255的博客
12-06 7万+
本文用Java的swing来实现一个简单计算器，主要内容为图形用户界面GUI的实现以及运算表达式核心算法的设计编写。 程序运行环境为Windows10 ，编译环境为MyEclipse 。 一、具体功能： 1、：输入，输出 1）、输入：允许输入带有括号的完整计算式（例 8*（4-95)+5÷2*e-pi） 2）、输出：输出Double类型的结果 3）、输出：整个运算表达式并保存于历史记录中
前端技术搭建一个有趣的计算器（内含源码）
官方推荐
07-24 3万+
通过前端基础HTML、CSS、JS来带领大家用几十行代码来实现了一个有趣的计算器功能；帮助更多前端小白来感受三件套的搭配使用
QT计算器
qq_44047806的博客
04-06 2796
QT计算机课程设计
计算器代码
qq_37931418的博客
07-11 3661
算法题 设计一个计算器啊
用python制作一个简易计算器
weixin_44853840的博客
05-22 2890
这是一个用Python制作简单计算器的教程。你可以根据需要进行更多的改进，例如添加其他运算符或功能。
c#实现计算器
m0_58520840的博客
04-16 7751
供学习参考,希望能大家一点点小小的帮助
.NET计算器
12-09
.NET计算器。
在线计算器
11-15
一个简单的在线计算器。 使用html+jquery-1.8.0做的一个简约在线计算器
招标计算器、工程计算器、监理费计算器
06-17
计算招标代理服务费、监理服务费、设计费、项目前期费、造价咨询费。
vue3中的reactive和ref
最新发布
weixin_43784341的博客
05-08 342
在Vue 3中，reactive和ref是两个常用的响应式API，用于创建响应式的数据。它们的主要区别在于reactive用于创建对象或数组的响应式引用，而ref用于创建单个值的响应式引用。下面我将分别介绍它们的详细用法，并提供代码示例。
50个前端实战项目之04：隐藏的搜索小组件
前端开发博客
05-03 1058
大家好，我是宝哥。今天讲50个前端实战项目之04：隐藏的搜索小组件。源码下载地址https://github.com/bradtraversy/50projects50days/tree/master/hidden-search前端实战项目系列正在更新：04/5001：可展开卡片02：进度条03：旋转导航动画04：隐藏的搜索小组件项目介绍本项目演示了一个简洁实用的隐藏式搜索小部件。点击搜索按钮后，...
uni框架下的前端小知识
weixin_53908842的博客
04-30 381
1、direction：移动方向，可选值为all、vertical、horizontal分别表示所有方向、垂直、水平方向。3、out-of-bunds：移动超出界限是的处理策略，可选值为fail, bounce,分别表示失败、回弹。9、 scale-value:缩放的值，当scale为true时有效。7、friction:摩擦系数，取值范围【0，100】6、damping:阻尼系数，取值范围【0，100】8、scale：缩放比例，取值范围【0.5，10】4、x:水平方向的移动距离，单位制px。
组件化开发&根组件
m0_74462339的博客
05-06 335
组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。好处：便于维护，利于复用，提升开发效率。
javafx 计算器
10-31
JavaFX计算器是一个基于JavaFX框架开发的计算器应用程序。它具有图形用户界面，能够实现基本的算术运算。 JavaFX是一个用于开发富客户端应用程序的框架，它可以让开发者使用Java编写跨平台的图形用户界面。因此，JavaFX计算器可以在不同的操作系统上运行，如Windows、Mac和Linux等。 JavaFX计算器的界面通常由数字按钮、运算符按钮和其他功能按钮构成。用户可以使用鼠标点击这些按钮来输入数字和进行运算。另外，用户还可以通过键盘输入数字和运算符来进行计算。 JavaFX计算器还拥有一套完整的计算逻辑，能够根据用户输入的数字和运算符进行实时计算，并将计算结果显示在界面上。这个计算逻辑通常由Java代码实现，可以进行加、减、乘、除等基本运算，同时还可以处理小数运算和括号运算等。 另外，JavaFX计算器通常还具有一些高级功能，如存储和读取计算结果、清除计算器界面、退格功能等。这些功能可以让用户更方便地进行计算。 总之，JavaFX计算器是一个基于JavaFX框架开发的计算器应用程序，具有图形用户界面和完整的计算逻辑，能够方便地进行基本的数学运算。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值