奥门威尼斯网址javascript API 地图

 

html5 Visibility API
这个 API 为我们带来了两个 document 上的属性,document.visibilityState
和document.hidden, 这个两个属性实现了不同的功能。
document.visibilityState 有四个不同的值:
hidden:页面不可见

新的选择器

Math.random() 取值范围[0,1)  大于等于0小于1,包括0,不包括1

 

prerender:页面在后台加载的,对用户不可见

根据css选择器选择

Math.floor() 向下取整  Math.ceil() 向上取整

 

visible:页面可见

    querySelector

 

 

unloaded:页面即将关闭(用户正在从当前页面跳转到其他页面)

    querySelectorAll   选中的是一个数组

第一题:一组数的规则如下:1、1、2、3、5、8、13、21、34…..,求第30位数是多少?用递归方式实现
第二题:

Page Visibility
API是判断页面是否在当前窗口展示,如果显示在当前窗口,则可以选择做或者不做一些事情。

document.hidden 是一个布尔属性,页面可见是为 false,页面不可见时为
true。
有时候tab大于1个,需要用一个全局的变量来表示,可以使用localStorage。在页面初始化的时候,先将localStorage中的对应变量要先更改到可见,然后在状态变化时
document.addEventListener(‘visibilitychange’,function(event){

Element.classList

第一题是斐波那契数列
int Fibonacci(int n)
{
 if( n == 1 || n == 2) // 递归结束的条件,求前两项
  return 1;
 else
  return Fibonacci(n-1)+Fibonacci(n-2); // 如果是求其它项,先要求出它前面两项,然后做和。
}

 

if(document.visibilityState != ‘visible’) {
$localStorage.agroup.hidden = true;
}else {
$localStorage.agroup.hidden = false;
}

提供类似于jQuery中CSS操作的API

1、另外还有两个面试题,求解答。

比如我们使用一个AJAX 调用从后台每隔2s查询一些数据

});

奥门威尼斯网址 1

2、有一个三升的水杯和一个五升的水杯,如何倒四升的水?
第二题最笨的方法是三个for循环遍历
方法一 
1.用3升的容器接满水,倒入5升容器中。 
2.再用3升的容器接满,倒入5升容器中。此时3升容器中还剩下1升水。 
3.将5升容器中的水倒掉,将3升容器中剩下的1升水倒入5升容器。 
4.再将3升容器接满水倒入5升容器中,此时5升容器中就是4升水。 

[java]  <!DOCTYPE html> 
    <html> 
        <body> 
 
        <div id=”newswell”></div> 
 
        <script type=”text/javascript”
src=”; 
 
        <script> 
        var newsDiv; 
                     
        function getData() { 
 
            $.ajax({url:”news.json”}).done(function(data) { 
                newsDiv.innerHTML += “<p><b>Posted at ” +
new Date() + ” 
    ” + data.message; 
                //call it again in 2 seconds  
                window.setTimeout(getData, 2000); 
            }).fail(function(xhr,status,e) { 
                console.dir(e); 
            }); 
        } 
             
        $(document).ready(function() { 
            newsDiv = document.querySelector(“#newswell”); 
                 
            getData(); 
             
        }); 
             
        </script> 
        </body> 
    </html> 

方法二 
1.用5升的容器接满水,倒入3升容器中。此时5升容器中有2升水。 
2.将3升容器中的水倒掉,在将5升容器中剩下的水倒入3升容器中。此时3升容器中有2升水。 
3.将5升容器接满水,把水再倒入3升容器中至满。此时5升容器中剩4升水。

<!DOCTYPE html>
 <html>
  <body>

  <div id=”newswell”></div>

  <script type=”text/javascript”
src=”;

  <script>
  var newsDiv;
     
  function getData() {

   $.ajax({url:”news.json”}).done(function(data) {
    newsDiv.innerHTML += “<p><b>Posted at ” + new Date() +

 ” + data.message;
    //call it again in 2 seconds
    window.setTimeout(getData, 2000);
   }).fail(function(xhr,status,e) {
    console.dir(e);
   });
  }
   
  $(document).ready(function() {
   newsDiv = document.querySelector(“#newswell”);
    
   getData();
   
  });
   
  </script>
  </body>
 </html> 

如果这个页面不是显示在用户当前可视窗口,比如chrome,不在当前显示的tab页,那么我们可能不需要2s调用,因为那样只会浪费网络请求,查询了数据也没用,用户没有看到。那么我们就可以使用Page
Visibility
API来判断当前页是否是可视的tab上,如果是我们再去查,不是我们就不查了。Chrome,firefox最新版都支持了,IE也是支持的。

 

于是我们改为:

[java] <!DOCTYPE html> 
<html> 
    <body> 
 
    <div id=”newswell”></div> 
 
    <script type=”text/javascript”
src=”; 
 
    <script> 
    var newsDiv; 
    var active = true; 
         
    function isVisible() { 
        if(“webkitHidden” in document) return !document.webkitHidden; 
        if(“mozHidden” in document) return !document.mozHidden; 
        if(“hidden” in document) return !document.hidden;   
        //worse case, just return true  
        return true; 
    } 
         
    function getData() { 
 
        $.ajax({url:”news.json”}).done(function(data) { 
            newsDiv.innerHTML += “<p><b>Posted at ” + new
Date() + ” 
” + data.message; 
            //call it again in 2 seconds  
            if(isVisible()) window.setTimeout(getData, 2000); 
            else active = false; 
        }).fail(function(xhr,status,e) { 
            console.dir(e); 
        }); 
    } 
         
    $(document).ready(function() { 
        newsDiv = document.querySelector(“#newswell”); 
     
        $(document).bind(“visibilitychange webkitvisibilitychange
mozvisibilitychange”,function(e) { 
            console.log(“VS CHANGE”); 
            console.log(isVisible()); 
            if(isVisible() && !active) { 
                active = true; 
                getData(); 
            } 
        }); 
         
        getData(); 
         
    }); 
         
    </script> 
    </body> 
</html> 

 <!DOCTYPE html>
 <html>
  <body>

  <div id=”newswell”></div>

  <script type=”text/javascript”
src=”;

  <script>
  var newsDiv;
  var active = true;
   
  function isVisible() {
   if(“webkitHidden” in document) return !document.webkitHidden;
   if(“mozHidden” in document) return !document.mozHidden;
   if(“hidden” in document) return !document.hidden; 
   //worse case, just return true
   return true;
  }
   
  function getData() {

   $.ajax({url:”news.json”}).done(function(data) {
    newsDiv.innerHTML += “<p><b>Posted at ” + new Date() +

 ” + data.message;
    //call it again in 2 seconds
    if(isVisible()) window.setTimeout(getData, 2000);
    else active = false;
   }).fail(function(xhr,status,e) {
    console.dir(e);
   });
  }
   
  $(document).ready(function() {
   newsDiv = document.querySelector(“#newswell”);
  
   $(document).bind(“visibilitychange webkitvisibilitychange
mozvisibilitychange”,function(e) {
    console.log(“VS CHANGE”);
    console.log(isVisible());
    if(isVisible() && !active) {
     active = true;
     getData();
    }
   });
   
   getData();
   
  });
   
  </script>
  </body>
 </html>

 

 

Visibility
API是判断页面是否在当前窗口展示,如果显示在当前窗口,则可以选择做或者不做一些事情。
比如我们使用一个AJAX 调用从后台…

发表评论

电子邮件地址不会被公开。 必填项已用*标注