java window项目 java开发windows

转载

网络小墨舞风 2024-04-11 13:31:48

文章标签 java window项目 javascript 前端 html 文本框 文章分类 Java 后端开发

文章目录

需求与准备

准备
事件的两种添加方法

计算机面板

步骤一：一个大概
步骤二：写上value
步骤三：文本框
步骤四：单击按钮使文本框显示数字
步骤五：单击按钮使文本框显示数字的优化1
步骤六：单击按钮使文本框显示数字的优化2
步骤七：非数字按钮的显示与四则运算的实现
步骤八：小数点功能的实现
步骤九：退位键功能的实现
步骤十：清屏和正负号功能的实现
步骤十一：其他补充

总体代码

html
css
js

需求与准备

实现单击按钮录入数字
实现基础四则运算功能，并添加必要的异常处理，如除数为零等
实现小数点功能并添加异常处理：小数点只能出现一次
实现正负号功能
实现退位功能，已经是最后一位时，显示框显示为0
清屏功能

准备

创三个文件，html，css，js。

html：

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <!-- css引用 -->
    <link rel="stylesheet" type="text/css" href="calculator_css.css">
    <!-- js引用 -->
    <script type="text/javascript" src="calculator_js.js"></script>
</head>

<body>
</body>

</html>

事件的两种添加方法

html：

<body onload="f2()">
    <!-- 方法1 -->
    <input type="button" value="test1" id="btn1" onclick="f1()">
    <!-- 方法2 -->
    <input type="button" value="test2" id="btn2">
</body>

js：

function f1() {
    alert("test1");
}

function f2() {
    document.getElementById("btn2").onclick = function() {
        alert("test2");
    }
}

则：点test1按钮就弹出test1，点test2按钮就弹出test2.

计算机面板

一个文本框
10个数字
加减乘除
一个小数点
一个退位键
一个正负号
一个等号
一个清屏

一共有20个元素。

步骤一：一个大概

html：

<body>
    <div id="div1">
        <div id="div2">
            <!-- 文本框 -->
            <input type="text" name="" id="" />
        </div>
        <div id="div3">
            <!-- 20个按钮 -->
            <input type="button" value="0" name="" id="" />
            <input type="button" value="0" name="" id="" />
            <input type="button" value="0" name="" id="" />
            <input type="button" value="0" name="" id="" />
            <input type="button" value="0" name="" id="" />
            <input type="button" value="0" name="" id="" />
            <input type="button" value="0" name="" id="" />
            <input type="button" value="0" name="" id="" />
            <input type="button" value="0" name="" id="" />
            <input type="button" value="0" name="" id="" />
            <input type="button" value="0" name="" id="" />
            <input type="button" value="0" name="" id="" />
            <input type="button" value="0" name="" id="" />
            <input type="button" value="0" name="" id="" />
            <input type="button" value="0" name="" id="" />
            <input type="button" value="0" name="" id="" />
            <input type="button" value="0" name="" id="" />
            <input type="button" value="0" name="" id="" />
            <input type="button" value="0" name="" id="" />
            <input type="button" value="0" name="" id="" />
        </div>
    </div>
</body>

css：

/*选择所有*/
* {
    margin: 0px;
    padding: 0px;
}

/*选择所有div*/
div {
    width: 170px;
}

/*选择id是div1的*/
#div1 {
    top: 60px;
    left: 100px;
    position: absolute;
}

/*选择所有input开头的，类型是button的*/
input[type="button"] {
    width: 30px;
    /*一般选择右边距：这样可以左对齐*/
    margin-right: 5px;
}

大概长成这样。

java window项目 java开发windows_javascript

有效果可知，我们要把文本框拉小一些。

增加css：

input[type="text"] {
    width: 146px;
    /*调整一下就能得到*/
}

于是就对齐了。

步骤二：写上value

<body>
    <div id="div1">
        <div id="div2">
            <!-- 文本框 -->
            <input type="text" name="" id="" />
        </div>
        <div id="div3">
            <!-- 20个按钮 -->
            <!-- 清屏 -->
            <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="" />
        </div>
    </div>
</body>

效果：

java window项目 java开发windows_文本框_02

步骤三：文本框

文本框默认显示为0且右对齐：

html的div2改成：

<div id="div2">
            <!-- 文本框 -->
            <input type="text" value="0" name="" id="" />
 </div>

css的input[type="text"]改成：

input[type="text"] {
    /*调整一下就能得到*/
    width: 146px;
    /*令文本框内数字右对齐*/
    text-align: right;
}

或者在js中集中初始化中设置默认为0。

function init() {
    // 获取文本框
    var num = document.getElementById("num");
    //文本框默认为0
    num.value = 0;
}

禁用文本框的键盘输入

方法1：写在标签里，不推荐。

<div id="div2">
            <!-- 文本框 -->
            <input type="text" value="0" name="" id="" disabled="disabled" />
</div>

方法2：写在js的初始化（集中）里，推荐。

//init加上
num.disabled = "disabled";

效果：

java window项目 java开发windows_javascript_03

步骤四：单击按钮使文本框显示数字

用1举例：
html：

<input type="button" value="1" name="" id="" onclick="num_1_click()" />

js：

function num_1_click() {
    var num = document.getElementById("num");
    //文本框的值
    var n = num.value;
    //字符串拼接
    if (n == "0") {
        n = "1";
    } else {
        n = n + "1";
    }

    num.value = n;
}

狂点1后的显示效果：

java window项目 java开发windows_前端_04

然后可以2-9也这样改。但是，如果给每一个按钮都添加一个事件，这样的耦合度太高了，不够好。

步骤五：单击按钮使文本框显示数字的优化1

按钮1的js：

function num_1_click() {
    var num = document.getElementById("num");
    //文本框的值
    var n = num.value;
    //字符串拼接
    n = n + "1";

    num.value = n * 1;
}

按钮2的js：

function num_2_click() {
    var num = document.getElementById("num");
    //文本框的值
    var n = num.value;
    //字符串拼接
    n = n + "2";

    num.value = n * 1;
}

我们可以很容易看出，这些代码的重复性很高。

接下来是另一个方法。需求：点击任何一个案件则弹出这个案件的内容。

js：

function init() {
    // 获取文本框
    var num = document.getElementById("num");
    //文本框默认为0
    num.value = 0;
    //禁用文本框
    num.disabled = "disabled";
	
	//获取所有input
    var oButton = document.getElementsByTagName("input");//这是数组
    for (var i = 0; i < oButton.length; i++) {
        oButton[i].onclick = function() {
            alert(this.value);
        }
    }
}

接下来，我们要做的事情：

单击的如果是数字，要让他出现在文本框内
单击的如果是其他，则要有对应功能

如何区分数字和非数字呢？

步骤六：单击按钮使文本框显示数字的优化2

区分数字的js：

//是数字 返回true
function isNumber(n) {
    return !isNaN(n);
}

init:

function init() {
    // 获取文本框
    var num = document.getElementById("num");
    //文本框默认为0
    num.value = 0;
    //禁用文本框
    num.disabled = "disabled";

    var oButton = document.getElementsByTagName("input");
    for (var i = 0; i < oButton.length; i++) {
        oButton[i].onclick = function() {
            if (isNumber(this.value)) {
                //在文本框追加数字:*1可以去除前导零
                num.value = (num.value + this.value) * 1;
            } else {

            }
        }
    }
}

效果：数字的追加很顺利。

java window项目 java开发windows_文本框_05

步骤七：非数字按钮的显示与四则运算的实现

js的if-else：

if (isNumber(this.value)) {
                //在文本框追加数字:*1可以去除前导零
                num.value = (num.value + this.value) * 1;
            } else {
                //判断所单击的是什么
                var btn_num = this.value;
                // alert(btn_num);


                switch (btn_num) {
                    case "+":
                        {
                            btn_num1 = parseInt(num.value);
                            num.value = 0;
                            flag = 1;
                            break;
                        }
                    case "-":
                        {
                            btn_num1 = parseInt(num.value);
                            num.value = 0;
                            flag = 2;
                            break;
                        }
                    case "*":
                        {
                            btn_num1 = parseInt(num.value);
                            num.value = 0;
                            flag = 3;
                            break;
                        }
                    case "/":
                        {
                            btn_num1 = parseInt(num.value);
                            num.value = 0;
                            flag = 4;
                            break;
                        }
                    case "=":
                        {
                            if (flag == 1) {
                                // alert(num.value);
                                // alert(btn_num1);
                                num.value = parseInt(num.value) + btn_num1;
                            } else if (flag == 2) {
                                num.value = btn_num1 - parseInt(num.value);
                            } else if (flag == 3) {
                                num.value = parseInt(num.value) * btn_num1;
                            } else {
                                if (parseInt(num.value) == 0) {
                                    num.value = 0;
                                    alert("除数不能为0！");
                                } else {
                                    num.value = btn_num1 / parseInt(num.value);
                                }
                            }
                            break;
                        }
                        //剩下的还没写呢
                    case ".":
                        {
                            break;
                        }
                    case "C":
                        {
                            break;
                        }
                    case "⬅":
                        {
                            break;
                        }
                    case "+/-":
                        {
                            break;
                        }
                    case "m":
                        {
                            break;
                        }
                }

步骤八：小数点功能的实现

小数点只能出现一次
之前的parseInt()要改成Number()

case "."部分：

case ".":
{
     num.value = dec_number(num.value);
     break;
 }

dec_number：

//小数点功能
function dec_number(n) {
    //不存在
    if (n.indexOf(".") == -1) {
        n = n + ".";
    }
    return n;
}

步骤九：退位键功能的实现

js：

//退位键功能
function back(n) {
    if (n == "0" || n.length == 0 || n.length == 1) {
        n = "0";
    } else {
        n = n.substr(0, n.length - 1);
    }
    return n;
}

步骤十：清屏和正负号功能的实现

正负号js：

//正负号
function sign(n) {
    //正
    if (n.indexOf("-") == -1) {
        n = "-" + n;
    } else {
        //负
        n = n.substr(1, n.length);
    }
    return n;
}

清屏js：

case "C":
{
     num.value = "0";
     break;
 }

步骤十一：其他补充

包括：

鼠标浮动在按键上有一个背景色的改变
鼠标点击m后可以点开一个在线计算器的网址
加大文本框里数字与右边框的距离

鼠标浮动在按键上有一个背景色的改变css：

/*在任何一个按钮上产生浮动时*/
input[type="button"]:hover {
    background-color: lightpink;
    border: 1px solid;
    /*去掉边框*/
}

鼠标点击m后可以点开一个在线计算器的网址js：

// 鼠标点击m后可以点开一个在线计算器的网址
function click() {
    var m = document.getElementById("m");
    m.onclick = function() {
        window.location.href = "https://cal.supfree.net/";
    }
}

加大文本框里数字与右边框的距离css：

input[type="text"] {
    /*调整一下就能得到*/
    width: 150px;
    /*令文本框内数字右对齐*/
    text-align: right;
    /*文本框设置为白色*/
    background-color: #ffffff;
    /*边框b不要太粗*/
    border: 1px solid;
    /*添加的是这下面的*/
    /*添加右侧内边距: 用已存在的border-box*/
    box-sizing: border-box;
    padding-right: 5px;
}

大功告成！

java window项目 java开发windows_javascript_06

总体代码

html

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <!-- css引用 -->
    <link rel="stylesheet" type="text/css" href="calculator_css.css">
    <!-- js引用 -->
    <script type="text/javascript" src="calculator_js.js"></script>
</head>

<body onload="init(),click()">
    <div id="div1">
        <div id="div2">
            <!-- 文本框 -->
            <input type="text" value="" name="num" id="num" />
        </div>
        <div id="div3">
            <!-- 20个按钮 -->
            <!-- 清屏 -->
            <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="n1" id="n1" />
            <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="m" id="m" />
        </div>
    </div>
</body>

</html>

css

/*选择所有*/
* {
    margin: 0px;
    padding: 0px;
}

/*选择所有div*/
div {
    width: 170px;
}

/*选择id是div1的*/
#div1 {
    top: 60px;
    left: 100px;
    position: absolute;
}

/*选择所有input开头的，类型是button的*/
input[type="button"] {
    width: 30px;
    /*一般选择右边距：这样可以左对齐*/
    margin-right: 5px;
    /*上边距*/
    margin-top: 5px;
}

input[type="text"] {
    /*调整一下就能得到*/
    width: 150px;
    /*令文本框内数字右对齐*/
    text-align: right;
    /*文本框设置为白色*/
    background-color: #ffffff;
    /*边框b不要太粗*/
    border: 1px solid;
    /*添加右侧内边距: 用已存在的border-box*/
    box-sizing: border-box;
    padding-right: 5px;
}

/*在任何一个按钮上产生浮动时*/
input[type="button"]:hover {
    background-color: lightpink;
    border: 1px solid;
    /*去掉边框*/
}

js

//应该是全局变量才行
var btn_num1;
var flag = 0;

function init() {
    // 获取文本框
    var num = document.getElementById("num");
    //文本框默认为0
    num.value = 0;
    //禁用文本框
    num.disabled = "disabled";

    var oButton = document.getElementsByTagName("input");
    for (var i = 0; i < oButton.length; i++) {
        oButton[i].onclick = function() {
            if (isNumber(this.value)) {
                //在文本框追加数字:*1可以去除前导零
                num.value = (num.value + this.value) * 1;
            } else {
                //判断所单击的是什么
                var btn_num = this.value;
                // alert(btn_num);


                switch (btn_num) {
                    case "+":
                        {
                            btn_num1 = Number(num.value);
                            num.value = 0;
                            flag = 1;
                            break;
                        }
                    case "-":
                        {
                            btn_num1 = Number(num.value);
                            num.value = 0;
                            flag = 2;
                            break;
                        }
                    case "*":
                        {
                            btn_num1 = Number(num.value);
                            num.value = 0;
                            flag = 3;
                            break;
                        }
                    case "/":
                        {
                            btn_num1 = Number(num.value);
                            num.value = 0;
                            flag = 4;
                            break;
                        }
                    case "=":
                        {
                            if (flag == 1) {
                                // alert(num.value);
                                // alert(btn_num1);
                                num.value = Number(num.value) + btn_num1;
                            } else if (flag == 2) {
                                num.value = btn_num1 - Number(num.value);
                            } else if (flag == 3) {
                                num.value = Number(num.value) * btn_num1;
                            } else {
                                if (Number(num.value) == 0) {
                                    num.value = 0;
                                    alert("除数不能为0！");
                                } else {
                                    num.value = btn_num1 / Number(num.value);
                                }
                            }
                            break;
                        }
                    case ".":
                        {
                            num.value = dec_number(num.value);
                            break;
                        }
                    case "C":
                        {
                            num.value = "0";
                            break;
                        }
                    case "⬅":
                        {
                            num.value = back(num.value);
                            break;
                        }
                    case "+/-":
                        {
                            num.value = sign(num.value);
                            break;
                        }
                    case "m":
                        {
                            break;
                        }
                }

            }
        }
    }
}

//是数字 返回true
function isNumber(n) {
    return !isNaN(n);
}

//小数点功能
function dec_number(n) {
    //不存在
    if (n.indexOf(".") == -1) {
        n = n + ".";
    }
    return n;
}

//退位键功能
function back(n) {
    if (n == "0" || n.length == 0 || n.length == 1) {
        n = "0";
    } else {
        n = n.substr(0, n.length - 1);
    }
    return n;
}

//正负号
function sign(n) {
    //正
    if (n.indexOf("-") == -1) {
        n = "-" + n;
    } else {
        //负
        n = n.substr(1, n.length);
    }
    return n;
}

// 鼠标点击m后可以点开一个在线计算器的网址
function click() {
    var m = document.getElementById("m");
    m.onclick = function() {
        window.location.href = "https://cal.supfree.net/";
    }
}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。