switch的扩展之简易计算器

最新推荐文章于 2024-02-01 15:15:34 发布

哼,小呀么小胖子

最新推荐文章于 2024-02-01 15:15:34 发布

阅读量434

点赞数

分类专栏：前端面试题总结

本文链接：https://blog.csdn.net/qq_43412333/article/details/102155472

版权

前端面试题总结专栏收录该内容

45 篇文章 0 订阅

订阅专栏

最终样式:
在这里插入图片描述
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input id="num1">
    <select id="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
        <option value="%">%</option>
    </select>
    <input id="num2">
    <button id="calc">计算</button>
    <input id="result">
</body>
<script>
//获取计算所代表的元素,当其发生点击事件时
    var butInput=document.getElementById("calc");
    butInput.onclick=function(){
    //获取该所输入的数所代表的元素,及其本身的值
        var num1Input=document.getElementById("num1");
        var number1=num1Input.value;
        var num2Input=document.getElementById("num2");
        var number2=num2Input.value;
        var optInput=document.getElementById("opt");
        var option=optInput.value;
        var resInput=document.getElementById("result");
   
    switch(option){
    //从页面中获取的值都是字符串类型,所以在+号计算时需要进行强制转换,而其它几个其实不必进行强制转换,因为其本身自带隐式转换
        case "+":
            resInput.value=Number(number1)+Number(number2);
       case "-":
            resInput.value=Number(number1)-Number(number2);
            break;
        case "*":
            resInput.value=Number(number1)*Number(number2);
            break;
        case "/":
            if(number2==0){
                resInput.value="被除数不能为0"
            }else{
            resInput.value=(Number(number1)/Number(number2)).toFixed(2);}
            break;
        case "%":
        if(number2==0){
                resInput.value="被除数不能为0"
            }else{
            resInput.value=(Number(number1)%Number(number2)).toFixed(2);}
            break;
    }
}
    
</script>
</html>

哼,小呀么小胖子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
switch的扩展之简易计算器

最终样式:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
复制链接

扫一扫

专栏目录