百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

D16

作者张雨薇课程第十六天,开始感受JS的乐趣854次浏览82018-05-08 07:31

任务一:

点对应加减乘除按钮的时候,将两个输入框中的数字做对应的算术,并将结果显示在idresult的p标签内。

最初代码

document.getElementById('add-btn').onclick = function () {
        var result = document.getElementById('first-number').value + document.getElementById('second-number').value;
    document.getElementById('result').innerHTML = result;
}

此时输出的结果:0 + 0 = 00,显然直接从Input里面获取到的数据是String类型

学习使用parseInt(string, radix)函数
parseInt() 函数解析一个字符串参数,并返回一个指定基数的整数 (数学系统的基础)。

parseInt(string, radix);

变量

string
要被解析的值。如果参数不是一个字符串,则将其转换为字符串(使用  ToString 抽象操作)。字符串开头的空白符将会被忽略。

radix
一个介于236之间的整数(数学系统的基础),表示上述字符串的基数。比如参数"10"表示使用我们通常使用的十进制数值系统。始终指定此参数可以消除阅读该代码时的困惑并且保证转换结果可预测。当未指定基数时,不同的实现会产生不同的结果,通常将值默认为10

返回值

返回解析后的整数值。 如果被解析参数的第一个字符无法被转化成数值类型,则返回 NaN。

注意:radix参数为n 将会把第一个参数看作是一个数的n进制表示,而返回的值则是十进制的。例如:

parseInt('123', 5) // 将'123'看作5进制数,返回十进制数38 => 15^2 + 25^1 + 3*5^0 = 38

改正后代码

document.getElementById('add-btn').onclick = function () {
            var result = parseInt(document.getElementById('first-number').value) + parseInt(document.getElementById('second-number').value);
            document.getElementById('result').innerHTML = result;
}
4条评论