[读码时间] 用parseInt解析数字，并求和

说明：代码取自网络，注释为笔者学习时添加！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>用parseInt解析数字，并求和</title>
    <style>
        body{
            font:12px/1.5 arial;/*行高18px*/
            text-align:center;/*文本居中*/
        }
        .f-text{
            width:50px;
            border:1px solid #ccc;/*灰白*/
            background:#f0f0f0;/*浅白*/
            font-family:inherit;/*继承字体*/
            padding:3px;/*内边距*/
        }
        span{
            color:green;
            padding-right:10px;
            font-weight:700;/*字体粗细*/
        }
    </style>
    <script>
        window.onload = function () {//等待dom加载完毕后执行
            var aInput = document.getElementsByTagName("input");//获取所有input元素，返回一个集合
            var aSpan = document.getElementsByTagName("span")[0];//获取span元素中的第一个
            var i = 0;
            for (i = 0; i < aInput.length - 1; i++) {
                aInput[i].onkeyup = function () {//注册keyup事件
                    this.value = this.value.replace(/[^\d]/, ""); //获取input值，调用 replace去除所有非数字字符
                }
            }
            aInput[2].onclick = function () {//给求和按钮添加click事件
                (aInput[0].value == "" || aInput[1].value == "") ?//三元操作法，检测输入是否为空，为空弹出提示
                alert("请输入数字!") :
                aSpan.innerHTML = parseInt(aInput[0].value) + parseInt(aInput[1].value);//调用parseInt把字符解析为整型数字，默认转换为10进制
            }
        };
    </script>
</head>
<body>
    <input type="text" class="f-text" /><strong>+</strong><input type="text" class="f-text" /><strong>=</strong><span>?</span><input type="button" value="求和" />
</body>
</html>
View Code

 

posted @ 2017-02-25 02:50  sx00xs  阅读(241)  评论(0)  编辑  收藏  举报