javascript + html 入门之实现一个网页计算器

最新推荐文章于 2024-07-02 17:35:34 发布

枯萎的海风

最新推荐文章于 2024-07-02 17:35:34 发布

阅读量5k

点赞数

分类专栏： javascript html 文章标签： javascript

本文链接：https://blog.csdn.net/zhyh1435589631/article/details/51527625

版权

html 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

1. 前言

最近学习javascript，正好看到一个网页计算器的列子，于是顺手实现了一下，这里做一些记录

2. 实现效果

这里写图片描述

3. 实现代码

<!-- index.html -->
<html>
    <head>
        <title>Calculator</title>
        <script src = "calc.js" type = "text/javascript"></script>
    </head>

    <body>
        <div align = "center" style = "margin-top : 50px">
            <img src = "yurisa.jpg" height = "400px" >
        </div>

        <form name = "form1">
            <div align = "center" style = "margin-top : 30px">
                <input type = "text" placeholder = "left" name = "left">+
                <input type = "text" placeholder = "right" name = "right">=
                <input type = "text" readonly = "readonly" placeholder = "result" name = "result">
                <input type = "button" value = "submit" onclick = "add()">
            </div>
        </form>
    </body>

</html>

# calc.js
function add(){
    var left = document.form1.left.value;
    var right = document.form1.right.value;
    var res = Number(left) + Number(right);
    #alert(typeof(res))
    document.form1.result.value = String(res);
}