客户端的JavaScript（二）

作者: 感觉不错哦 | 来源:发表于2018-12-07 14:23 被阅读18次

setTimeout和setInterval 定时器（计时器）

setTimeout和setInterval都是客户端JavaScript中重要的函数，node中更恐怖，提供了四种定时器，window对象的setTimeout方法用来实现一个函数在指定的毫秒数之后运行，setInterval用来实现一个函数在指定的毫秒数重复调用

我们来看看简单的用法

    setInterval(function(){
        console.log(1) //每过 1秒输出 1
    },1000) //ms 毫秒

    setTimeout(function(){
        console.log(1) //两秒后输出1  只执行一次
    },2000)

定时器有一个非常强大的功能就是函数节流，什么是函数节流？我们慢慢来

document.onmousedown=function(){ //怕大家看不清楚，加一个条件事件，只有点击的时候触发事件
   document.onmousemove=function(ev){ //鼠标移动事件，此处不做兼容，不懂没关系 主要介绍函数节流，后续事件会讲解
      console.log(ev.clientX,ev.clientY) // 获取当前鼠标的 x y坐标
   }
}
document.onmouseup=function(){ //弹起鼠标 关闭移动事件
       document.onmousemove=null 
}

可以复制代码测试一下，打开控制台，可以看到计算是多么的快，简直是恐怖

函数节流，简单地讲，就是让一个函数无法在很短的时间间隔内连续调用，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用

function move(){
    document.onmousemove=function(ev){
        console.log(ev.clientX,ev.clientY)
    }
}
document.onmousedown=function(){ //怕大家看不清楚，加一个条件事件
   
    setTimeout(move,500) //此时就可以了 当你点击的时候移动发现 请求没那么快了
  
}
document.onmouseup=function(){ //弹起鼠标 关闭移动事件
       document.onmousemove=null 
}

效果很差，一来是没清空定时器，二来是事件挑的不好，主要是做区别，测试的时候点一下一定要刷新，一定要刷新，不然浏览器爆炸了不管哈总之就是鼠标按下的0.5S内没数据

在实际开发中很有用，比如我们在改变浏览器大小的时候，等改变完成的0.5后获取当前的宽高，移动端我们在上拉获取的时候给一个缓冲防止一直获取都是很有用的

clearInterval 关闭定时器

 var timer=setInterval(function(){
     console.log(1) //每秒中输出 1
 },1000)

 var cleartime=setTimeout(function(){
     clearInterval(timer) //关闭 setInterval
     clearInterval(cleartime) //关闭 setTimeout  10秒后关闭两个定时器
 },10000)

用法很简单，赋值变量给定时器，我们只需要传入变量名清空即可

写个小demo 稍微应用一下，具体应用场景还得小伙伴自行开发

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .box{
                width: 300px;
                height: 50px;
                margin: 200px;
            }
            span{
                width: 150px;
                display: inline-block;
                font-weight: 900;
                line-height: 50px;
                color:#333
            }
            .search{
                width: 100px;
                height: 50px;
                cursor: pointer;
                border: 1px solid red;
                border-radius: 4px ;
                text-align: center;
                line-height: 50px
            }
        </style>
    </head>
    <body>
        <div class="box">
            <span>今晚侍奉朕的是</span>
            <span class="search">皇上请翻牌</span>
        </div>
    </body>
    <script> 
        
        var oS=document.getElementsByClassName('search')[0]
        var arr=['萝莉','御姐','花姐','如姐','小太妹','洪兴十三妹']
        var time;
        var bstep=true
        oS.onclick=function(){
            if(bstep){
                time=setInterval(function(){
                    var index=Math.floor(Math.random()*6)
                    oS.innerHTML=arr[index]
                },10)
                bstep=false
            }else{
                clearInterval(time)
                bstep=true
            }
        }
        

    </script>
    </html>

复制即可

window.location window.URl

    console.log(window.location)
    console.log(document.location)
    console.log(window.location===document.location) //true

document下也有一个location属性，这个属性与window.location都引用到Window下的Location对象

我们平时解析浏览器的URL 一般是使用window.location.href,Location对象的toString（）方法返回href属性，因此我们可以调用此方法获取当前的URL

    console.log(window.location.href)
    console.log(window.location.toString())
    console.log(window.location.href===window.location.toString()) //true

window.location下还有很多属性

    console.log(window.location.protocol)
    console.log(window.location.host)
    console.log(window.location.hostname)
    console.log(window.location.port)
    console.log(window.location.pathname)
    console.log(window.location.hash)
    console.log(window.location.search)

如何了解这些参数最好的方法就是找很复杂的网页，URL一堆的那种，打开控制台输入

再配合你的百度可以快速理解代表的意思，如果实际开发中需要获取浏览器URL的一些数据，这些就是很好的快速获取方法，比如说hash获取#后面的 search获取？后面的，这些都是小技巧，当然如果你正则与字符串方法很透彻，分解一下URL不要太轻松,node下也有更强大的方法解析URL，当然这是后话了

载入新的文档

这个比较简单快速过下

location的assign（）方法，挂载新的html

我的资源文件下有这个html 回车执行页面就是这个页面了

location.replace('obj.html')也能实现相同的效果，不同的是 replace是替换，也就是无法返回上一页了，当前页面直接被替换，assign是可以的

不过我们使浏览器跳转新页面一种更传统也是更常用的方法就是直接把新的URL赋值给location属性
location 也可以实现锚点链接，因为它的原理就是更改URL，而a标签也是一样的道理

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        div{
            width: 100%;height: 800px
        }
        </style>
    </head>
    <body>
        <div id="box1" style="border: 1px solid red">

        </div>
        <div id="box2" style="border: 1px solid black">

        </div>
        <div id="box3" style="border: 1px solid green">

        </div>
    </body>
    <script>
    </script>
    </html>

在控制台输入 location="#box2" location="#box3" 可以快速定位到元素

浏览历史

Window对象中的history属性引用的是History对象

可以在控制台输入history.back()实现后退，history.forward()方法实现前进，history.go(参数)实现自由前进后退，如果页面镶嵌了iframe 会导致不一样的结果，这个自己可以测试一下，用的不多

navigator对象

Window对象的navigator属性引用的是包含浏览器厂商和版本信息的Navigator对象，大家发现没有，对象首字母是大写，属性是小写的，看的时候要区分对象，Window对象下的属性调用了这个对象

每种浏览器的navigator对象都是不一样的，我们可以根据这个特点做一个简单的浏览器嗅探，分辨当前浏览器的内核

    <script>
   if(window.navigator.userAgent.indexOf("Chrome") != -1){
        alert("谷歌浏览器");
    }else if(window.navigator.userAgent.indexOf("Firefox") != -1){
        alert("火狐浏览器")
    }else if(window.navigator.userAgent.indexOf("Safari") != -1){
        alert("Safari浏览器");
    }else if(window.navigator.userAgent.indexOf("IE") != -1){
        alert("IE浏览器");
    }else if(window.navigator.userAgent.indexOf("Opera") != -1){
        alert("Opera浏览器");
    }
    </script>

简单介绍，如果有兴趣的可以更深入，可以主要看看这几个属性

appName、appVersion、userAgent、platform 建议还是记属性，因为用的不多，你今天记好了哪天又忘了

Screen对象

Window对象的screen属性引用的是Screen对象,它提供有关窗口的大小和可用的颜色数量的信息。属性width和height指定的是以像素为单位的窗口大小,其实打印一下就很明显了

此属性也是可以判断当前浏览器的屏幕大小，比如在什么范围内修改rem

对话框

Window对象提供了3个方法来向用户显示简单的对话框，常见的就是alert（）了，请你好好看这个，如果没提示你确定你能写出这个单词吗？

confirm（）方法也显示一条信息，要求用户点击“确定”或“取消”，并返回布尔值，如果傻傻的不知道这个方法的估计还要自己写个对话框组件

prompt（）方法同样也是显示一条信息，等待用户输入字符串并返回该字符串，简单使用一下下面两个方法，这三个方法要节制的使用，因为js的单线程会造成阻塞，有可能产生一些状况外的结果

        var str=prompt()
        console.log(str)

此时看到浏览器是转圈圈的，而且控制台并没有打印undefined也就是下一步没执行，这样是不好的。而且如果此时我们点击其他tab页，默认输入空，当然输入啥下方就打印啥了

    <script>
       var r=confirm('6666') //注意它返回的是布尔值
       if(r){
           console.log(1)
       }else{
           console.log(2)
       }
    </script>

这个还是比较好理解的

那么在老版本浏览器中还有一个showModalDialog方法，不过这个已经out了，有兴趣可以了解一下，现在我们多用window.open

错误处理

Window对象的onerror属性是一个事件处理程序，一般用来窗口的错误处理程序。这个说真的的用的很少吧，因为有了try/catch异常处理语句，简单应用一下

  <img src="666" alt="" onerror="alert('图片加载失败')">   只支持 style object img 标签

try {
执行某个逻辑
} catch (e) {
出问题鸟，换个逻辑执行
}

try/catch其实我用的也很少，一般做一些兼容可能会用到，需要注意的是try/catch是js块作用域的典型代表

比较常用的一个，也不算错误处理，算一个过滤 throw new Error（）

             function get(a){
               if(typeof a=='string'){
                   throw new Error('请你不要输入字符串')
               }
               else if(typeof a=='number'){
                   console.warn('请你不要输入数字')
               }
             }

可以自行测试一下

浏览器窗口和窗体

window.open（）

          <script>
             window.open('http://www.baidu.com')
          </script>

open（）的第一个参数是文档的URL，如果为空打开一个about：blank空页面
open里面的参数有很多，可以参考下方链接

http://www.cnblogs.com/stswordman/archive/2006/06/02/415853.html

有开就有关，关闭窗口的方法就是window.close（）

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
          
    </head>
    <body>
           <button onclick="closes()">关闭</button>
    </body>
          <script>
            function closes(){
               window.close()
            }
          </script>
    </html>

一下就关掉了,网上有些网站可以在控制台输入试试，有些网站是关不了的，凶的很。如果此处又有ifram，有可能又出现了意料之外的结果

窗体之间的关系相当复杂（个人认为），父窗体，子窗体，顶级窗体等之间的关系是比较恶心的，这方面有兴趣想了解的，喜欢嵌套ifram的可以多去研究，个人认为理解了self parent 以及top 这三个属性即可，当然没兴趣就不用看了，头疼

Window对象到此告一段落，如有补充会在后面的文章中添加，下面番外一下

    <html>

    <frameset cols="25%,50%,25%">

    <frame src="./example/html/frame_a.html">
    <frame src="./example/html/frame_b.html">
    <frame src="./example/html/frame_c.html">

    </frameset>

    </html>

这是一个由三个框架组成的一个页面，其中第三个框架我特意没写

frame_a.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        666
        <button onclick="alert(1)">GET</button>
        <button onclick="get()">GETS</button>


    </body>
    <script>
    function get(){
        alert(window.a)
    }
    </script>
    </html>

frame_b.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        666
        <button onclick="get()">GET</button>
    </body>
    <script>
        var a=10;
        function get(){
            alert(window.a)
        }
    </script>
    </html>

效果差不多是这样，各自框架window是不一样的，有兴趣自行可以复制代码了解一下

客户端的JavaScript（二）

setTimeout和setInterval都是客户端JavaScript中重要的函数，node中更恐怖，提供了四种定时器，window对象的setTimeout方法用来实现一个函数在指定的毫秒数之后运行，setInterval用来实现一个函数在指定的毫秒数重复调用

写个小demo 稍微应用一下，具体应用场景还得小伙伴自行开发

appName、appVersion、userAgent、platform 建议还是记属性，因为用的不多，你今天记好了哪天又忘了

Window对象到此告一段落，如有补充会在后面的文章中添加，下面番外一下

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读