题目概览
- 对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
}