js笔记01

最新推荐文章于 2024-07-12 21:43:52 发布

JasonJaiy

最新推荐文章于 2024-07-12 21:43:52 发布

阅读量146

点赞数

分类专栏： js笔记

本文链接：https://blog.csdn.net/weixin_40652759/article/details/99794361

版权

js笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

js笔记第一篇，计算器

- body的代码
- 下面是运行效果，啥都没有，就简单实现功能功能

批话不说我就直接放代码吧，毕竟是入门代码

body的代码

<body>
<input id="first-number" type="number" value="0" placeholder="第一个数字">
<input id="second-number" type="number" value="0" 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>
    document.getElementById("add-btn").onclick=function() {
        document.getElementById("result").innerHTML = parseFloat(document.getElementById("first-number").value) + parseFloat(document.getElementById("second-number").value);
    }

    document.getElementById('minus-btn').onclick = function () {
        var result = parseFloat(document.getElementById('first-number').value) - parseFloat(document.getElementById('second-number').value);
        document.getElementById('result').innerHTML = result;
    }

    document.getElementById('times-btn').onclick = function () {
        var result = parseFloat(document.getElementById('first-number').value) * parseFloat(document.getElementById('second-number').value);
        document.getElementById('result').innerHTML = result;
    }

    document.getElementById('divide-btn').onclick = function () {
        var result = parseFloat(document.getElementById('first-number').value) / parseFloat(document.getElementById('second-number').value);
        document.getElementById('result').innerHTML = result;
    }

</script>
</body>