Loading

每日思考(2020/02/29)

题目概览

  • 对HTML5的地理定位的理解
  • css3的:nth-child和:nth-of-type的区别是什么?
  • 一个函数找出给定数组中的最大差值

对HTML5的地理定位的理解

  • HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。

  • 使用 getCurrentPosition() 方法来获得用户的位置。getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数。

    <p id="demo">点击这个按钮,获得您的坐标:</p>
    <button onclick="getLocation()">试一下</button>
    <script>
    var x = document.getElementById("demo");
    
    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
      } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
      }
    }
    
    function showPosition(position) {
      x.innerHTML = "Latitude: " + position.coords.latitude +
        "<br />Longitude: " + position.coords.longitude;
    }
    
    function showError(error) {
      switch (error.code) {
        case error.PERMISSION_DENIED:
          x.innerHTML = "User denied the request for Geolocation."
          break;
        case error.POSITION_UNAVAILABLE:
          x.innerHTML = "Location information is unavailable."
          break;
        case error.TIMEOUT:
          x.innerHTML = "The request to get user location timed out."
          break;
        case error.UNKNOWN_ERROR:
          x.innerHTML = "An unknown error occurred."
          break;
      }
    }
    </script>
    
  • 若成功,则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用,则会返回其他下面的属性

    属性 描述
    coords.latitude 十进制数的纬度
    coords.longitude 十进制数的经度
    coords.accuracy 位置精度
    coords.altitude 海拔,海平面以上以米计
    coords.altitudeAccuracy 位置的海拔精度
    coords.heading 方向,从正北开始以度计
    coords.speed 速度,以米/每秒计
    timestamp 响应的日期/时间
  • Geolocation 对象 - 其他有趣的方法

    • watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)

    • clearWatch() - 停止 watchPosition() 方法

      <p id="demo">点击这个按钮,获得您的坐标:</p>
      <button onclick="getLocation()">试一下</button>
      <script>
          var x = document.getElementById("demo");
      
          function getLocation() {
            if (navigator.geolocation) {
              navigator.geolocation.watchPosition(showPosition);
            } else {
              x.innerHTML = "Geolocation is not supported by this browser.";
            }
          }
      
          function showPosition(position) {
            x.innerHTML = "Latitude: " + position.coords.latitude +
              "<br />Longitude: " + position.coords.longitude;
          }
      </script>
      

css3的:nth-child和:nth-of-type的区别是什么?

  • :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型,n 可以是数字、关键词或公式

    • 数字

      <style>
        /* p2为蓝色*/
       p:nth-child(3){
         background-color: blue;
       }
      
      </style>
      <body>
         <p>p1</p>
         <div>d1</div>
         <p>p2</p>
         <div>d2</div>
         <p>p3</p>
          <p>p4</p>
      </body>
      
    • 关键词

      <style>
        /* p1 p2 p3为蓝色*/
       p:nth-child(odd){
         background-color: blue;
       }
       /* p4为绿色*/
       p:nth-child(even){
        background-color: green;
       }
      </style>
      <body>
         <p>p1</p>
         <div>d1</div>
         <p>p2</p>
         <div>d2</div>
         <p>p3</p>
         <p>p4</p>
      </body>
      
    • 公式

      <style>
        /* p1 p2 p3为蓝色*/
       p:nth-child(2n+1){
         background-color: blue;
       }
      </style>
      <body>
         <p>p1</p>
         <div>d1</div>
         <p>p2</p>
         <div>d2</div>
         <p>p3</p>
         <p>p4</p>
      </body>
      
  • :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素,n 可以是数字、关键词或公式

    • 数字

      <style>
        /*p3为蓝色*/
       p:nth-of-type(3){
         background-color: blue;
       }
      </style>
      <body>
         <p>p1</p>
         <div>d1</div>
         <p>p2</p>
         <div>d2</div>
         <p>p3</p>
         <p>p4</p>
      </body>
      
    • 关键词

      <style>
        /*p1 p3为蓝色*/
       p:nth-of-type(odd){
         background-color: blue;
       }
        /*p2 p4为红色*/
       p:nth-of-type(even){
       background-color: red;
       }
      </style>
      <body>
         <p>p1</p>
         <div>d1</div>
         <p>p2</p>
         <div>d2</div>
         <p>p3</p>
         <p>p4</p>
      </body>
      
    • 公式

      <style>
        /*p1 p3为蓝色*/
       p:nth-of-type(2n+1){
         background-color: blue;
       }
      </style>
      <body>
         <p>p1</p>
         <div>d1</div>
         <p>p2</p>
         <div>d2</div>
         <p>p3</p>
         <p>p4</p>
      </body>
      

一个函数找出给定数组中的最大差值

//方法1---apply
function maxStep (arr) {
      return Math.max.applay(null, arr) - Math.min.apply(null, arr);
}
//方法2---...扩展符
function difference(arr) {
	return Math.max(...arr) - Math.min(...arr)
}
//方法3---排序
const getMaxDiff = arr => {
  const sortedArr = arr.sort((a, b) => a - b);
  return sortedArr[sortedArr.length - 1] - sortedArr[0];
};
//方法4---reduce
function minMaxCalc(arr){
    const max = arr.reduce((a,b)=>{
      return a-b>0?a:b
    })
    const min = arr.reduce((a,b)=>{
      return a-b<0?a:b
    })
    return max-min
  }
posted @ 2020-03-01 01:30  澎湃_L  阅读(105)  评论(0编辑  收藏  举报