努力成为一名合格的前端开发工程师!!!

闻达有先后,术业有专攻,努力,加油ing!!!!

导航

JavaScript基础视频教程总结(121-130章)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>121-130章总结</title>
</head>
<body>
    
<pre>
121. 滚轮事件
onmousewheel鼠标滚轮滚动的事件,会在滚轮滚动时触发,
但是火狐不支持该属性
在火狐中需要使用 DOMMouseScroll 来绑定滚动事件
注意该事件需要通过addEventListener()函数来绑定
</pre>
<style type="text/css">
#glbox{
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>
<div id="glbox"></div>
<script type="text/javascript">
    console.log("第121");
    var glbox = document.getElementById("glbox")
    glbox.onmousewheel = function(event){
        event = event||window.event
        //event.wheelDelta 可以获取鼠标滚轮滚动的方向
        //向上滚 120   向下滚 -120
        //wheelDelta这个值我们不看大小,只看正负
        //alert( event.wheelDelta )
        //wheelDelta这个属性火狐中不支持
        //在火狐中使用event.detail来获取滚动的方向
        //向上滚 -3  向下滚 3
        //alert(event.detail);
        if ( event.wheelDelta > 0 || event.detail < 0) {
            if( this.clientHeight >10){
                this.style.height = this.clientHeight -10 + "px"
            }
        } else{
            this.style.height = this.clientHeight + 10 + "px"
        }
        /*
         * 使用 addEventListener()方法绑定响应函数,取消默认行为时不能使用return false
         * 需要使用event来取消默认行为event.preventDefault();
         * 但是IE8不支持event.preventDefault();这个玩意,如果直接调用会报错
         */
        event.preventDefault && event.preventDefault();
        /*
         * 当滚轮滚动时,如果浏览器有滚动条,滚动条会随之滚动,
         * 这是浏览器的默认行为,如果不希望发生,则可以取消默认行为
         */
        return false;
    }
    
    //为火狐绑定滚轮事件
    bind(glbox,"DOMMouseScroll",glbox.onmousewheel);

    function bind(obj , eventStr , callback){
        if(obj.addEventListener){
            obj.addEventListener(eventStr , callback , false);
        }else{
            obj.attachEvent("on"+eventStr , function(){
                callback.call(obj);
            });
        }
    }
</script>

<pre>
122. 键盘事件
onkeydown
- 按键被按下
- 对于onkeydown来说如果一直按着某个按键不松手,则事件会一直触发
- 当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,其他的会非常的快
这种设计是为了防止误操作的发生。
onkeyup
- 按键被松开
键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document。
可以通过keyCode来获取按键的编码
通过它可以判断哪个按键被按下
除了 keyCode,事件对象中还提供了几个属性
altKey,ctrlKey,shiftKey
- 这个三个用来判断alt ctrl 和 shift是否被按下,如果按下则返回true,否则返回false
</pre>
<div class="">
    <input type="" placeholder="不能输入数字" />
</div>
<script type="text/javascript">
    console.log("第122");
    document.onkeydown = function(event){
        event = event || window.event
        var result = event.keyCode
            console.log("当前按下的按键值为:" + result)
        if ( event.ctrlKey ){
            console.log("当前的按下的按键为:Ctrl")
        }
        //判断y和ctrl是否同时被按下
        if( event.keyCode === 89 && event.ctrlKey ){
            console.log("ctrl和y都被按下了");
        }
    }
    document.onkeyup = function(){
        console.log("按键松开了");
    }
    var input1 = document.getElementsByTagName("input")
    input1[0].onkeydown = function(event){
        event = event || window.event
        // 使文本框中不能输入数字 48-57
        if( event.keyCode>=48 && event.keyCode <= 57 ){
            //在文本框中输入内容,属于onkeydown的默认行为
            return false
        }
    }
    
</script>

<pre>
123. 键盘移动div
</pre>
<style type="text/css">
#mvBox {height: 200px;position: relative;}
#movebox {width: 100px;height: 100px;background-color: #99FF99;position: absolute;}
</style>
<div id="mvBox">
    <div id="movebox"></div>
</div>

<script type="text/javascript">
    console.log("第123");
    //使div可以根据不同的方向键向不同的方向移动
    var mvBox = document.getElementById("mvBox")
    var movebox = document.getElementById("movebox")
    // 左,上,右,下 37 38 39 40
    mvBox.onkeydown = function(event){
        event = event || window.event
        var speed = 10
        if(event.ctrlKey){
            speed = 50
        }
        switch(event.keyCode){
            case 37:
            movebox.style.left = movebox.offsetLeft - speed +"px"
            break
            case 38:
            movebox.style.top = movebox.offsetTop - speed +"px"
            break
            case 39:
            movebox.style.left = movebox.offsetLeft + speed +"px"
            break
            case 40:
            movebox.style.top = movebox.offsetTop + speed +"px"
            break
        }
    }
</script>

<pre>
124. BOM
- BOM可以使我们通过JS来操作浏览器
- 在BOM中为我们提供了一组对象,用来完成对浏览器的操作
- BOM对象
Window
- 代表的是整个浏览器的窗口,同时window也是网页中的全局对象
Navigator
- 代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
Location
- 代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面
History
- 代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录
由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页
而且该操作只在当次访问时有效
Screen
- 代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息
这些BOM对象在浏览器中都是作为window对象的属性保存的,
可以通过window对象来使用,也可以直接使用。
Navigator
- 代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
- 由于历史原因,Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
- 一般我们只会使用userAgent来判断浏览器的信息,
userAgent是一个字符串,这个字符串中包含有用来描述浏览器信息的内容,不同的浏览器会有不同的 userAgent
</pre>
<script type="text/javascript">
    console.log("第124");
    
    console.log( Window )
    console.log( navigator )
    console.log( Location )
    console.log( History )
    console.log( Screen )
    
    var ua = navigator.userAgent
    console.log( ua )
    /*
     * 火狐的userAgent
     *  Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
     * 
     * Chrome的userAgent
     *  Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
     * 
     * IE8
     *  Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
     * 
     * IE9
     *  Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
     * 
     * IE10
     *  Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
     * 
     * IE11
     *  Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
     *  - 在IE11中已经将微软和IE相关的标识都已经去除了,所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了
     */
    // alert(navigator.appName);
    if(/firefox/i.test(ua)){
        console.log("你是火狐!!!");
    }else if(/chrome/i.test(ua)){
        console.log("你是Chrome");
    }else if(/msie/i.test(ua)){
        console.log("你是IE浏览器~~~");
    }else if("ActiveXObject" in window){
        console.log("你是IE11,藏的好深啊~~~");
    }
    /*
     * 如果通过UserAgent不能判断,还可以通过一些浏览器中特有的对象,来判断浏览器的信息
     * 比如:ActiveXObject
     */
    if("ActiveXObject" in window){
        console.log("你是IE,我已经抓住你了~~~");
    }else{
        console.log("你不是IE~~~");
    }
</script>

<pre>
125. History
- 对象可以用来操作浏览器向前或向后翻页
</pre>
<div class="">
    <h1>History</h1>
    <button id="htbtn">点我一下</button>
    <a href="111-120章总结.html" target="_blank">去111-120章总结</a>
</div>
<script type="text/javascript">
    console.log("第125");
    var htbtn =document.getElementById("htbtn")
    htbtn.onclick = function(){
        // length - 属性,可以获取到当成访问的链接数量
        var hl = history.length
        console.log(hl)
        // back() - 可以用来回退到上一个页面,作用和浏览器的回退按钮一样
        //history.back()
        // forward() - 可以跳转下一个页面,作用和浏览器的前进按钮一样
        //history.forward()
        /*
         * go()
         *  - 可以用来跳转到指定的页面
         *  - 它需要一个整数作为参数
         *      1:表示向前跳转一个页面 相当于forward()
         *      2:表示向前跳转两个页面
         *      -1:表示向后跳转一个页面
         *      -2:表示向后跳转两个页面
         */
        history.go(-1)
    }
</script>

<pre>
126. Location
该对象中封装了浏览器的地址栏的信息
</pre>
<div class="">
    <button id="ltbtn">点我一下</button>
</div>
<script type="text/javascript">
    console.log("第126");
    var ltbtn =document.getElementById("ltbtn")
    ltbtn.onclick = function(){
        // 如果直接打印location,则可以获取到地址栏的信息(当前页面的完整路径)
        console.log(location)
        // 如果直接将location属性修改为一个完整的路径,或相对路径,则我们页面会自动跳转到该路径,并且会生成相应的历史记录
        // location = "http://www.baidu.com"
        // assign()- 用来跳转到其他的页面,作用和直接修改location一样
        // location.assign("http://www.baidu.com")
        // reload() - 用于重新加载当前页面,作用和刷新按钮一样,如果在方法中传递一个true,作为参数,则会强制清空缓存刷新页面
        location.reload(true);
        // replace() - 可以使用一个新的页面替换当前页面,调用完毕也会跳转页面,不会生成历史记录,不能使用回退按钮回退
        // location.replace("http://www.baidu.com")
    }
</script>

<pre>
127. 定时器简介
JS的程序的执行速度是非常非常快的,如果希望一段程序,可以每间隔一段时间执行一次,可以使用定时调用.
setInterval()
- 定时调用
- 可以将一个函数,每隔一段时间执行一次
- 参数:
1.回调函数,该函数会每隔一段时间被调用一次
2.每次调用间隔的时间,单位是毫秒
- 返回值:
返回一个Number类型的数据
这个数字用来作为定时器的唯一标识.
clearInterval()可以用来关闭一个定时器
方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器
</pre>

<div id="count"></div>
<script type="text/javascript">
    console.log("第127");
    var count =document.getElementById("count")
    var num = 1
    var timer = setInterval(function(){
        count.innerHTML = num++
        if( num==11 ){
            clearInterval(timer)
        }
    },1000)
</script>

<pre>
128. 切换图片练习
</pre>
<div class="">
    <img id="img" src="images/1.jpg"/>
    <p>
        <button id="start" href="javascript:;">开始</button>
        <button id="stop" href="javascript:;">停止</button>
    </p>
</div>
<script type="text/javascript">
    console.log("第128");
    var img =document.getElementById("img")
    var start =document.getElementById("start")
    var stop =document.getElementById("stop")
    var imgArr = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"]
    var index = 0
    var timer2 
    start.onclick = function(){
        /*
         * 目前,我们每点击一次按钮,就会开启一个定时器,
         *  点击多次就会开启多个定时器,这就导致图片的切换速度过快,
         *  并且我们只能关闭最后一次开启的定时器
         */
        //在开启定时器之前,需要将当前元素上的其他定时器关闭
        clearInterval(timer2)
        timer2 = setInterval(function(){
            index++
            index %= imgArr.length
            img.src = imgArr[index]
        },1000)
    }
    stop.onclick = function(){
        clearInterval(timer2)
    }
</script>

<pre>
129. 修改div移动练习
</pre>
<div id="editBox" style="height: 300px;position: relative;">
    <div id="editMove" style="position: absolute;height: 100px;width: 100px;background-color: #f00;"></div>
</div>
<script type="text/javascript">
    console.log("第129");
    var dir = 0
    var speed = 10
    var timer3
    var editBox = document.getElementById("editBox")
    var editMove = document.getElementById("editMove")
    timer3 = setInterval(function(){
        switch(dir){
            case 37:
                //alert("向左"); left值减小
                editMove.style.left = editMove.offsetLeft - speed + "px";
                break;
            case 39:
                //alert("向右");
                editMove.style.left = editMove.offsetLeft + speed + "px";
                break;
            case 38:
                //alert("向上");
                editMove.style.top = editMove.offsetTop - speed + "px";
                break;
            case 40:
                //alert("向下");
                editMove.style.top = editMove.offsetTop + speed + "px";
                break;
        }
    },30)
    editBox.onkeydown = function(event){
        event = event || window.event
        dir = event.keyCode
    }
    editBox.onkeyup = function(){
        dir=0
    }
    
</script>

<pre>
130. 延时调用
延时调用一个函数不马上执行,而是隔一段时间以后在执行,而且只会执行一次.
延时调用和定时调用的区别,定时调用会执行多次,而延时调用只会执行一次.
延时调用和定时调用实际上是可以互相代替的,在开发中可以根据自己需要去选择.
使用clearTimeout()来关闭一个延时调用
</pre>
<script type="text/javascript">
    console.log("第130");
    var ynum = 1
    var timer4 = setTimeout(function(){
        console.log(ynum++)
    },1000)
    clearTimeout(timer4)
</script>

</body>
</html>

所有基础课程链接:


 1.JavaScript基础视频教程总结(001-010章)           2.JavaScript基础视频教程总结(011-020章)          3. JavaScript基础视频教程总结(021-030章)        4. JavaScript基础视频教程总结(031-040章)

5. JavaScript基础视频教程总结(041-050章)           6. JavaScript基础视频教程总结(051-060章)         7. JavaScript基础视频教程总结(061-070章)        8. JavaScript基础视频教程总结(071-080章)

9. JavaScript基础视频教程总结(081-090章)          10. JavaScript基础视频教程总结(091-100章)        11. JavaScript基础视频教程总结(101-110章)      12. JavaScript基础视频教程总结(111-120章)

13. JavaScript基础视频教程总结(121-130章)        14. JavaScript基础视频教程总结(131-140章)


 另外,欢迎关注我的新浪微博

posted on 2019-01-21 15:05  前端小匠大飞  阅读(214)  评论(0编辑  收藏