JavaWeb——网页计算器

最新推荐文章于 2024-01-13 10:45:40 发布

原创

最新推荐文章于 2024-01-13 10:45:40 发布 · 6.9k 阅读

系列文章

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、网页计算器设计目标
二、前端界面设计
三、计算器功能设计
总结

前言

综合运用HTML，CSS，JavaScript技术，完成网页计算器案例的学习，实现JavaWeb前端开发能力的提升。主要工作有：

采用Div+CSS样式实现页面布局
JavaScript实现计算器业务逻辑

一、网页计算器设计目标

网页计算器前端界面展示效果，包括数字和符号按钮，其中符号按钮分为运算符号按钮（+，-，*，/,%）和功能按钮(“”<-“”退格，C-清除键，=）。运算结果显示在SUM：后的文本框中。

二、前端界面设计

CSS样式定义

通过DIv实现页面布局

1.大框

计算器框体结构定义：
display：block //display是控件的css属性之一，表示的是显示模式。none表示不显示在网页上，但是代码存在;bolck是此元素将显示为块级元素，此元素前后会带有换行符。

2.数字显示框

其中上面一行用来显示点击的按钮值，下面一行用来显示计算结果，两者样式大致相同，区别在与下一行的文本框长度小一些，并且通过长度Width属性，控制两个文本框右对齐。
在这里插入图片描述
布局属性如下图所示

3.按钮框

在这里插入图片描述
布局属性如下图所示

以上所述DIV样式的源代码如下

// .为类的引用，#为id引用

    <style type="text/css">
        #box{
   
   width: 295px; margin: 0 auto; text-align: justify; border: 1px solid #ddd; padding: 15px;}
        .d_num{
   
   display: inline-block; margin:  10px; width: 33px; height: 30px; 
        		border: 1px solid #ddd; text-align: center; line-height: 30px; cursor: pointer;}
        .sum{
   
   margin: 0 10px 10px; line-height: 30px; font-size: 20px;}
        #sum{
   
   width: 205px; height: 30px; padding: 0 5px; margin-left: 5px; font-size: 20px;}
        #process{
   
   width: 255px; height: 30px; padding: 0 5px; margin-left: 5px; font-size: 20px;}
    </style>