デイリーものがたり（2020年2月29日）

トピックの概要

HTML5ジオロケーションの理解
CSS3：n番目の子と：n番目の-の型の違いは何ですか？
最大差指定された配列を検索する機能

HTML5ジオロケーションの理解

HTML5ジオロケーション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（）メソッドは、オブジェクトを返します。常に緯度、経度及び精度特性を返します。可能な場合は、次の追加プロパティが返されます

プロパティ	説明
coords.latitude	小数の緯度
coords.longitude	経度小数点
coords.accuracy	位置精度
coords.altitude	メートルで海抜高度
coords.altitudeAccuracy	位置の標高精度
coords.heading	方向は、真北からの度に始まります
coords.speed	速度、メートル/秒メートル
タイムスタンプ	応答日付/時刻

ジオロケーションオブジェクト - 他の興味深い方法

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：n番目の子と：n番目の-の型の違いは何ですか？

: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個、キーワードまたは式であってもよいです