JavaScript编写一个简易计算器-阿里云开发者社区

JavaScript编写一个简易计算器

2024-05-29 20

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JavaScript编写一个简易计算器

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    第一个数：<input type="text" placeholder="请输入第一个数字" id="txt1">
    <select name="" id="slt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
        <option value="%">%</option>
    </select>
    第二个数：<input type="text" placeholder="请输入第二个数字" id="txt2">
    <button id="btn">计算</button>
    结果<input type="text" placeholder="" id="res">
    <script>
        // 查找到标签：
        // 对按钮单击事件  ------取出数字和运算符号  ----赋值给结果的框  var v1=txt1.value
        // 1.查标签 
        var txt1 = document.querySelector('#txt1'); //通过选择器查找dom节点。
        var txt2 = document.querySelector('#txt2'); //通过选择器查找dom节点。
        var res = document.querySelector('#res'); //通过选择器查找dom节点。
        var btn = document.querySelector('#btn'); //通过选择器查找dom节点。
        var slt = document.querySelector('#slt'); //通过选择器查找dom节点。
 
 
 
        // 2.对按钮加事件。
        btn.onclick = function () {
            //2.1取值   txt1.value  txt2.value slt.value
            var v1 = txt1.value;
            var v2 = txt2.value;
            var v3 = slt.value;
            // var v3 = slt.value;
 
            //2.2判断运算符是什么符号
            switch (v3) {
                case "+":
                    res.value = parseFloat(v1) + parseFloat(v2);
                    break;
                case "-":
                    res.value = parseFloat(v1) - parseFloat(v2);
                    break;
                case "*":
                    res.value = parseFloat(v1) * parseFloat(v2);
                    break;
                case "/":
                    res.value = parseFloat(v1) / parseFloat(v2);
                    break;
                case "%":
                    res.value = parseFloat(v1) % parseFloat(v2);
                    break;
            }
        }
    </script>
 
</body>
 
</html>

JavaScript编写一个简易计算器

热门文章

最新文章

相关课程

相关电子书

相关实验场景