zoukankan      html  css  js  c++  java
  • 使用javascript实现的一些功能

                     今天学习了javascript中的事件,已经接近尾声,可以说明天跨入jquery的学习啦,学习了一周的javascript,感觉还没有掌握其中学习的微妙之处,javascript使用起来是比较灵活的,而且很多浏览器的兼容性还是不一样的,嘿嘿,或许这就是原因的所在吧,在事件的处理上面还是很容易理解的,前面学习了那么多的语法知识以及对DOM的操作,想必在事件的学习上还是很容易接受的,就来总结一下吧。

             一.this的对象的区分

     <script>             //实现html与js分离的原则
            window.onload = function () {
                document.getElementsByName("btn")[0].onclick = function () {
                    alert("我点击的是第一个按钮");
                    alert(this);            //this指的是windw
                    alert(this.value);      //this指的是所因为0的按钮
                };
                document.getElementsByName("btn")[1].onmouseenter = function () {
                    alert(this.value);          //指的是鼠标进入事件
                };
    
                function showMsg() {
                    alert("my name is btn ");
                };
                document.getElementsByName("btn")[2].onclick=showMsg; //鼠标的单击事件
            };
        </script>
    <body>
        <form>
            <input type="button" name="btn" value="点击" /><br />
            <input type="button" name="btn" value="点击函数执行"  /><br />
            <input type="button" name="btn" value="函数体赋值"  />
        </form>
    </body>

                  其实刚开始接触javascript就接触了this,那时间虽然知道当前页面有个父类是window,但是却不知道在直接alert(this)的this为window,一直在迷茫中也没有明白,后来还是看了一个有关闭包的问题才对this有了了解,可以说就在这时间我才分清楚this在什么情况下指的是window,在什么情况下是当前的对象。就来看下我理解this时间的例子:

    <script>
            var name = "my name";
            var resoult="";
            var object = {
                name: "my object",
                getNameFunc: function () {
                    return function () {
                        return this.name;
                    };
                }
            };
            alert(object.getNameFunc()());
        </script>
    
    <script>
            var name = "my name";
            var resoult="";
            var object = {
                name: "my object",
                getNameFunc: function () {
                    var that = this;
                    return function () {
                        return that.name;
                    };
                }
            };
            alert(object.getNameFunc()());
        </script>

                   可以看下上面的两个例子的区别,一个是直接返回name,一个是把this赋值给that,而第一个弹出的值是my name,第二个弹出的值是my object,嘿嘿,我刚开始直接看这个例子时间没考虑很多,只是猜一猜的心态感觉第一个是object,第二个是name,恰恰相反的是,第一是name,第二个是object,这个说起来只有分析,但是你尝试的时间结果就在你面前,你也不得不相信啦,至于为什么会是这样的结果,还是我师傅给的解释:javascript是动态(或者动态类型)语言,this关键字在执行的时候才能确定是谁。所以this永远指向调用者,即对‘调用对象‘者的引用。第一部分通过代码:object.getNameFunc()调用返回一个函数。这是个返回的函数,它不在是object的属性或者方法,此时调用者是window。因此输出是 The Window;第二部分,当执行函数object.getNameFunc()后返回的是:function(){return that name};此时的that=this,而this指向object,所以that指向object,无论执行多少次,都是执行对object的引用,所以弹出的是my object。这个还是最好理解的吧,嘿嘿。

                    二.鼠标按下和按钮提交事件

    <script>
            window.onload = function () {      
                document.body.getElementsByTagName("span")[0].onmousedown = function (e) {
                    var e = e || window.event;         //在这里鼠标按下事件有三种情况,0代表鼠标左键按下事件,1代表鼠标滚轴按下事件,2代表右键按下事件
                    alert(e.button);
                };
                document.getElementsByName("name")[0].onsubmit = function (e) {
                    e.preventDefault();        //阻止默认行为的发生          
                };
            };
        </script>
    <body>
        <p style="background-color:pink">1234</p>
        <span style="background-color:yellow">元素</span>
        <input type="submit" name="name" value="提交 " id="submit" />
    </body>

                    在写鼠标的onmousedown事件时间,这个就是要考虑其他的情况啦,我上面的注释写的鼠标的左右和滚轴键按下的事件弹出的数字,在IE里卖弄是不一样的,其他浏览器是这样的情况,IE中左键是0,滚轴键是4,鼠标的右键按下事件则是2,这个是需要注意的。另外,在第二个submit提交的事件中传的一个参数e,很确定的说学习了上面的this,在这里应该能够反映过来e指的就是我们的window对象,可以使用preventDefault()来阻止浏览器加载就要跳转的页面。

                      三.冒泡与捕获

    <script>            
            window.onload = function () {
                document.getElementById("outdiv").onclick = function () {
                    alert("我是外层div");
                };
                document.getElementById("div").onclick = function () {
                    alert("我是中层div");
                };
                document.getElementById("innerdiv").onclick = function () {
                    alert("我是内层div");
                };
            };
    </script>
    <body>
        <div style="background-color:yellow;height:800px" id="outdiv">
            123
            <div style="background-color:red;height:600px" id="div">
                234
                <div style="background-color:silver" id="innerdiv">
                    345
                </div>
            </div>
        </div>
        <a href="http://www.baidu.com" id="link">链接</a>
    </body>

                    冒泡事件:其实就是在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。上面的定义看过后不一定能够真正的了解,还是实施操作实例吧,嘿嘿,很简单的说:冒泡事件,即点击内层的div时间中层的和外层的都可以触发,点击中层的外层的可以触发。这是看上面的实例写的。

                     .按键按下事件

    <script>
             window.onload = function () {
                 document.getElementById("txt").onkeydown = function () {
                     var length = this.value.length;
                     if (length > 150) {
                         return false;
                     }
                     else {
                         document.getElementById("span").innerHTML = length + "/150";
                     }
                 };
             };   
         </script>
    <body>
        <textarea id="txt" style="background-color:silver" rows="20" cols="20">
        </textarea><span id="span">0/150</span>
    </body>

                                         

                   看到按键按下事件可能很模=迷惑,这个事件能有什么用那?不要着急,其实像上面的事件的实现我们就可以想象我们在qq空间发表说说时间是不是有一个限制,最多的字是多少?当达到一定字的数量输入的字即被忽略。在这里使用的就是按键的按下事件。

                   五.页面刷新事件

    <script>
            function fresh() {
                window.location.reload(); //调用location对象的reload函数
            }
            setTimeout("fresh()",10000);
        </script>
    <body>
     <p>页面正在刷新</p><span id="span"></span>
    </body>

                   页面刷新使用的reload方法,这里方法一般用于要求不断更新数据的情况下,不断更新数据当然需要的不是手动的更新,而是页面自动更新,这样的情况主要使用于像12306的预定火车票,甚至更精确地是炒股的页面。

                   六.页面的前进与后退

    <body>
         <span>我是第一个标签</span><a href="007.html">007back</a>
    </body>
    <script>
            window.onload = function () {
                document.getElementById("btn").onclick = function () {
                    window.history.back();         //返回到上一页
                };
                document.getElementById("back").onclick = function () {
                    window.history.farword();          //前进到下一页
                };
            }
        </script>
    <body>
        <input type="button" name="name" value="向前 " id="btn" />
        <input type="button" name="name" value="退后 " id="back" />
    </body>
    <body>
        最后以及节点<a href="007.html">退后</a>
    </body>

                   前几天就学习了页面的前进与后退使用window的history这个属性,但是仅仅学习了后退使用的是history的back()方法或者在IE上面也可以使用go(-1),现在学习下前进页面则使用的是history的farword()方法,这样实现了页面的前进与后退。

                     七.页面在一定的时间内未发生事件则关闭 

    <script>
            window.onload = function () {
                document.getElementsByTagName("body")[0], onclick = function () {
                    var bool = true;
                    function clickBody() {
                        bool= false;
                    };
                    setInterval(function () {
                        if (bool) {
                            window.close();
                        }
                        else {
                            bool = true;
                        };
                    },10000);
                };
            };
        </script>
    <body>
        <p>如果10秒钟之后不操作,那么页面自动关闭</p>
    </body>

                     这个功能的实现可能会使用在我们个人的的信息需要保密,当我们长时间未操作界面即可让他关闭即可。有助于保护我们的个人隐私信息。

              八.广告的实现

    <script>
            function showAdPic() {
                var ad = document.getElementById("ad");
                ad.innerHTML = "<img src='1.jpg' width='300' height='200'>";
                setTimeout(function () {
                    ad.style.display = 'none';
                },10000)
            }
    
            window.onload = showAdPic;
        </script>
    <body>
        <p>网页内容上部</p>
        <p id="ad"></p>
        <p>网页内容下部</p>
    </body>

                    说起来广告页面,我们都很讨厌的,嘿嘿,这是一种最简单的方法实现的广告的页面的呈现,即在这里是呈现10钟后消失。

                     九.五角星实现评分的效果

    <script>
             window.onload = function () {
                 var isClicked;
                 var spansnode = document.getElementsByTagName("span");
                 for (var i = 0; i < spansnode.length; i++) {
                     spansnode[i].onmouseover = function () {// 鼠标进入的事件
                         if (isClicked) return;
                         for (var j = 0; j < spansnode.length; j++) {
                             spansnode[j].innerHTML = "";
                             if (spansnode[j] === this) {
                                 break;
                             }
                         }
                     };
                     spansnode[i].onmouseout = function () {// 鼠标离开事件
                         if (isClicked) return;
                         for (var j = 0; j < spansnode.length; j++) {
                             spansnode[j].innerHTML = "";
                         }
                     };
                 }
             }
        </script>
    <body>
    <div>
       <span>☆</span> <span>☆</span> <span>☆</span> <span>☆</span> <span>☆</span>
    </div>
    </body>

                                     

                   上面的功能其实也是我们很熟悉的,最常见的地方就是我们在淘宝买完商品后对店家的评分,功能其实就是这样实现的。

            十.菜单的事件

    <style>
            .meun {
                list-style: none;
                 400px;
                margin: 10px auto;
            }
                .meun li {
                    float: left;
                     98px;
                    border: 1px solid black;
                }
                .meun a {
                    color: black;
                     100%;
                }
                    .meun a:hover {
                        background-color: pink;
                    }
            .curr {
                background-color: pink;
            }
        </style>
        <script>
            window.onload = function () {
                var currentIndex = 1;
                var menunodes = document.getElementById('menu');
                var itemslinode = menunodes.children;
                for (var i = 0; i < itemslinode.length; i++) {
                    itemslinode[i].onmouseover = function () {
                        this.className = 'menuname';
                    };
                };
            };
        </script>
    <body style="  text-align:center">
       <ul class="menu" id="menu">
           <li><a href="#" class="a">菜单</a></li>
           <li><a href="#" class="a" >菜单</a></li>
           <li><a href="#"  class="a">菜单</a></li>
           <li><a href="#"  class="a">菜单</a></li>
       </ul>
    </body>

                       好啦,今天就写到这里,可以说javascript的基本知识要告一段落啦,下面就要学习它的一个库JQuery,熟悉了javascript不知道学习jquery是否真的很简单,但是无论怎样都想以一种诚恳的态度对待,相信只有这样学习起来才不会输在起点上面,嘿嘿,明天继续加油!

    我是小白,新建立了一个的群:461431726,希望在这里和大家一起交流,共同学习。前端的话建议加群:646564351,谢谢
  • 相关阅读:
    [CodeForces]Codeforces Round #429 (Div. 2) ABC(待补)
    About Me
    2018-06-14
    Codeforces Codeforces Round #484 (Div. 2) E. Billiard
    Codeforces Codeforces Round #484 (Div. 2) D. Shark
    Codeforces Educational Codeforces Round 44 (Rated for Div. 2) F. Isomorphic Strings
    Codeforces Educational Codeforces Round 44 (Rated for Div. 2) E. Pencils and Boxes
    Codeforces Avito Code Challenge 2018 D. Bookshelves
    Codeforces Round #485 (Div. 2) D. Fair
    Codeforces Round #485 (Div. 2) F. AND Graph
  • 原文地址:https://www.cnblogs.com/dyxd/p/4220234.html
Copyright © 2011-2022 走看看