这本书已经读了几章了,想着试试能不能做出点东西,就简单的练了把手。觉得对于初学者,自己试着练练,效果还不错的。
挥刀要从轻的开始,起初的原因是和同事谈起曾经的逝水年华(小时候干的坏事)时说起了曾经的一篇课文,讲的是一个小朋友如何巧妙地从1到100累加起来的,猛然间我觉得可以用js算出来,说干就干。
function add(){ for(var i = 1; i <= 100; i ++){ var sum = 0; sum += i; } alert(sum); } add();
满心期待的点击运行,正打算欢呼之时,看到结果的那一刻整个人都石化了。结果居然是100,真是奇怪,仔细检查了下代码,发现犯了一个低级的错误,原来把sum声明在循环内了,这就相当于每循环一次,sum都被重新赋值为0,导致叠加变为了 sum = 0 + i ,并不是期望的那样,马虎。改吧,于是乎,把sum声明到了循环体外面,再次运行带到了想要的 5050 。
不过这并不能让我有太多的成就感,我们还可以把它变得更加智能。比如我想从2累加到10,那应该怎么办?想了下,加个参数就好了。
function add(a,b){ var sum = 0; for(var i = a; i <= b; i ++){ sum += i; } alert(sum);//54 } add(2,10);
在纸上算了算,确实正确。但是这样我只能在代码中进行修改,能不能把它放到界面上,我想让它变得更加有活性,开始值和结束值要按照我的心情来,想让它是多少就是多少,写程序就是要这么任性。
<input type = "text" id = "sum"> <input type = "button" value = "叠加" id = "click">
简单的做了一个文本框和一个点击按钮,期望在文本框中输入不同的数字,然后点击得到累加的结果。
var sum = document.getElementById(‘sum‘); var click = document.getElementById(‘click‘); click.addEventListener(‘click‘,function add(){ var number = sum.value.split(",");//将输入的内容转化为数组(默认输入的2个数字用“,”来隔开,比如输入1,3) var c = 0; var a = number[0]; var b = number[1]; for(var i = parseInt(a); i <= parseInt(b); i ++){ c +=i; } alert(c); },false);
再写的时候第一想到的是获取到文本框中的字符串,然后再将其转换为数组,通过数组拿到想要的值。如果是空格隔开2个数字的话,可以在用“||”继续添加条件,目前我只能做到特定符号隔开的情况,对于随意输入还没有想到很好的解决办法。对于获得文本框中的的数字,可以在split()中使用正则匹配,比如还是“,”隔开的,改为“/,/”,就可以了。当然也可以用正则进行匹配。
var sum = document.getElementById(‘sum‘); var click = document.getElementById(‘click‘); click.addEventListener(‘click‘,function add(){ var pattern = /(\d+),(\d+)/g; var c = 0; if(pattern.test(sum.value)){ var a = RegExp.$1; var b = RegExp.$2; } for(var i = parseInt(a); i <= parseInt(b); i ++){ c +=i; } alert(c); },false);
简单的解释下,\d是是匹配的时候查找数字,\d+是匹配至少包含一个数字的字符串,(\d+)是一个捕获组,为了方便进行捕获和赋值。test()函数从字面意思也可看出他是为了检测是否匹配,返回值为true和false,RegExp.$1是获取第一个捕获组,RegExp.$2获取第二个捕获组,这样就很容易得到“,”两边的数字了。
其实无论是用split()还是使用正则,思路是一样的,可能还有更简单的方法,但是目前还没有想到。
这个也可以再继续往下去延伸,比如说我得到这些值后,不去做累加,而是做一些判断条件,就像登录和注册一样。我觉得这样在学习的过程中可以去联想下各种场景,试着写写,不会的就去查,进展可能会快一些。