用jsp完成购物简易计算器

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 50px;
            height: 40px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td><img src="img/cart.png"></td>
            <td colspan="3">购物简易计算器</td>
        </tr>
        <tr>
            <td>第一个数</td>
            <td colspan="3" ><input type="text" ></td>
        </tr>
        <tr>
            <td>第二个数</td>
            <td colspan="3"><input type="text" ></td>
        </tr>
        <tr>
            <td><button onclick="cal('+')">+</button></td>
            <td><button onclick="cal('-')">-</button></td>
            <td><button onclick="cal('*')">*</button></td>
            <td><button onclick="cal('/')">/</button></td>
        </tr>
        <tr>
            <td>计算结果</td>
            <td colspan="3"><input type="text" id="result"></td>
        </tr>
    </table>
    <script>
        function cal(type) {
            var num1 = document.getElementsByTagName('input')[0].value;
            var num2 = document.getElementsByTagName('input')[1].value;
            var result = eval(parseInt(num1) + type + parseInt(num2));
            document.getElementById('result').value = result;
        }
    </script>
</body>
</html>
相关推荐
GDAL2 分钟前
HTML 实现登录状态记录 深入全面讲解教程
前端·html·登录验证
木心爱编程2 分钟前
【Qt 5.14.2 新手实战】QTC++入门筑基——10 分钟做个文本编辑器:QLineEdit + QTextEdit 核心用法
java·c++·qt
(づど)3 分钟前
一套齐全的环境设置:nvm\node\nrm\pnpm
前端·笔记
楠枬4 分钟前
Nacos
java·spring·spring cloud·微服务
晷龙烬6 分钟前
Vue 3 自定义指令:从“瑞士军刀”到“专属工具” !
前端·javascript·vue.js
ShadowSmartMicros7 分钟前
SpringAi调用Mcp
java·ai
MediaTea8 分钟前
思考与练习(第四章 程序组成与输入输出)
java·linux·服务器·前端·javascript
BD_Marathon9 分钟前
【JavaWeb】NPM_简介和相关配置
前端·npm·node.js
kong790692810 分钟前
Java新特性-(四)方法与数组
java·数组·方法
咸鱼加辣12 分钟前
【前端框架】react
前端·react.js·前端框架