js用parseInt解析数字并求和

最新推荐文章于 2019-11-14 23:18:50 发布

kelokole

最新推荐文章于 2019-11-14 23:18:50 发布

阅读量357

点赞数 1

本文链接：https://blog.csdn.net/qq_44254672/article/details/91850250

版权

<!DOCTYPE HTML>
<html>
    <head>
        <title>用parseInt解析数字并求和</title>
        <mate charset="utf-8" />
        <style type="text/css">
        *{ padding: 0px; margin: 0px; text-align: center; }
        .cpp1{ margin: 30px auto; font-size: 20px; }
        .cpp1 span, .cpp1 input{ margin: 0px 5px 0px 5px; }
        .cpp1 input{ width: 200px; height: 30px; }
        .cpp1 button{ width: 50px; height: 34px; margin-left: 10px; }
        .cpp1 strong{ color: green; }
        </style>
    </head>
    <body>
        <div class="cpp1">
            <input type="text" />
            <span>+</span>
            <input type="text" />
            <span>=</span>
            <strong>?</strong>
            <button>求和</button>
        </div>

        <script type="text/javascript">
            window.onload = function(){
                // 获取元素
                var inputext = document.getElementsByClassName("cpp1")[0].getElementsByTagName("input");
                var sumbtn = document.getElementsByClassName("cpp1")[0].getElementsByTagName("button")[0];
                // 遍历事件
                for(var i = 0; i < inputext.length; i++){
                    // 键盘松开事件
                    inputext[i].onkeyup = function(){
                        // 将文本框中非整数替换
                        this.value = this.value.replace(/[^\d]/, "");
                    }
                }
                // 求和按钮点击事件
                sumbtn.onclick = function(){
                    if(inputext[0].value == "" || inputext[1].value == "")
                        alert("请输入数字！");
                    else
                        document.getElementsByTagName("strong")[0].innerHTML = parseInt(inputext[0].value) + parseInt(inputext[1].value);
                }
            }
        </script>
    </body>
</html>

效果图：

kelokole

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js用parseInt解析数字并求和

<!DOCTYPE HTML><html> <head> <title>用parseInt解析数字并求和</title> <mate charset="utf-8" /> <style type="text/css"> *{ padding...
复制链接

扫一扫