js 实现计算器效果

代码

复制代码
<!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" id="fir">
    <select>
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" id="sec">
    <button>=</button>
    <input type="text" id="res">
    <script>
        //用户 在 前两个input中  输入数字  点击等号按钮  根据select中的运算符 进行指定的运算 并将结果显示在第三个input中
        //1.获取元素
        var inps = document.getElementsByTagName("input");
        var btn = document.getElementsByTagName("button")[0];
        var sel = document.getElementsByTagName("select")[0];
        //2.给按钮 添加 点击事件
        btn.onclick = function(){
            //3.获取运算符 
            var logo = sel.value;
            var num1 = Number(inps[0].value);
            var num2 = parseFloat(inps[1].value);
            //4.进行计算  根据运算符 进行相应的计算
            switch(logo){
                case "+" : inps[2].value = num1+num2; break;
                case "-" : inps[2].value = num1-num2; break;
                case "*" : inps[2].value = num1*num2; break;
                case "/" : inps[2].value = num1/num2; break;
            }

        }


    </script>
</body>

</html>
复制代码

 

posted @   石海莹  阅读(256)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 字符编码：从基础到乱码解决
历史上的今天：
2019-09-17 SEO搜索引擎优化是什么？
点击右上角即可分享
微信分享提示
AI IDE Trae