JS学习笔记

<style>
    body{font-size: 12px;}
    .outer{
        width: 500px;
        margin: 0 auto;
    }
    span{
        color: #999;
    }
    input{
        width: 220px;
        line-height: 20px;
        border: 1px solid #ccc;
        margin-bottom: 12px;
    }
    p{
        font-size: 20px;
        color: red;
        font-weight: bold;
    }
    </style>

    <script>
    window.onload = function()
    {
        var oBtn = document.getElementsByTagName('button')[0];
        var oTxt = document.getElementsByTagName('input')[0]; 
        // 在这里获取元素，在点击之后再获取元素的值。不能直接在这获取value，因为输入框的数字是变动的，不能以初始值为准。
        
        var oP = document.getElementsByTagName("p")[0];
        
        var oResult = 0;
    
        // 在鼠标 keyup 输入框的时候，判断输入的内容，除了数字和,逗号，其他的字符不能输入。
        oTxt.onkeyup = function ()
        {
            this.value = this.value.replace(/[^(d)|(,)]/,"") // 这里用的正则还不熟悉！
        };

        oBtn.onclick = function()
        {
            // var aNum = parseInt(oTxt.value.split(",")) ;  // 不能直接把数组parseInt
            var aNum = oTxt.value.split(",");

            for(var i=0; i<aNum.length; i++)
            {
                oResult += parseInt (aNum[i]);
            };   

            oP.innerHTML = oResult; 
            // 这里必须先有对象，innerHTML是DOM用法。 oResult的值是赋给对象的！
        }
    };
    </script>
</head>
<body>
<div class="outer">
    <input type="text" value="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15">
    <span>输入数字求和，数字之间用半角","号分隔</span>
    <br>
    <button>求和</button>
    <p></p>
</div>
</body>
相关推荐
