基于HTML CSS JS Django Mysql 实现的前后端分离的科学计算器 和 利率计算器

最新推荐文章于 2024-04-12 10:32:21 发布
最新推荐文章于 2024-04-12 10:32:21 发布
阅读量609 收藏
点赞数
文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65967988/article/details/133978139
版权

项目介绍及gitcode地址

本次作业实现的功能有 全部的基础功能和附加功能

前端修改利率表 和 科学计算 

 以及扩展功能： 鼠标停浮按钮，动态网页背景，等等

这个作业属于哪个课程< 2301-计算机学院-软件工程>
这个作业要求在哪里< 软工实践第二次作业>
这个作业的目标< 实现一个科学计算器具备的基本功能，并且UI设计较美观 >
gitcode地址102101436郑择杭 / calculator · GitCode

PSP表格

PSPPersonal Software Process Stages预估耗时（分钟）实际耗时（分钟）
Planning计划3040
• Estimate• 估计这个任务需要多少时间2520
Development开发11501200
• Analysis• 需求分析 (包括学习新技术）120200
• Design Spec• 生成设计文档6535
• Design Review• 设计复审2525
• Coding Standard• 代码规范 (为目前的开发制定合适的规范)3535
• Design• 具体设计6535
• Coding• 具体编码610720
• Code Review• Code Review6565
• Test• 测试（自我测试，修改代码，提交修改）200150
Reporting报告190195
• Test Report• 测试报告12565
• Size Measurement• 计算工作量1515
• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划5550
合计13701435

项目展示

-- 科学计算器

1. 初始界面

有动态背景和浮动按钮

2. 四则运算、取余以及清零AC 和 回退DEL

展示最基本的四则运算和取余功能，以及计算机常见的 AC 和 DEL 功能

3. 错误提示 Error

当用户输入不当，在后台计算错误时会返回Error

4. 读取历史记录Ans

有时用户需要退回之前的计算，需要读取历史记录

5. 科学计算

在后台用python的math库实现了科学计算

--利率计算器

        1. 初始界面

点击左上方按钮可以切换为 存款 / 贷款 两种计算方式

2. 计算

根据选中的 贷款 / 存款，在后台进行相应的计算

3. 利率表修改

可以点击右下角的修改按钮，对后台数据库进行修改。修改后会有弹窗提示。

pycharm数据库可视化

数据库使用的是mysql，在mysql 中用SQL语句创建完数据库和表后，用django相应代码可以进行数据库操作同步，在pycharm中可以进行数据库可视化

记录计算器的计算式子，答案和计算精确日期的表cal_record

 存款利率表 deposit

贷款利率表 loan

代码展示

前端代码

templates文件下保存着所有html文件，static文件夹下保存着css,js文件

计算器

下面是计算器的代码，其中css,js,以及其他视频，图片资源在static文件夹下

 --html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="static/modify.css">
</head>

<body>
    <video autoplay muted loop class="bg_fixed">
        <source src="static\video\peaceful.mp4" type="video/mp4" />
    </video>
    <form action="calculate" class="console">
        <div class="screen">
            <div class="minor"></div>
            <div class="main"></div>
        </div>
        <table class="science">
            <tr>
                <td>
                    <div>sin</div>
                </td>
                <td>
                    <div>cos</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>tan</div>
                </td>
                <td>
                    <div>Sqrt</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>Exp</div>
                </td>
                <td>
                    <div>ln</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>!</div>
                </td>
                <td>
                    <div>^</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>π</div>
                </td>
                <td>
                    <div>e</div>
                </td>
            </tr>
        </table>
        <table class="base">
            <tr>
                <td>
                    <div>(</div>
                </td>
                <td>
                    <div>)</div>
                </td>
                <td>
                    <div>%</div>
                </td>
                <td>
                    <div>+</div>
                </td>
                <td>
                    <div>AC</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>7</div>
                </td>
                <td>
                    <div>8</div>
                </td>
                <td>
                    <div>9</div>
                </td>
                <td>
                    <div>-</div>
                </td>
                <td>
                    <div>DEL</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>4</div>
                </td>
                <td>
                    <div>5</div>
                </td>
                <td>
                    <div>6</div>
                </td>
                <td>
                    <div>*</div>
                </td>
                <td rowspan="2">
                    <div>ANS</div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>1</div>
                </td>
                <td>
                    <div>2</div>
                </td>
                <td>
                    <div>3</div>
                </td>
                <td>
                    <div>/</div>
                </td>

            </tr>
            <tr>
                <td>
                    <div>00</div>
                </td>
                <td>
                    <div>0</div>
                </td>
                <td>
                    <div>.</div>
                </td>
                <td colspan="2">
                    <div>=</div>
                </td>

            </tr>
        </table>
    </form>
</body>


<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="static/control.js"></script>
<!--<script src="E:\IT_way\Python_home\django\web\static\jquery.js"></script>-->

</html>

--css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    border-radius: 20px;
}

.console {
    /* pos */
    width: 635px;
    height: 530px;
    margin: 50px auto;
    padding: 20px;
    /* att */
    border-radius: 5%;
    background-color: rgba(46, 44, 44, .8);
    /* txt */
}

.screen {
    /* pos */
    margin-bottom: 20px;
    /* att */
    border-radius: 10px;
    height: 100px;
    background-color: rgba(153, 208, 219, 0.7);
    /* txt */
}

.screen .minor,
.screen .main {
    text-align: right;
}

.screen .minor {
    height: 40px;
    font-size: 20px;
    font-weight: 400;
    line-height: 40px;
    overflow: hidden;
}

.screen .main {
    height: 60px;
    font-size: 40px;
    font-weight: 600;
    line-height: 60px;
    overflow: hidden;
}

.science {
    /* pos */
    float: left;
    /* att */
    border-radius: 20px 0 0 20px;
    height: 360px;
    width: 170px;
    background-color: rgba(170, 174, 178, .7);
    /* background: transparent url(image.jpg) repeat-y fixed top; */
    /* background: url(imgs/stars2.png) no-repeat fixed; */
    /* txt */
}

.base {
    /* pos */
    float: left;
    /* att */
    border-radius: 0 20px 20px 0;
    height: 360px;
    width: 425px;
    background-color: rgba(205, 210, 216, .7);
    /* background: url(imgs/stars2.png) no-repeat fixed; */
    /* txt */
}

.base td div,
.science td div {
    /* pos */
    margin: 6px;
    height: 60px;
    width: 70px;
    /* att */
    /* display: inline-block; */
    background-color: rgba(255, 255, 255, .5);
    /* 背景色 */
    box-shadow: 6rpx 6rpx 12px 6rpx rgba(0, 0, 0, .8);
    /* 高斯滤镜 */
    /* txt */
    text-align: center;
    line-height: 60px;
    font-size: 28px;
    font-weight: 600;
}

.base td div:hover,
.science td div:hover {
    box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, .3);
    transition: all 0.3s;
    cursor: pointer;
}

.base td div:active,
.science td div:active {
    background-color: rgb(119, 114, 114);
    transition: none;
}

.base tr:nth-child(3) td:nth-child(5) div {
    height: 130px;
    line-height: 130px;
}

.base tr:nth-child(5) td:nth-child(4) div {
    width: 150px;
}

.bg_fixed {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    transition: 1s opacity;
}

--js

///
let addEvent = function(arr, output) {
    arr.forEach((ele, index, cop) => {

        ele.addEventListener('click', () => {
            if (specify.includes(ele.innerHTML)) {
                switch (ele.innerHTML) {
                    case 'AC':
                        output.children[0].innerHTML = '';
                        output.children[1].innerHTML = '';
                        break;

                    case 'DEL':
                        if (output.children[1].innerHTML != '') {
                            output.children[1].innerHTML = output.children[1].innerHTML.slice(0, -1)
                        }

                        break;

                    case 'ANS':
                        console.log('ANS')
                        $.ajax({
                            url: '/record',
                            type: 'get',
                            // data: {
                            //     formula: output.children[1].innerHTML
                            // },
                            success: (response) => {
                                console.log(response.data);
                                output.children[0].innerHTML = response.data[0] + '='
                                output.children[1].innerHTML = response.data[1]

                            },
                            error: (response) => {
                                output.children[1].innerHTML = 'ERROR'
                            }
                        })
                        break;

                    case '=':
                        $.ajax({
                            url: '/calculate',
                            type: 'get',
                            data: {
                                formula: output.children[1].innerHTML
                            },
                            success: (response) => {
                                console.log(response);
                                output.children[0].innerHTML = output.children[1].innerHTML + '='
                                ans = response.ans
                                if (ans.length > 24) {

                                    ans = 'The Answer is Too Large'
                                }
                                output.children[1].innerHTML = ans
                            },
                            error: (response) => {
                                output.children[1].innerHTML = 'ERROR'
                            }
                        })
                        break;

                }

                return;
            }
            output.children[1].innerHTML += ele.innerHTML;
            if (scienceOpes.includes(ele.innerHTML))
                output.children[1].innerHTML += '(';
        })

    });

}

let btns = []

let specify = ['AC', 'DEL', '=', 'ANS']
let scienceOpes = ['sin', 'cos', 'tan', 'Sqrt', 'Exp', 'ln']

let btn_sci = document.querySelectorAll('.science div')
let btn_base = document.querySelectorAll('.base div')
let screen = document.querySelector('.screen')
screen.children[1].innerHTML = 'Sqrt(5)'
addEvent(btn_sci, screen)
addEvent(btn_base, screen)

接下去是利率计算器的代码

--html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="static\interest.css">
</head>

<body>
    <video autoplay muted loop class="bg_fixed">

        <source src="static\video\peaceful.mp4" type="video/mp4" />
    </video>
    <div class="cover bg_fixed"></div>
    <div class="main-body">
        <form class="mainBlock">
            <div class="label">存款</div>
            <div class="labelHidden">贷款</div>
            <div class="title">利率计算器</div>
            <div class="money"><input type="number" name="money" id="money" placeholder="金额"></div>
            <!--金额-->
            <div class="time"><input type="number" name="time" id="time" placeholder="时长"></div>
            <!--时长-->
            <div class="interest"></div>
            <div class="btns">
                <div class="submit">提交</div>
                <div class="modify">查看 / 修改利率表</div>
                <div class="confirm">确认修改</div>
                <div class="cancel">取消修改</div>
            </div>
            <table class="loan">
                <tbody>
                </tbody>
            </table>
            <table class="deposit">
                <tbody>
                </tbody>
            </table>
            <!-- 利率 -->
        </form>
    </div>
</body>

<script src="static\interest.js"></script>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

</html>

--css

* {
    outline: none;
    /* box-sizing: border-box; */
}

input,
.submit,
.interest,
.modify,
.confirm,
.cancel {
    outline: 0;
    border: 0;
    border-radius: 20px;
    padding-left: 20px;
    box-shadow: 2px 2px 8px #065EAF;
}

.mainBlock {
    /* pos */
    margin: 80px auto;
    padding-top: 10px;
    /* att */
    width: 400px;
    height: 500px;   /* 800 */
    background-color: rgba(255, 255, 255, 0.8);
    position: relative;
    /* display: inline-block; */
    border-radius: 20px;
    border-top-left-radius: 0;
}

.label,
.labelHidden {
    /* pos */
    position: absolute;
    top: -50px;
    /* att */
    height: 50px;
    width: 120px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px 10px 0 0;
    /* txt */
    font-size: 28px;
    line-height: 50px;
    text-indent: 25px;
    color: #065EAF;
}

.label::after {
    position: absolute;
    right: 5px;
    content: '>';
}

.labelHidden {
    /* pos */
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    /* att */
    transition: all, .3s;
    border-radius: 0 0 10px 10px;
    border-top: 2px dotted #065EAF;
    display: none;
    height: 50px;
    width: 120px;
    background-color: whitesmoke;
    content: '贷款';
}

.label:hover::after {
    /* transform: translate(); */
    /*transition: all .1s;*/
    transform-origin: 72% 50%;
    transform: rotate(90deg);
}


/* 
.label::before:hover {
    display: inline-block;
} */

.label:active,
.labelHidden:active {
    transition: none;
    color: whitesmoke;
    background-color: #065EAF;
}

.title {
    /* pos */
    margin: 15px auto;
    position: relative;
    padding-top: 10px;
    /* att */
    height: 60px;
    width: 100%;
    /* background: rgb(198, 197, 197); */
    /* txt */
    font-size: 30px;
    text-align: center;
    font-weight: 700;
    line-height: 50px;
    color: #065EAF;
    box-shadow: 0 6px 8px #065EAF;
}

#money,
#time {
    /* pos */
    margin-left: 80px;
    margin-top: 20px;
    /* att */
    height: 40px;
    width: 250px;
    /* txt */
    font-size: 20px;
    font-weight: 400;
    line-height: 18px;
}

#money:placeholder-shown,
#time:placeholder-shown {
    font-size: 20px;
    font-weight: 300;
    line-height: 22px;
}

.money,
.time {
    position: relative;
    display: inline-block;
}

.money:hover,
.time:hover,
.interest:hover,
.submit:hover,
.modify:hover,
.confirm:hover,
.cancel:hover {
    transition: all .3s;
    transform: scale(1.005);
}

.submit:hover,
.modify:hover,
.confirm:hover,
.cancel:hover {
    transform: scale(1.05);
}

.money::before,
.time::before {
    /* pos */
    position: absolute;
    left: 20px;
    top: 22px;
    /* att */
    transition: none;
    content: '';
    width: 60px;
    height: 30px;
    /* background-color: aquamarine; */
    /* txt */
    font-size: 26px;
    color: #065EAF;
    font-weight: 500;
    /* line-height: 30; */
}

.money::before:hover,
.time::before:hover {
    transition: none;
    border-right: 1px solid #065EAF;
}

.money::before {
    content: '金额';
}

.time::before {
    content: '时长';
}

.interest {
    /* pos */
    position: relative;
    margin-top: 30px;
    margin-left: 75px;
    padding-left: 20px;
    /* att */
    width: 280px;
    height: 50px;
    background-color: white;
    /* txt */
    font-weight: 500;
    font-size: 28px;
    line-height: 50px;
}

.interest::before {
    /* pos */
    position: absolute;
    left: -65px;
    top: -2px;
    /* att */
    content: '利率';
    /* txt */
    color: #065EAF;
}

.bg_fixed {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    transition: 1s opacity;
}

.cover {
    background-color: rgba(244, 236, 236, 0.1);
    /* min-width: 50%; */
}

.submit,
.modify,
.confirm,
.cancel {
    /* pos */
    display: inline-block;
    /* att */
    background-color: #065EAF;
    height: 50px;
    width: 220px;
    /* txt */
    padding: 0;
    margin-left: 15px;
    color: whitesmoke;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    line-height: 50px;
}
.btns {
    margin-top: 50px;
    margin-bottom: 20px;
}

.submit:active,
.modify:active,
.confirm:active,
.cancel:active {
    transition: none;
    background-color: whitesmoke;
    color: #065EAF;
}
.submit{
    width: 130px;
}

.deposit,
.loan {
    /* pos */
    display: block;
    margin: 0 auto;
    /* att */
    width: 300px;
    /* txt */
    color: #065EAF;
    font-size: 22px;
    text-align: left;
}

.deposit input,
.loan input {
    width: 100px;
    height: 30px;
    font-size: 16px;
}

.deposit tr td:first-child,
.loan tr td:first-child {
    width: 170px;
}

.deposit tr td,
.loan tr td {
    display: inline-block;
    height: 45px;
}

.deposit tr:hover div,
.loan tr:hover div,
.deposit tr:hover div,
.loan tr:hover div {
    border-bottom: 2px solid #065EAF;
}

.deposit {
    display: none;
}

.loan {
    display: none;
}

.confirm,
.cancel {
    width: 100px;
    display: none;
}

--js


// label
let label = document.querySelector('.label');
let labelHidden = document.querySelector('.labelHidden');
labelHidden.style.display = 'none';

label.addEventListener('click', () => {
    if (labelHidden.style.display == 'none')
        labelHidden.style.display = 'inline-block';
    else
        labelHidden.style.display = 'none';
})

labelHidden.addEventListener('click', () => {
    let innerHtml = label.innerHTML;
    label.innerHTML = labelHidden.innerHTML;
    labelHidden.innerHTML = innerHtml;

    labelHidden.style.display = 'none';
})

labelHidden.addEventListener('mouseout', () => {
    labelHidden.style.display = 'none';
})

//  change the table
// let current_label = label.innerHTML;
let modify_btn = document.querySelector('.modify');
let deposit = document.querySelector('.deposit');
let loan = document.querySelector('.loan');

let confirm = document.querySelector('.confirm');
let cancel = document.querySelector('.cancel');
let mainBlock = document.querySelector('.mainBlock');
let submit = document.querySelector('.submit');

// ajax
modify_btn.addEventListener('click', () => {
    let current_label = label.innerHTML;
    let u = '/deposit';
    if (current_label === '贷款') u = '/loan';
      $.ajax({
            url: u,
            type: 'get',
            // data: {
            //     contents
            // },
            success: (response) => {
                current_label = label.innerHTML;
                modify_btn.style.display = 'none';
                confirm.style.display = 'inline-block';
                cancel.style.display = 'inline-block';

                let change

                if (current_label === '存款') {
                    deposit.style.display = 'block';
                    loan.style.display = 'none';
                    change = deposit.children[0];
                }
                if (current_label === '贷款') {
                    loan.style.display = 'block';
                    deposit.style.display = 'none';
                    change = loan.children[0];
                }
                let length = String(47*Object.keys(response).length+500) + 'px'
                console.log(length)
                mainBlock.style.height = length;
                ///  manage the database
                change.innerHTML = ''
                for (let key in response){
                    change.innerHTML += "  <tr>\n" +
                        "                    <td>\n" +
                        "                        <div>"+ key + "</div>\n" +
                        "                    </td>\n" +
                        "                    <td>\n" +
                        "                        <input type=\"number\"value="+response[key] + " >\n" +
                        "                    </td>\n" +
                        "                </tr> "
                }


            },
            error: (response) => {
                alert('DATABASE ERROR');
            }
        })

})

let vanish = function (){
    deposit.children[0].innerHTML = ''
    loan.children[0].innerHTML = ''

    deposit.style.display = 'none';
    loan.style.display = 'none';
    confirm.style.display = 'none';
    cancel.style.display = 'none';
    modify_btn.style.display = 'inline-block';
    mainBlock.style.height = '500px';
}

confirm.addEventListener('click', () => {
    let u = '/modify'
    let current_label = label.innerHTML;
    let change = deposit.children[0]
    if (label.innerHTML === '贷款')
        change = loan.children[0]

    let data = {}

    for(let tr_id =0; tr_id<(change.children.length); tr_id++){
        let tr = change.children[tr_id]
        let td0 = tr.children[0]
        let td1 = tr.children[1]
        let key =td0.children[0].innerHTML;
        let value =td1.children[0].value;

        data[td0.children[0].innerHTML] = td1.children[0].value;
    }
    console.log(data)

    let change_table = 'deposit'
    if (current_label === '贷款')
        change_table = 'loan'

    data['table'] = change_table
    $.ajax({
            url: u,
            type: 'get',
            data: data,
            success: (response) => {
                if(response.flag === 1){
                    alert('修改成功');
                }
                else{
                    alert('MODIFY ERROR');
                }
            },
            error: (response) => {
                alert('DATABASE ERROR');
            }
        })
    vanish();
})

cancel.addEventListener('click', vanish)

submit.addEventListener('click', ()=>{
    let money = document.querySelector('.money input').value;
    let time = document.querySelector('.time input').value;
    let u = '/interestCal';
    let table_name = 'deposit'
    if(label.innerHTML === '贷款')
        table_name = 'loan';

     $.ajax({
            url: u,
            type: 'get',
            data: {
                'money': money,
                'time': time,
                'table': table_name
            },
            success: (response) => {
                document.querySelector('.interest').innerHTML = response.data
            },
            error: (response) => {
                alert('DATABASE ERROR');
            }
        })
})

后端代码

接下去是后端代码，数据库的调用以及计算器的逻辑实现都在后端进行

计算器的逻辑代码：利用正则表达式提取前端输入式子，转化成由数字和操作符组成的列表后，利用数字栈和操作符栈进行相应的计算，并对科学计算符，阶层等科学计算进行额外的处理

--计算器的代码逻辑

import math
import re
from math import *

science_opes = ['sin', 'cos', 'tan', 'Sqrt', 'Exp', 'ln']


def factorial(num):

    if num <= 0:
        return 0
    return num if num == 1 else num * factorial(num-1)


def formula_format(formula):
    """
    :param formula: str
    """
    formula = re.sub(' ', '', formula)  # delete spaces
    #
    # \- : matches the begin; \d+ matches the number；\.? matches '.' for once or none;\d*
    formula_list = [i for i in re.split('(-[\d+,π,e]\.?\d*)', formula) if i]

    final_formula = []  #
    for item in formula_list:
        # 算式以横杠开头，则第一个数字为负数，横杠为负号
        if len(final_formula) == 0 and re.match('-[\d+,π,e]\.?\d*$', item):
            final_formula.append(item)
            continue
        # 如果当前的算式列表最后一个元素是运算符['+', '-', '*', '/', '('， '%'， '^'], 则横杠为减号
        if len(final_formula) > 0:
            if re.match('[\+\-\*\/\(\%\^]$', final_formula[-1]):
                final_formula.append(item)
                continue
        # 按照运算符分割开
        item_split = [i for i in re.split('([\+\-\*\/\(\)\%\^\!])', item) if i]
        final_formula += item_split
    return final_formula


def is_operator(ele):
    """
    :param e: str
    :return: bool
    """
    opes = ['+', '-', '*', '/', '(', ')', '%', '^', 'sin', 'cos', 'tan', 'Sqrt', 'Exp', 'ln', '!']
    return True if ele in opes else False


# 比较连续两个运算符来判断是压栈还是弹栈
def decision(tail_op, now_op):
    """
    :param tail_op: last element of stack_op
    :param now_op: current operation from formula
    :return: 1 means pop, 0 means pop last '(' in the stack_op, -1 means push
    """
    # 定义4种运算符级别
    rate1 = ['+', '-']
    rate2 = ['*', '/', '%']
    rate3 = ['sin', 'cos', 'tan', 'Sqrt', 'Exp', 'ln', '!', '^']
    rate4 = ['(']
    rate5 = [')']

    if tail_op in rate1:
        if now_op in rate2 or now_op in rate3 or now_op in rate4:
            return -1  # current operator is at a higher rate, need to push
        else:
            return 1  # the rate of the two opes are equal, need to calculate

    elif tail_op in rate2:
        if now_op in rate3 or now_op in rate4:
            return -1
        else:
            return 1

    elif tail_op in rate3:
        if now_op in rate4:
            return -1
        else:
            return 1

    elif tail_op in rate4:
        if now_op in rate5:
            return 0  # '('遇上')',需要弹出'('并丢掉')',表明该括号内的算式已计算完成并将结果压入数字栈中
        else:
            return -1  # 只要栈顶元素为'('且当前元素不是')'，都应压入栈中


# 传入两个数字，一个运算符，根据运算符不同返回相应结果
def cal(n1, n2, operator):
    """
    :param n1: float
    :param n2: float
    :param operator: + - * / % ^
    :return: float
    """
    result = 0
    if operator == '+':
        result = n1 + n2
    if operator == '-':
        result = n1 - n2
    if operator == '*':
        result = n1 * n2
    if operator == '/':
        result = n1 / n2
    if operator == '%':
        result = n1 % n2
    if operator == '^':
        result = n1 ** n2

    return result


def scienceOpe(op_stack, num_stack):
    # science_opes = ['sin', 'cos', 'tan', 'Sqrt', 'Exp', 'ln']
    if len(op_stack) == 0 or op_stack[-1] not in science_opes:
        return
    op = op_stack.pop()
    num = num_stack.pop()
    if op == 'Sqrt':
        num_stack.append(sqrt(num))
    elif op == 'sin':
        num_stack.append(sin(num))
    elif op == 'cos':
        num_stack.append(cos(num))
    elif op == 'tan':
        num_stack.append(tan(num))
    elif op == 'Exp':
        num_stack.append(exp(num))
    elif op == 'ln':
        num_stack.append(log(num))


# 负责遍历算式列表中的字符，决定压入数字栈中或压入运算符栈中或弹栈运算
def final_calc(formula_list):
    """
    :param formula_list: 算式列表
    :return: 计算结果
    """
    num_stack = []  # 数字栈
    op_stack = []  # 运算符栈
    for item in formula_list:
        operator = is_operator(item)
        # if it's the number
        if not operator:
            # transfer π and e into a value that could be calculated
            if item == 'π':
                num_stack.append(pi)
            elif item == '-π':
                num_stack.append(-pi)
            elif item == 'e':
                num_stack.append(e)
            elif item == '-e':
                num_stack.append(-e)
            else:
                num_stack.append(float(item))  # 字符串转换为浮点数

        # if it's the operator
        else:
            while True:
                if item == '!':
                    num_stack.append(factorial(int(num_stack.pop())))
                    break
                # if length of operator_stack is empty, push it into the stack without other conditions
                if len(op_stack) == 0:
                    op_stack.append(item)
                    break
                # else compare the priority with last operator
                tag = decision(op_stack[-1], item)

                # if -1, just push it into the stack and break
                if tag == -1:
                    op_stack.append(item)
                    break

                # if 0, pop last '(' and drop current')'
                elif tag == 0:
                    op_stack.pop()
                    scienceOpe(op_stack, num_stack)  # scienceOperations before '('
                    break

                # if 1, we need to pop last operator
                # 如果是1，则弹出运算符栈内最后一个元素和数字栈内最后两个元素
                elif tag == 1:
                    if item in science_opes:
                        op_stack.append(item)
                        break

                    op = op_stack.pop()
                    num2 = num_stack.pop()
                    num1 = num_stack.pop()

                    # 将计算结果压入数字栈并接着循环，直到遇到break跳出循环
                    num_stack.append(cal(num1, num2, op))
    # 大循环结束后，数字栈和运算符栈中可能还有元素的情况
    while len(op_stack) != 0:
        op = op_stack.pop()
        num2 = num_stack.pop()
        num1 = num_stack.pop() if len(num_stack) > 0 else None
        num_stack.append(cal(num1, num2, op))
    result = str(num_stack[0])
    # 去掉无效的0和小数点，例：1.0转换为1
    if result[len(result) - 1] == '0' and result[len(result) - 2] == '.':
        result = result[0:-2]
    return result


def calculate(formula):
    formula_list = formula_format(formula)
    return final_calc(formula_list)

--利率计算器的代码逻辑

register_deposit = {
    '三个月': lambda x: x == 0.25,
    '半年': lambda x: x == 0.5,
    '一年': lambda x: x == 1,
    '两年': lambda x: x == 2,
    '三年': lambda x: x == 3,
    '五年': lambda x: x == 5,

}
register_loan = {
    '半年以下': lambda x: x < 0.5,
    '半年至一年': lambda x: .5 <= x < 1.,
    '一至三年': lambda x: 1. <= x < 3.,
    '三至五年': lambda x: 3. <= x < 5.,
    '五年以上': lambda x: .5 <= x,
}


def interestCalculate(money: float,
                      time: float,
                      table_dict: dict,
                      table_name: str):

    register = register_deposit if table_name == 'deposit' else register_loan

    for limitation, judge in register.items():
        if judge(time):  # corresponding limitation
            rate = table_dict[limitation]
            money *= rate
            return money * time
    if table_name == 'deposit':
        money *= table_dict['活期']
        return money * time

心得体会

  • 首先就是技术问题了，这次作业实在是发的有点突然，因为之前只有过一些基本的前端知识和python编程知识，制作过静态网页，没学过前后端交互的相关知识
  • 然后就是一礼拜速成前后端知识，先学会大致的框架应用，交互代码等基础知识，一点一点去实现每个功能，然后碰到不会的再去借助互联网，以及求助大佬
  • 在这次开发过程中狠狠体会到了一个完整的前后端应用是怎么开发出来的，熟悉了开发的流程，包括开发前的整体计划，开发时候进行需求分析，生成设计文档，实现需求的具体编码，以及开发完成后，进行单元测试等
  • 在实现过程中，先后学习（复习）了，进行前端界面开发的标准三件套html, css, js, 进行前后端异步交互的ajax,进行后端开发的django框架和 python语言，操纵数据库的mysql技术，以及利用浏览器的开发者模式进行调试和debug
  • 感觉还得是ddl哈哈哈哈哈哈，之前做梦都没想到一礼拜能从几乎零基础做出一个完整的前后端应用（虽然不算太复杂），但是该有的前端，后端，交互功能以及数据库 都有了，在这次项目开发中，收获真的非常多啊（头发也掉了非常多
防守一波
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html+js+css+mysql实现音乐播放器
weixin_43827398的博客
08-30 1771
实现原理 使用html写出界面，css装饰，js实现音乐播放和控制，音乐从data.js中读取相对路径，在js中使用player播放存在项目中的音乐。 主界面（index） <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" c
HTML+CSS+JS+MYSQL入门总结：
Nov_14的博客
05-14 1247
HTML+CSS+JS+MYSQL入门总结： HTML： 概念：最基础的网页开发语言--->Hyper Text Markup Language超文本标记语言 *超文本：用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。 *标记语言：由标签构成的语言。<标签名称> #标记语言不是编程语言。 2、语法： *html文档后缀名为 .html 或者 .htm *标签分类： #围堵标签：有开始和结束标签。 eg:xxx> #自闭和标签：开始和结束标签.
html+css+js+mysql数据库实现的打字游戏.zip
12-12
html+css+js+mysql数据库实现的打字小游戏。html+css+js+mysql数据库实现的打字小游戏
前后端交互计算器（html+css+javascript+flask）
m0_62497093的博客
10-22 413
同时对前端页面设计html、css、javaScript中的各类标签语法等有了更深的理解，能够更好的结合使用。创建Calculate类，包含Add（）添加字符，Result（）运算结果，Clear（）清空屏幕，back（）返回一个字符四个函数。创建类Calculate，并定义Add（），Result（），Clear（），back（）四个函数进行数据处理。完成基础+，-，* ，/，%，（）运算，并将输入的字符串和结果存储到后端数据库中。例如：2的3次方 ——equ：2**3=8；
web基础（html，css，mysql）
L0g1c的博客
10-05 531
​ 设置默认的utf8，在配置文件中：写上character_set_server = utf8。显示表结构，字段类型，主键，是否为空等属性，但不显示外键。​ ALTER TABLE 表名 CHANGE 旧属性名 新属性名 新数据类型;​ 格式：ALTER TABLE 旧表名 RENAME 新表名;​ ALTER TABLE 表名 MODIFY 属性名 数据类型。​ 查看当前数据库 里面的表user 用户为root的密码。_blank：用于在新的选项卡中跳转，也就是新建页面跳转。
薪资计算器,下班倒计时,计算每秒薪资
11-08
可以选择如Node.js、Python的Django或Flask、Java的Spring Boot等框架来构建服务器，处理数据存储和接口交互。数据库技术，如MySQL或MongoDB，用于保存用户设置和计算历史。 6. **安全性与隐私**：考虑到应用可能...
financialcalculator：财务计算器
02-16
- **用户界面**：如果是Web应用，可能使用HTML、CSS和JavaScript构建前端，后端可能基于Django、Flask（Python）或Express.js（Node.js）。 - **数据库**：存储用户数据或计算结果，可能使用MySQL、SQLite或...
团队计算器
02-12
- **Node.js/Express**：如果项目是全栈JavaScript实现，可能会使用Node.js作为后端，Express作为服务器框架。 - **Django/Flask**：如果是Python开发，Django或Flask可能是选择的Web框架。 - **Spring Boot**：...
python制作工资计算器web app
04-21
使用HTML、CSS和JavaScript构建用户界面。Bootstrap或者Vue.js等前端框架可以简化布局和交互设计。用户应能输入工资信息，查看计算结果，并可能需要提供一些自定义选项，如扣除比例等。 5. **云计算集成**： 如果...
ageCalculator
03-08
"ageCalculator"是一个基于Web的年龄计算器应用，它利用了C-14同位素衰变的原理来估算物体的年龄。C-14同位素是放射性碳测年法的基础，这种方法广泛用于考古学中，以确定有机材料的年代。在这款应用中，用户可能能够...
php+mysql+html+js+css开发web网站
12-28
此网站是特别适合初学PHP人员入门使用，含前后台，增删改查，配接mysql数据库，有建库建表sql脚本。希望能对希望入门Web开发的你有所帮助。
基于JSP+Mysql+HTml+Css宾馆酒店管理系统设计与实现
杭州.黄老师
04-06 3753
基于JSP+Mysql+HTml+Css宾馆酒店管理系统设计与实现毕业设计成品源代码，黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！
前端用 HTML5 + CSS3 + JavaScript，后端连接什么数据库更简单？
最新发布
Itmastergo的博客
04-12 1209
当前端使用 HTML5、CSS3 和 JavaScript 进行开发时，后端连接何种数据库是一个非常重要的问题，因为数据库的选择直接影响着后端代码的编写、数据存储与查询的效率以及系统的可维护性。
HTML+CSS+JS+Django 实现前后端分离的科学计算器、利率计算器(附全部代码在gitcode链接)
m0_63669388的博客
10-22 1211
本次作业完成了和附件功能1.2.3.以及扩展功能1. 动态按钮，动态背景，页面局部or全局切换等等。
Django学习------使用Django制作一个简易计算器页面
niulinbiao的博客
01-09 2164
文章预览1、创建Django项目2、views.py文件3、urls.py文件4、html页面5、运行结果 最近在学习Django后台开发，以一个简单的页面来记录一下知识点 1、创建Django项目 项目结构如下 配置服务器 2、views.py文件 #!/usr/bin/env python # -*- coding:utf-8 -*- from django.http import HttpResponse from django.shortcuts import render # 计算器 def
django制作计算器网页实例，实现前后端数据传输【实测成功】
weixin_41529093的博客
03-18 1734
仅作为记录，大佬请跳过。 感谢b站大佬视频：传送门 文章目录一、建立django项目二、所有源代码三、运行四、展示参考————————————————————————————随笔pycharm的html自动填充快捷键 一、建立django项目 这次博主使用第二种方式windows的命令提示符——建立django项目（之前是使用pycharm专业版建立传送门） 1、在windows的命令提示符里依次输入： e: cd 20210317web\a5djangocalculator django-admin s
前端实现科学计算器
WdbM_的博客
09-23 1002
利用 html + css + js 实现一个 UI 优美、功能全的科学计算器
利用Django制作简易计算器（零基础）
nianyiwu的博客
10-31 247
在templates文件夹中，我们开一个HTML文件，这里我命名为main.html（这里我的代码有点繁琐，大佬们可以自己缩减一下）在我们创建的app中，找到views.py文件，在其中编写计算器的基本程序（这里我写的也很繁琐，大佬们可以用函数缩减一下）该计算器在计算小数之间的算法时，可能会出现误差，这是由于浮点数二进制与十进制之间的转化导致的，各位大佬可以自己修改一下。在根目录Calculator_System下面，利用终端，我们再创建一个app，这里我命名为Calculator。
用 JSP 连接 MySQL 登入注册项目实践(JSP + HTML + CSS + MySQL)
weixin_70730532的博客
05-25 202
目录 一、写在前面 二、效果图 三、实现思路 四、实现代码 1、login总界面 2、registercheck总代码 3、logoutcheck总代码 4、amendcheck总代码 相关文章 一、写在前面 哈喽~大家好，这篇呢我们来看看用 JSP 连接 MySQL 登入注册项目实践，这里就可能有人问了，唉？追桑~前些天不是写了 jsp 登入注册的项目吗？怎么这次还在写呢？哈哈，您别担心，这次呢，肯定和上次不同，我们先来看看效果吧！ 二、效果图 ...
如何实现django+pyecharts+mysql前后端分离
04-27
总的来说，实现 Django + Pyecharts + MySQL 前后端分离需要对 Django、Pyecharts、MySQL、Django REST framework 等技术有一定的了解和实践经验。同时，需要注意前后端分离架构的设计和实现，以确保系统的稳定性和...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值