制作简单的计算器，用到HTML5中的type=number这个input属性

最新推荐文章于 2024-02-16 13:11:49 发布

csdncsdn9876

最新推荐文章于 2024-02-16 13:11:49 发布

阅读量3.5k

点赞数

分类专栏： html5 javascript 文章标签： js

本文链接：https://blog.csdn.net/csdncsdn9876/article/details/51723638

版权

javascript 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

html5

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="number" id="num1"/>
<select id="slc">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="x">x</option>
    <option value="/">/</option>
</select>
<input type="number" id="num2"/>
<input type="button" value="=" id="btn"/>
<input type="number" id="sum">
<script>
    document.getElementById("btn").onclick = function(){
        var num1 = document.getElementById("num1").valueAsNumber;
        var num2 = document.getElementById("num2").valueAsNumber;
        var sum = 0;
        var select = document.getElementById("slc").value;
        alert(num1);
        alert(num2);
        alert(select);
        if(select == "+"){
            sum = num1 + num2;
        }else if(select == "-"){
            sum = num1 - num2;
        }else if(select == "x"){
            sum = num1 * num2;
        }else if(select == "/"){
            sum = num1 / num2;
        }
        document.getElementById("sum").valueAsNumber = sum;
    }
</script>
</body>
</html>

csdncsdn9876

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
制作简单的计算器，用到HTML5中的type=number这个input属性

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><input type="number" id="num1"/><select id="slc"> <option value="+">+</option> <option val
复制链接

扫一扫