王宇凡_20210115王宇凡

知识点总结

JavaScript

用JavaScript实现全选反选以及结算功能

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>check</title>
    </head>
    <body>
        <input type="checkbox" name="item" value=1/>A
        <input type="checkbox" name="item" value=1/>B
        <input type="checkbox" name="item" value=1/>C
        <input type="checkbox" name="item" value=1/>D
        <input type="checkbox" name="item" value=1/>E
        <input type="button" name="checkAll" onclick="checkAll()" value="全选/全不选"/>
        <input type="button" name="checkother" value="反选" onclick="co()" id="co"/>
        <input type="button" name="over" value="结算" onclick="over()">
        <div id="overDiv" style="color: red; font-size: 20px;"></div>
        <script type="text/javascript">
            function checkAll(){
                var items = document.querySelectorAll("[name=item]");
                // items.checked = "true";
                var a = 0 ;
                for(var i = 0 ;i<items.length;i++){
                    // var c = items.checked;
                    if(items[i].checked){
                        a++;
                        if(a==5){
                        co();
                        }
                    }else{
                        bb();
                    }
                    }
                }
                function bb(){
                    var items = document.querySelectorAll("[name=item]");
                    // items.checked = "true";
                    for(var i = 0 ;i<items.length;i++){
                        // var c = items.checked;
                            items[i].checked = "checked";
                        }
                }
            function over(){
                var items = document.querySelectorAll("[name=item]");
                var result = 0 ;
                for(var i = 0 ;i<items.length;i++){
                    // console.log(items);
                if(items[i].checked){
                result += parseInt(items[i].value);
                }
                }
                var div = document.getElementById("overDiv");
                div.innerText = parseInt(result);
            }
            function co(){
                var items = document.querySelectorAll("[name=item]");
                // items.checked = "true";
                for(var i = 0 ;i<items.length;i++){
                    items[i].checked = !items[i].checked ;
                }
            }
        </script>
    </body>
</html>

利用复选框(checkbox)的checked来获取状态,true为选择,false为未选择。经过循环判断实现此功能

利用浏览器F12调试JavaScript代码

Console

控制台页面,在里面可以看到页面加载、响应中产生的错误(红色),警告(黄色)。如果HTML页面有语法或其他错误,可以到这边查看。

Console.log()
利用Console.log(),可以在页面加载或脚本执行时,在控制台打印输出。
比如我的HTML页面加载时,里面有一行代码Console.log("页面加载中...."),那么,页面加载时就会在控制台显示:页面加载中....

控制台可以运行JavaScript代码

比如我想测试一下js中Date类的使用,包括如何初始化,如何赋值,如何转换格式等。那么我只需要在控制台区域书写相关脚本即可。

调试源代码

在浏览器中,我们还可以使用Source界面,对前端的源码进行调试。点击代码左侧(带有行号)处,就可以建立一个断点,当执行到这段代码时,就会触发断点,我们可以看到变量运行中的值。

虽然在这个页面,我们可以给HTML、CSS、JavaScript都打上断点,但只有JavaScript的断点是起作用的。

个人心得

经过对js的学习和代码调试的训练。可以有效的编写js代码和调试,对今后的HTML页面的js脚本编写很有帮助。希望在以后的页面中,可以根据自己的需求,多写一些对页面动态效果有帮助的js代码。多利用浏览器来调试自己的代码,利用断点来找出bug。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1