用php和html制作计算器,html和php怎样制作计算器

前后端分离计算器 git仓库链接和代码规范链接PSP表格成品展示科学计算器1. 默认界面与页面切换2. 四则运算、取余、括号3. 清零Clear 回退Back4. 错误提示 Error5. 读取历史记录History 历史记录的显示、隐藏6. 科学计算7. Ans的处理与计算 利率计算器8. 存贷款--利息 计算9. 存贷款--利率表 修改10 数据库展示 设计实现过程1. 页面原型设计2. 前置知识学习3. 正式编码实现 代码说明1. ajax 中get和post区别2. 隐藏标签的设置3. 点击按钮实现页面切换4. 判断select是否被选中并获取select选中的值 心路历程和收获
本次作业完成了 全部的基础功能和附件功能1. 前端修改利率表 2. 科学计算 3. 页面原型设计 以及扩展功能1. 动态按钮动态背景页面局部or全局切换等等。

这个作业属于哪个课程< 2301-计算机学院-软件工程>这个作业要求在哪里< 软工实践第二次作业>这个作业的目标< 实现一个科学计算器具备的基本功能并且UI设计较美观 >其他参考文献< Django框架的使用 Web开发技术入门> git仓库链接和代码规范链接

gitcode仓库链接

代码规范链接

PSP表格 PSPPersonal Software Process Stages预估耗时分钟实际耗时分钟Planning计划3060• Estimate• 估计这个任务需要多少时间3060Development开发18002160• Analysis• 需求分析 (包括学习新技术300360• Design Spec• 生成设计文档4060• Design Review• 设计复审6080• Coding Standard• 代码规范 (为目前的开发制定合适的规范)10060• Design• 具体设计80100• Coding• 具体编码9001000• Code Review• 代码复审200260• Test• 测试自我测试修改代码提交修改120240Reporting报告190230• Test Repor• 测试报告120150• Size Measurement• 计算工作量1010• Postmortem & Process Improvement Plan• 事后总结, 并提出过程改进计划6090合计20202450 成品展示 科学计算器 1. 默认界面与页面切换

我们进入到界面的时候时科学计算器因此我们需要设计一个合理的页面切换按钮便于用户在页面中进行不同计算器的切换以及在编辑利率表的时候对利率表的动态展示。

2. 四则运算、取余、括号

四则运算时基本的加减乘除是根本所在因此至关重要我在后端用python实现这些计算。

3. 清零Clear 回退Back

撤销一位数字or算符需要同时对显示表达式和计算表达式同时更新并且显示表达式每次不是只撤回一个字符。因为(sin,cos,tan,log等多个字符表示的算符需要一次撤销几个字符需要特殊处理)

4. 错误提示 Error

在使用计算器的时候,难免会有输入错误表达式的时候,因此在这种时候需要及时报错提醒用户最好有具体的原因

除数分母为零的错误需要返回错误并给出错误原因使用科学计算elog的时候未加括号不能计算会导致括号错误输入次方等符号需要前面先有一个数字否则会导致语法错误 5. 读取历史记录History 历史记录的显示、隐藏

在需要的读取历史记录显示在不需要的时候把历史记录给隐藏对于一个用户来说至关重要因为我们需要一个合理简洁且能够交互的界面。

6. 科学计算

科学计算通过导入math库进行计算。

7. Ans的处理与计算

在实际中我们可以借助ans直接将上次的结果拿来计算。

利率计算器 8. 存贷款–利息 计算

选择贷款和存款分别进行计算和交互。通过Button按钮的点击进行不同页面切换。

9. 存贷款–利率表 修改

用户需要自定义一些利率值因此利率表的修改对用户也至关重要本人采用后端数据库的所有类型和对应的值通过字典传递过来然后借助innerHTML标签进行动态生成和动态删除。

10 数据库展示 设计实现过程 1. 页面原型设计

看到页面原型设计的时候科学计算器已经做完了所以就用墨刀做了 另外一个利率计算器的原型设计 后期前端设计除了颜色微调了之外其他基本全部实现。

2. 前置知识学习

Web开发技术入门 : 根据这篇文章学了Html Css Js的一些基础操作并进行总结整理。
Django框架的使用 根据这篇文章学习了django的框架使用以及django和mysql的数据操作建立数据表建立视图交互方式以及可视化mysql。
Django连接数据库学习了在django里面用models建立类进行构建数据库里面的表已经在views中定义函数对数据库进行增删改查。

3. 正式编码实现

前端部分代码展示

在templates文件夹下保存我们所写的html标签在static里面保存我们的CSS文件和JS文件进行页面美化和页面交互。

CSS展示 在CSS里面使用各种选择器进行风格、样式、颜色个性化设置。

div.display #computation{    display: block;    font-size: 22px;    margin: 5px auto;    text-align: right;    border: 1px #00539f;}div.display #result{    display: block;    font-size: 50px;    text-align: right;    margin: 5px auto;    padding: 0px 0px;}

HTML展示 在这里我们写我们主要页面的代码用于静态显示以及对我们界面的全局架构

<div classform_group>  <label fortotal_money1 classform_label>金额元:</label>  <div classform_input styledisplay: inline-block><input typetext idtotal_money1></div>  <div classerror> </div></div><div classform_group>  <label fortype_id1 classform_label>年份年:</label>  <div classform_input styledisplay: inline-block>    <input typetext  idtype_id1>  </div>  <div classerror> </div></div><div classform_group>  <label forsecret1 classform_label>利息元:</label>  <div classform_input styledisplay: inline-block>    <input idsecret1 typetext>  </div>  <div classerror></div></div>

JS展示 在这里主要展示我们的页面交互功能

function edit() {        let table  document.querySelector(.deposit)        table.style.display  block        if(document.getElementById(temp1).innerHTML  ){            $.ajax({              url: /indexapi_editdata,              type: post,              data: {                  name : table.className              },              success: function (res) {                //alert(确定)                console.log(res.data)                for (const key in res.data) {                  temp1.innerHTML  <div><label>  key  </label>                  temp1.innerHTML  <input typetext  styledisplay: inline-block value  res.data[key]   id  key  ></div>                }              }            })        }  }    function edit1() {        let table  document.querySelector(.load)        table.style.display  block        if(document.getElementById(temp2).innerHTML  ){            $.ajax({              url: /indexapi_editdata1,              type: post,              data: {                  name : table.className              },              success: function (res) {                //alert(确定)                console.log(res.data)                for (const key in res.data) {                  temp2.innerHTML  <div><label>  key  </label>                  temp2.innerHTML  <input typetext value  res.data[key]   id  key  ></div>                }              }            })        }  }

前端全局代码展示

后端部分代码展示

Views : 在里面设计数据库的处理函数用于处理业务逻辑产生html页面或数据。下面这两个对数据库里利率表进行更改的数据。

def indexapi_editdata(request):    type_name  request.POST    type_name  type_name.get(name)    if type_name  deposit:        data_all  Bank1.objects.all()    else:        data_all  Bank3.objects.all()    result  dict()    for data in data_all:        print(data.type_name,data.rate)        result[data.type_name]  data.rate    return JsonResponse({code:2000,msg:OK,data:result})csrf_exemptdef indexapi_alter_rate(request):    params1  request.POST    params  params1.get(rates)    print(type(params),params)    params  json.loads(params)    print(type(params), params)    for key in params.keys():        print(key ,key,value ,params[key])        t  Bank1.objects.get(type_namekey)        t.rate  float(params[key])        t.save()    return JsonResponse({code:2000,msg:OK,data:修改成功})

models : 定义数据库里面的表设计表的属性、类型下面这个定义的是计算器历史记录类和 存贷款利率类

class Calculator(models.Model):    h_history  models.CharField(max_length100)    h_result  models.CharField(max_length100)    h_date  models.DateField(default2000-1-1)class Bank1(models.Model):    type_id  models.IntegerField()    type_name  models.CharField(max_length20)    rate  models.FloatField()class Bank3(models.Model):    type_id  models.IntegerField()    type_name  models.CharField(max_length20)    rate  models.FloatField()

urls : 在这里设置路由和views里面的函数的一一映射。 这里是一一映射关系

    url(r^indexapi_back$, views.indexapi_back),    url(r^indexapi_clear$, views.indexapi_clear),    url(r^indexapi_ans$, views.indexapi_ans),    url(r^index_secret$, views.index_secret), # 初始界面函数 利率函数

后端全局代码展示

代码说明

在这一块我重点说明一我遇到的一些问题和易混淆的方面其他代码就不全部解释了都在gitcode里面也有一部分注释说明。
其次根据这次作业目前额外完成了2篇技术博客如下
HTML 实现 点击按钮切换 整张界面 && 点击按钮切换局部界面
HTML选项框的设计 以及 根据不同选项对应不同的事件交互
后续文章还会继续整理。

1. ajax 中get和post区别 最直观的区别就是GET把参数包含在URL中POST通过request body传递参数。GET请求只能进行url编码而POST支持多种编码方式GET和POST还有一个重大区别简单的说GET产生一个TCP数据包POST产生两个TCP数据包。 长的说对于GET方式的请求浏览器会把http header和data一并发送出去服务器响应200返回数据而对于POST浏览器先发送header服务器响应100 continue浏览器再发送data服务器响应200 ok返回数据。 2. 隐藏标签的设置 我们设置页面的时候有些部分可以不在初始界面展示可以在点击某些特定按钮后再进行展示因此我们可以借助按钮设置某一块的style.displaynone 让其不显示或者设置style.displayblock设置为显示示例展示

function get_id(){       let mySelect  document.getElementById(type_id);   //定位id获取select       let index  mySelect.selectedIndex;   //选中索引选取select中option选中的第几个       if(index  1){           document.getElementById(year).style.displayblock       }       else{           document.getElementById(year).style.displaynone       }       let text  mySelect.options[index].text; //获取选中文本即option标签对之间的文字       let value  mySelect.options[index].value;   //获取选中值       document.getElementById(show_id).innerHTML  value;       if (mySelect.options[2].selected) {  //注意index是从0开始的           document.getElementById(show_isSelected).innerHTML  选中了;       } else {           document.getElementById(show_isSelected).innerHTML  没选中;       }   }

3. 点击按钮实现页面切换

页面切换有以下四种方法比较合适

方法一 使用a标签进行跳转连接 href

 <a href/index_secret>     <button classchange_page>利率计算器</button> </a>

方法二在button标签中加上onclick属性赋值为Javascript

<input typebutton onclicklocation.href(index.aspx) />//在本页面打开<input typebutton onclickwindow.open(bedzhao.aspx) />//打开新页面<button onclickwindow.location.href../routeEdit/index.html typebutton idadd>新增</button>

方法二触发一个函数跳转

<script>function jump(){    window.location.href typebutton value我是一个按钮 οnclickjavascript:jump()>

方法四表单的action定向提交跳转

<form actionxx.html methodpost>    <input typebutton value按钮></form>

4. 判断select是否被选中并获取select选中的值

选择出来select标签中哪一个选项被选择然后给出相应变化

var mySelect  document.getElementById(testSelect);//定位id获取selectvar index  mySelect.selectedIndex;//选中索引选取select中option选中的第几个var text  mySelect.options[index].text;//获取选中文本var value  mySelect.options[index].value;//获取选中值mySelect.options[index].selected//判断select中的某个option是否选中true为选中false为未选中

心路历程和收获 其实刚开看到这这个题目是有点懵的因为前后端的框架都完全没学过还只有五天后来延迟了时间时间充裕了很多慢慢就开始学了起来从前置知识到代码实践一点点修改一点点查哪里不会查哪里最后总算实现了一个还行的结果。自己动手编程实现了一个前后端分离的科学计算器和利率计算器,体会到 一个项目前后端结合的api设计全过程 , 包括: 开发前的计划,开发时候的需求分析,生成设计文档,实现需求的具体编码,以及开发完成后的单元测试等.在项目中发现在编写代码实现具体功能的时候,往往没有计划好的那种顺利,一般是错误频出, 比如有些语法不了解或者不同的选择器的属性不同前后端之间传递数据。学会了HTMLCSSJS开发前端的一些基础和流程包括HTML进行页面编辑CSS对页面风格进行设计JS进行**页面交互**和id class name 等等选择器的使用。学会了Python的Django框架熟悉了其使用,也顺便复习了数据库hhhhh,会使用该库进行简单的数据库、表管理增删改查等功能。另外学会了ajax的使用会使用POST 和 GET 方法进行传递通信提高了编程中debug的能力,会用debug工具进行调试python代码.学会了使用前端浏览器界面进行调整界面格式和Debug, 使得界面设计更加直观动态。