张宇_20210115张宇

知识点总结

1、BOM&DOM

实例1、实现都选与都不选

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="checkbox" name="item" value="60" />a
        <input type="checkbox" name="item" value="60" />b
        <input type="checkbox" name="item" value="60" />c
        <input type="checkbox" name="item" value="60" />
        <input type="checkbox" name="item" value="60" />e
        <hr />
        <input type="checkbox" id="all" onclick="checkall()">全选/全不选</input>
        <button type="button" onclick="reverse()">反选</button>
        <button type="button" onclick="sum()">结算</button>
        <p>总计:<span id="price">0</span>元</p>
        <script>
            var items = document.querySelectorAll("[name=item]");
            function checkall(){
                document.querySelector("#all");
                for(var i=0;i<items.length;i++){
                    var cur = items[i];
                    cur.checked=all.checked;
                }
            }
            function reverse(){
                for(i=0;i<items.length;i++){
                    var cur = items[i];
                    cur.checked = !cur.checked;
                }
            }
            function sum(){
                var sum=0;
                for(i=0;i<items.length;i++){
                    var cur = items[i];
                    if(cur.checked){
                        sum +=parseFloat(cur.value);
                    }
                }
                document.querySelector("#price").innerText = sum;
            }
        </script>
    </body>
</html>

实例2、实现心形的鼠标点击方式

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var html=document.querySelector("html");
            html.addEventListener("click",heart,false);
            function heart(e){
                var fontSize=16;
                var left=e.clientX - fontSize/2;
                var top=e.clientY - fontSize/2;
                var b=document.createElement("b");
                b.innerText="❤";
                b.style="font-size: " + fontSize + "px;color" + randomColor() + ";position:absolute;left:"+ left + "px;top:" + top + "px;opacity:1;";
                document.body.appendChild(b);
                var timer=setInterval(function(){
                    var top=b.style.top.replace("px","");
                    b.style.top=top - 1 + "px";
                    b.style.opacity -= 0.05;
                    if(b.style.opacity < 0){
                        document.body.removeChild(b);
                        clearInterval(timer);
                    }
                }, 100);
            }
            function randomColor(){
                return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")";
            }
        </script>
    </body>
</html>

2、JavaScript

​ 注意:JavaScriptjava没有关系!另外JavaScript严格区分大小写,一般使用小写。JavaScript一般写在HTML内部,在 <script>标签中编写,可以放在<body><head>部分中。

心得体会

​ 今天的学习过程中遇到的困难挺多的,主要是有关表格背景颜色那一部分,另外印象挺深的就是关于 鼠标点击时会出现爱心那一部分,感觉挺有趣的,并且成功实现了,最后就是关于JavaScript的一些基本知识掌握的还行。

标签

评论


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