简单的数组求和

最新推荐文章于 2022-03-28 16:01:23 发布

u011263845

最新推荐文章于 2022-03-28 16:01:23 发布

阅读量1k

点赞数 1

分类专栏： javascript&&jquery 文章标签：数组求和 js

本文链接：https://blog.youkuaiyun.com/u011263845/article/details/47173003

版权

javascript&&jquery 专栏收录该内容

34 篇文章

订阅专栏

demo：http://codepen.io/tianzi77/pen/YXdXjb

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            color: #999;
            font: 12px/1.5 Tahoma;
        }

        #outer {
            width: 500px;
            margin: 0 auto;
        }

        #outer input {
            padding: 3px;
            border: 1px solid #ccc;
            font-family: inherit;
            width: 220px;
            margin-right: 10px;
        }

        .sum {
            font-size: 30px;
            color: #abcdef;
        }
    </style>
    <script>
        window.onload = function () {
            var oButton = document.getElementsByTagName('button')[0];
            var oStrong = document.getElementsByTagName('strong')[0];
            var oInput = document.getElementsByTagName('input')[0];

            oButton.onclick = function () {
                var sum = 0;
                var oInput1 = document.getElementsByTagName('input')[0].value.split('+');
                for (var i in oInput1) {
                    sum += parseInt(oInput1[i])
                }
                oStrong.innerHTML = sum;
            }
        }
    </script>
</head>

<body>
    <div id="outer">
        <label for="">
            <input type="text" value="1+2+3+4+5+6+7+8+9+10"><span>输入数字求和，数字之间用半角"+"号分隔</span>
        </label>
        <p>
            <button>求和</button>
        </p>
        <strong class="sum"></strong>
    </div>
</body>

</html>