JavaScript实现简单的加减乘除

最新推荐文章于 2023-12-06 14:43:28 发布

原创最新推荐文章于 2023-12-06 14:43:28 发布 · 2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#js #JavaScript #html

JavaScript 同时被 2 个专栏收录

9 篇文章

订阅专栏

个人总结

6 篇文章

订阅专栏

该博客介绍了如何利用HTML和JavaScript原生代码实现简单的加、减、乘、除运算。通过示例展示了具体的实现过程。

使用简单的html和原生的Javascript进行加减乘除运算

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>IFE ECMAScript</title>
</head>

<body>
    <input id="first_number" type="number" placeholder="第一个数字">
    <input id="second_number" type="number" placeholder="第二个数字">
    <button id="add-btn">加</button>
    <button id="minus-btn">减</button>
    <button id="times-btn">乘</button>
    <button id="divide-btn">除法</button>
    <p id="result">运算结果</p>
    <script>
        var x = document.getElementById("first_number");
        var y = document.getElementById("second_number");

        document.getElementById("add-btn").onclick = function() {
                document.getElementById("result").innerHTML = parseFloat(x.value) + parseFloat(y.value);
            },
            document.getElementById("minus-btn").onclick = function() {
                document.getElementById("result").innerHTML = parseFloat(x.value) - parseFloat(y.value);
            },
            document.getElementById("times-btn").onclick = function() {
                document.getElementById("result").innerHTML = parseFloat(x.value) * parseFloat(y.value);
            },
            document.getElementById("divide-btn").onclick = function() {
                document.getElementById("result").innerHTML = parseFloat(x.value) / parseFloat(y.value);
            }
    </script>
</body>
</html>

运行结果如下：

加：

减：

乘：

除：