Java基础项目（内容超充实）：JavaEE前端JavaScript、CSS、HTML实现动态简易的计算器系统

最新推荐文章于 2024-07-31 16:33:32 发布

晓风残月一望关河萧索

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量485

点赞数

分类专栏：【Java基础项目】文章标签： javascript css html

本文链接：https://blog.csdn.net/Sunshineoe/article/details/108876288

版权

【Java基础项目】专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一. 项目简介

最近在复习web 前端，也上课了。课超级多，周一到周日，什么矩阵论，算法导论……头大~~

① 本项目是简易的计算器系统，实现的功能如下：

实现整数和小数的加减乘除操作
实现<—回退功能
实现文本框清屏功能
实现输入负数
实现点击按钮，跳转到其他网页

② 本项目使用的具体技术如下（通过项目复习知识）：

CSS在HTML中的引用：
HTML中的div的使用，以及在CSS对标签的修饰
JS中方法的显式和隐式的方法使用

③ 本项目的注意的细节点（容易忽略）：

除数为0的情况
小数点重复输入的情况
清屏的情况
外置函数和内置函数的使用
输入的是否为数字，是否为加减乘除

二. 项目代码

①：HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="calc.css">
    <script type="text/javascript" src="cals.js"></script>
</head>
<body onload="init(),init_it()">
    <div id="div1">
        <div id="div2">
            <!-- 文本的内容 -->
            <input type="text"  value="0"  name="num" id="num"/>
        </div>
        <div id="div3">
            <input type="button" value="C" name="" id=" " />
            <input type="button" value="<——" name="" id=" "/>
            <input type="button" value="+/-" name="" id=" "/>
            <input type="button" value="/" name="" id=""/>
            <input type="button" value="1"   name="" id=""/>
            <input type="button" value="2"  name="" id=""/>
            <input type="button" value="3"  name="" id=""/>
            <input type="button" value="*" name="" id=""/>
            <input type="button" value="4" name="" id=""/>
            <input type="button" value="5" name="" id=""/>
            <input type="button" value="6" name="" id=""/>
            <input type="button" value="-" name="" id=""/>
            <input type="button" value="7" name="" id=""/>
            <input type="button" value="8" name="" id=""/>
            <input type="button" value="9" name="" id=""/>
            <input type="button" value="+" name="" id=""/>
            <input type="button" value="0" name="" id=""/>
            <input type="button" value="." name="" id=""/>
            <input type="button" value="=" name="" id=""/>
            <input type="button" value="m" name="" id="it"/>
        </div>

    </div>
</body>
</html>

②：CSS代码

*{
    margin: 0;
    padding: 0;
}
/* 设置整体的div的大小  */
div {
    width: 170px;
}
/*调整文本值的大小和距离*/
input[type="text"] {
    width: 170px;
    margin-bottom: 10px;
    text-align: right;
    background-color: white;
    border: 0.8px solid;
    padding: 5px;
    box-sizing: border-box;
}
input[type="button"] {
    width: 30px;
    margin-right: 5px;
}

#div1 {
    top: 60px;
    left: 100px;
    position: absolute;
}
#div3 {
    margin-left: 10px;
}
input[type="button"]:hover {
    background-color: yellow;
}

③：JS代码

function init() {
    // 通过id获取元素值
    var num = document.getElementById("num");
    //设置num的初始值
    num.value = 0;
    num.disabled = "disabled";

    // 通过标签的名字获取全部相关标签进行操作
    var oButton = document.getElementsByTagName("input");
    // num1是当前的值
    var num1;
    // 是符号 +-*/
    var sign;
    //对标签input数组进行遍历
    for (var i = 0; i < oButton.length; i++) {
        oButton[i].onclick = function () {
            //this代表的是oButton对象
            // 点击<input>标签，触发这个方法，
            //判断点击的是不是数字，如果文本框的值为空或者为0，将点击的值赋值给文本框
            if (isNumber(this.value)) {
                // 文本框不为空
                if (isNull(num.value)) {
                    num.value = this.value;
                } else {
                    // 若文本框不为空，将点击的值和第一次点击的值进行拼接
                    num.value = this.value + num.value;
                }
                //不是数字的话
            } else {
                //获取点击的符号
                var btn_num = this.value;
                //对符号进行判断
                switch (btn_num) {
                    case "+":
                        //将文本框中的值赋值给变量进行存储
                        num1 = Number(num.value);
                        //加的过程或者哪个num.value = 0；
                        sign = "+";
                        num.value = 0;
                        break;
                    case "-":
                        // 获取当前文本框中的数据
                        num1 = Number(num.value);
                        sign = "-";
                        num.value = 0;
                        break;
                    case "*":
                        // 获取当前文本框中的数据
                        num1 = Number(num.value);
                        sign = "*";
                        num.value = 0;
                        break;
                    case "/":
                        // 获取当前文本框的值，第一个数
                        num1 = Number(num.value);
                        num.value = 0;
                        sign = "/";
                        break;
                    case "C":
                        num.value = 0;
                        break;
                    case "<——":
                        num.value = back(num.value);
                        break;
                    case "+/-":
                        // 刚刚和上面的重名了
                        num.value = s(num.value);
                        break;
                    case ".":
                        //小数点只能出现一次，再点击一次，无效
                        //即使判断文本框的数，如果有.，还是原数；否则添加小数点
                        num.value = dec_num(num.value);
                        break;
                    case "=":
                        switch (sign) {
                            case "+":
                                num.value = num1 + Number(num.value);
                                break;
                            case "-":
                                num.value = num1 - Number(num.value);
                                break;
                            case "*":
                                num.value = num1 * Number(num.value);
                                break;
                            case "/":
                                //因为/的时候，num.value自动变为0,
                                // 变为0的时候即使我不输入数字，也会被看成分母为0
                                if (parseInt(num.value) == 0) {
                                    num.value = 0;
                                    alert("除数为0，计算错误！");
                                } else {
                                    //第一次输入的 / 第二次输入的
                                    num.value = num1 / Number(num.value);
                                }
                                break;
                        }
                        break;
                    case "m":
                        alert("m");
                        break;
                }
            }
        }
    }
}
//判断是否为空，为空为true
function isNull(n) {
    if (n == "0" || n.length == 0) {
        return true;
    } else {
        return false;
    }
}
/*
* 正负号的方法
* */
function s(n) {
    // 如果n中不存在-就是添加上，否则的话就取消，使用字符串截取
    if (n.indexOf("-") == -1) {
        n = "-" + n;
    } else {
        n = n.substr(1, n.length);
    }
    return n;
}

// 判断是否为数字,是数字返回true
function isNumber(num) {
    // boolean类型
    if (!isNaN(num)) {
        return true;
    } else {
        return false;
    }
}

/*
* 对小数点的处理
* */
function dec_num(n) {
    // 如果n中不包含小数点
    if (n.indexOf(".") == -1) {
        n = n + ".";
    } else {
        n = n;
    }
    return n;
}
/*
* 退位
* */
function back(n) {
    // 如果num.value的值为空或者是为0，则n = 0；
    // 反过来的话就是n不为空,字符串截取即可
    // 先进行截取，从第0个位置进行截取，然后截取多少个数
    n = n.substr(0, n.length - 1);
    if (isNull(n)) {
        n = "0";
    }
    return n;
}

/*
* function总共有2中方式：
* ①：function a(){},然后在，.html文件中引用，onclick = "方法";
* ②：function a(){  在body里面直接加载
*   document.getElementById("it").onclick = function () {
        window.location.href = "http://www.itlaoqi.com";
    }
* }
* */
function init_it() {
    document.getElementById("it").onclick = function () {
        window.location.href = "http://www.itlaoqi.com";
    }
}

④：具体效果图

三. 总结

此项目的目的是复习JavaScript里面的内容
具体js里面函数的定义和使用（2种方式：显式和隐式方法的使用）
事件的加载：onclick（一般是点击按钮的时候触发）,onchange（一般是选择不同的数字的时候触发）等
DOM，文件对象模型：通过前端控件的id或者name对前端界面进行动态设置，一般体现在初始化，方法中

分享技术，共同进步！

晓风残月一望关河萧索

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Java基础项目（内容超充实）：JavaEE前端JavaScript、CSS、HTML实现动态简易的计算器系统

一. 项目简介最近在复习web 前端，也上课了。课超级多，周一到周日，什么矩阵论，算法导论……头大~~ ①本项目是简易的计算器系统，实现的功能如下：实现整数和小数的加减乘除操作实现<—回退功能实现文本框清屏功能实现输入负数实现点击按钮，跳转到其他网页 ② 本项目使用的具体技术如下（通过项目复习知识）：CSS在HTML中的引用： HTML中的div的使用，以及在CSS对标签的修饰 JS中方法的显式和隐式的方法使用 ③ 本项目的注...
复制链接

扫一扫

专栏目录