JS案例----简易版计算器

最新推荐文章于 2025-03-12 14:38:40 发布

码农不秃呀

最新推荐文章于 2025-03-12 14:38:40 发布

阅读量181

点赞数

分类专栏：笔记文章标签： javascript 前端 servlet

本文链接：https://blog.youkuaiyun.com/weixin_53271010/article/details/126816729

版权

笔记专栏收录该内容

31 篇文章

订阅专栏

本文将展示如何使用JavaScript创建一个简易版的计算器。通过这段代码，读者可以了解到JavaScript在前端交互中的应用，以及如何处理用户的输入和计算逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="content">
    <select name="" id="">
        <option value="+"> + </option>
        <option value="-">-</option>
        <option value="×">×</option>
        <option value="÷">÷</option>
    </select>
    
    <input type="text" name="content">
    <button>=</button>
    <span>运算结果为:0</span>
</body>
<script>
    // 1.获取元素
    var inp=document.getElementsByName('content')
    var select=document.getElementsByTagName('select')[0]
    var btn=document.getElementsByTagName('button')[0]
    var span=document.querySelector('span')
    console.log(inp,select,btn,span);

    btn.onclick=function(){
        //判断你选择的运算符

        //1.输入的内容不能为空
        if(inp[0].value===""||inp[1].value===""){
            alert("输入的内容不能为空哦！")
        }else if(Number(inp[0].value)+'' ==NaN+''||Number(inp[1].value)+''==NaN+''){
             //2.输入的内容必须是数字
             alert("输入的不是数字 计算个锤子啊")
        }else{
            
        //3.正常情况
   //将表单获取的值转为数字
        var x=inp[0].value*1
        var y=inp[1].value*1
        switch (select.value) {
            case '+':
                // span.innerHTML=inp[0].value+inp[1].value
                span.innerHTML='运算结果为:'+(x+y)
                break;
                case '-':
                span.innerHTML='运算结果为:'+(x-y)
                break;
                case '×':
                span.innerHTML='运算结果为:'+(x*y)
                break;
                case '÷':
                span.innerHTML='运算结果为:'+(x/y)
                break;
        
            default:
                break;
        }
    }
        }

效果图