this练习
<div class="box">
<h2>是小仙女的就点击</h2>
<div id="btn">我非常赞同<span id="spanNum">0</span></div>
</div>
错误方法
var obtn=document.getElementById("btn");
var spanNum=document.getElementById("spanNum");
obtn.onclick=function(){
var count=0;
count++;
spanNum.innerHTML=count;
};
>>从0-1,之后不会变成2
方法一
1、利用全局作用域不销毁的原理,把需要累加的数字定义为全局的变量
方法一
var count=0;
obtn.onclick=function(){
count++;
spanNum.innerHTML=count;
};
弊端:在项目中为了防止全局变量之间的冲突,我们一般禁止或者减少使用全局变量的
方法二
方法二1.0
~function(){
var count=0;
obtn.onclick=function(){
count++;
spanNum.innerHTML=count;
};
}();
方法二2.0
obtn.onclick=(function(){
var count=0;
return function(){
count++;
spanNum.innerHTML=count;
}
})();
弊端:有一个不销毁的私有作用域,所以占那么一丢丢的内存
方法三
3、利用innerHTML的方式处理:每一次点击的时候都先到页面中获取最新的值,任何累加,最后把累加的结果重新放回去
方法三
obtn.onclick=function(){
// spanNum.innerHTML获取页面的内容返回的是一个字符串
//spanNum.innerHTML=spanNum.innerHTML+1;
spanNum.innerHTML++;
};
弊端:每一次都需要把页面中的内容转化为字符串,任何再累加,累加完再重新添加回去,重新添加的时候,浏览器都要重新渲染
方法四
4、利用自定义属性存储(推荐)
方法四
obtn.count=0;
obtn.onclick=function(){
spanNum.innerHTML=++this.count;
};