10-综合练习2

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <title>Title</title> 
 </head> 
 <body> 
  <div class="box"> 
   <h2>认为你自己很帅的请点赞</h2> 
   <div id="btn">
    我非常赞同你的观点
    <span id="spanNum">0</span>
   </div> 
  </div> 
  <script type="text/javascript">
        var oBtn = document.getElementById("btn");
        var spanNum = document.getElementById("spanNum");

        // 1 全局
        // 利用全局作用域不销毁的原理,把需要累加的数字,定义为全局的变量
        // 弊端 : 在项目中为了防止全局变量之间的冲突,我们一般都是禁止或者减少使用全局变量
//        var count = 0;
//        oBtn.onclick = function () {
//            count++;
//            spanNum.innerHTML = count;
//        }


        // 2.自己形成一个不销毁的私有作用域来保存我们需要累加的数字
        // 弊端: 有一个不销毁的私有作用域 ,所以占那么一丢丢的内存
        ~function () {
            var count = 0;
            oBtn.onclick = function () {
                count++;
                spanNum.innerHTML = count;
            }
        }();

        oBtn.onclick = (function () {
            var count = 0;
            return function () {
                count++;
                spanNum.innerHTML = count;
            }
        })();


        // 3.利用innerHTML的方式处理:每一次点击的时候都剪刀页面中获取到最新的值,然后累加,最后把累加的结果放回去
        // spanNum.innerHTML 获取的页面中的内容返回的是一个字符串
        // 弊端: 每一次都需要把页面中的内容先转换成字符串然后再累加,累加完再重新添加回去,当重新添加的时候浏览器都要重新的渲染一下
        oBtn.onclick = function () {
            spanNum.innerHTML++;
        }


        // 4.利用自定义属性存储(推荐)
        oBtn.count = 0;
        oBtn.onclick = function () {
            spanNum.innerHTML = ++this.count;
        }
    </script>  
 </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容