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

废话不多说,直接上代码

<!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>

猜你喜欢

转载自blog.csdn.net/zhoumeng1998/article/details/82749158