java web week two

来源：互联网发布：vscode 调试编辑：程序博客网时间：2024/04/29 15:54

开发简易计算器

http://www.lai18.com/content/439235.html

index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>计算器</title>    <link rel="stylesheet" href="CSS/style.css" type="text/css">    <script type="text/javascript">        let result; //保存点击运算符之前输入框中的数值        let operator; //保存运算符        let isPressEqualsKey = false; //记录是否按下”=“键        //数字键事件        function connectionDigital(control) {            var txt = document.getElementById('text');            if (isPressEqualsKey) {                txt.value = ""; //已进行过计算，则清空数值输入框重新开始                isPressEqualsKey = false;            }            if (txt.value.indexOf('.') > -1 && control.value == '.')                return false;            txt.value += control.value; //将控件值赋给数值输入框中        }        //ce键事件：清空数字输入框        function clearAll() {            document.getElementById('text').value = "";            result = "";            operator = "";        }        // +、-、*、/ 事件        function calculation(control) {            operator = control.value;            let txt = document.getElementById('text');            if (txt.value == "")return false; //数值输入框中没有数字，则不能输入运算符            result = txt.value;            txt.value = "";        }        //计算结果        function getResult() {            let opValue;            let sourseValue = parseFloat(result);            let txt = document.getElementById('text');            if (operator == '*')                opValue = sourseValue * parseFloat(txt.value);            else if (operator == '/')                opValue = sourseValue / parseFloat(txt.value);            else if (operator == '+')                opValue = sourseValue + parseFloat(txt.value);            else if (operator == '-')                opValue = sourseValue - parseFloat(txt.value);            txt.value = opValue;            isPressEqualsKey = true;            result = "";            opValue = "";        }        function percent() {            let txt = document.getElementById('text');            if (txt == 0) {                document.getElementById('text').value = 0;            }else {                document.getElementById('text').value /= 100;            }        }        function abs() {            let txt = document.getElementById('text');            if (txt.value.indexOf('.') > -1 && control.value == '.')                return false;            document.getElementById('text').value = -(document.getElementById('text').value)        }    </script></head><body><div id="jisuanqi">    <table>        <caption>            <h3>计算器</h3>        </caption>        <tbody>        <tr>            <td colspan="4">                <input type="text" id="text" readonly="readonly"/>            </td>        </tr>        <tr>            <td>                <input type="button" class="buttonGray" id="btnAC" value="AC" onclick="clearAll();"/>            </td>            <td>                <input type="button" class="buttonGray" id="btnabs" value="+/-" onclick="abs();"/>            </td>            <td>                <input type="button" class="buttonGray" id="btnPercent" value="%" onclick="percent();"/>            </td>            <td>                <input type="button" class="buttonYellow" id="btnChu" value="/" onclick="calculation(this);"/>            </td>        </tr>        <tr>            <td>                <input type="button" class="button" id="btn7" value="7" onclick="connectionDigital(this);"/>            </td>            <td>                <input type="button" class="button" id="btn8" value="8" onclick="connectionDigital(this);"/>            </td>            <td>                <input type="button" class="button" id="btn9" value="9" onclick="connectionDigital(this);"/>            </td>            <td>                <input type="button" class="buttonYellow" id="btnCheng" value="*" onclick="calculation(this);"/>            </td>        </tr>        <tr>            <td>                <input type="button" class="button" id="btn4" value="4" onclick="connectionDigital(this);"/>            </td>            <td>                <input type="button" class="button" id="btn5" value="5" onclick="connectionDigital(this);"/>            </td>            <td>                <input type="button" class="button" id="btn6" value="6" onclick="connectionDigital(this);"/>            </td>            <td>                <input type="button" class="buttonYellow" id="btnJian" value="-" onclick="calculation(this);"/>            </td>        </tr>        <tr>            <td>                <input type="button" class="button" id="btn1" value="1" onclick="connectionDigital(this);"/>            </td>            <td>                <input type="button" class="button" id="btn2" value="2" onclick="connectionDigital(this);"/>            </td>            <td>                <input type="button" class="button" id="btn3" value="3" onclick="connectionDigital(this);"/>            </td>            <td>                <input type="button" class="buttonYellow" id="btnPlus" value="+" onclick="calculation(this);"/>            </td>        </tr>        <tr>            <td colspan="2">                <input type="button" class="button" id="btn0" value="0" onclick="connectionDigital(this);"/>            </td>            <td>                <input type="button" class="button" id="btnDian" value="." onclick="connectionDigital(this);"/>            </td>            <td>                <input type="button" class="buttonYellow" id="btnEqual" value="=" onclick="getResult();"/>            </td>        </tr>        </tbody>    </table></div></body></html>

style.css

*{    margin: 0 auto;}#jisuanqi{    width: 100%;    height: 100%;}#text{    width: 99%;    height: 100%;    text-align: right;    border: 1px none;}.button,.buttonGray,.buttonYellow{    width:100%;    height: 100%;    border: 1px none;}.buttonGray{    background-color: rgba(15, 44, 61, 0.61);}.buttonYellow{    background-color: rgba(255, 155, 38, 0.91);}table,tr,td{    border: 1px solid #BBB;    border-collapse: collapse;    min-width: 60px;    min-height: 60px;}table{    height: 360px;    width: 240px;    line-height: 40px;}body {    background-color: antiquewhite;}

这里写图片描述

阅读全文

0 0