web练手--简单加法计算器

最新推荐文章于 2023-10-10 15:50:17 发布

一个爱摸鱼的前端

最新推荐文章于 2023-10-10 15:50:17 发布

阅读量3.2k

点赞数 5

分类专栏：前端学习

本文链接：https://blog.csdn.net/zhoumeng1998/article/details/82749158

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

废话不多说，直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>简单加法计算器</title>
    <style type="text/css">
        header{
            text-align : center; 
            width : 100%;
        }
        form{
            text-align : center; 
            width : 100%;
        }
    </style>
</head>
<body>
    <header>
        <h1>简单加法计算器</h1>
    </header>
    <form>
        数字1：<input type="text" id="text1">
        +数字2：<input type="text" id="text2">
        =<input type="text" id="text3">
        <br>
        <input type="button" value="求和" onclick="buttonClick()">
    </form>
    <script>
        function buttonClick() {
            var a = document.getElementById("text1").value;
            var b = document.getElementById("text2").value;
            var c = Number(a) + Number(b);
            document.getElementById("text3").value = c;
        }
    </script>
</body>
</html>