HTML5

# 系列文章目录

---

@[TOC](文章目录)

---
## 拖放
拖放（Drag 和 drop）即抓取对象以后拖到另一个位置，是 HTML5 标准的组成部分。

注：
1. 使元素可拖动，把 draggable 属性设置为 true
2. ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
3. dataTransfer.setData() 方法设置被拖数据的数据类型和值
4. Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")。
5. ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置要通过调用 ondragover 事件的 event.preventDefault() 方法阻止对元素的默认处理方式
6. 当放置被拖数据时，会发生 drop 事件。
7. dataTransfer.getData("Text") 方法获得被拖的数据
8. 把被拖元素追加到放置元素（目标元素）中
9. （drop 事件的默认行为是以链接形式打开）

```javascript
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style type="text/css">
      #div1, #div2 {
      float:left;
      width:100px;
      height:100px;
      margin:10px;
      padding:10px;
      border:1px solid #aaaaaa;
      }
      </style>
    </head>
    <body>
      <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="xxx.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="88"></div>
      <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
      <script>
      function allowDrop(ev) {
      ev.preventDefault();
      }

      function drag(ev) {
      ev.dataTransfer.setData("Text",ev.target.id);
      }

      function drop(ev) {
      ev.preventDefault();
      let data = ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data));
      }
      </script>
    </body>
    </html>
```

[video(video-LRQ6Q1ub-165****641962)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=301449995)(image-https://img-blog.csdnimg.cn/img_convert/cc8020496e4bcb61a83e49217151320a.jpeg)(title-拖放)]

## Geolocation（地理定位）
Geolocation API 用于获得用户的地理位置。

注：
1. getCurrentPosition() 方法来获得用户的位置
2. coords.latitude 表示十进制的纬度
3. coords.longitude    表示十进制数的经度

错误代码：

1. Permission denied - 用户不允许地理定位
2. Position unavailable - 无法获取当前位置
3. Timeout - 操作超时

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo">获取坐标</p>
<button onclick="getLocation()">点我</button>
<script>
let x = document.getElementById("demo")
function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError)
} else {
x.innerHTML = "该浏览器不支持获取地理位置"
}
}
function showPosition(position) {
x.innerHTML = '纬度：' + position.coords.latitude + '<br>经度：' + position.coords.longitude
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML = "用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML = "请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "未知错误。"
break;
}
}
</script>
</body>
</html>
```
==位置没获取到：==
![在这里插入图片描述](https://img-blog.csdnimg.cn/de78e33bb91147fc9929687b9dc62d7b.png)

百度位置：

```javascript
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title></title>
      
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>
    </head>
    <body>

      <div id="position"></div><br>
      <input type="button" onclick="getLocation()" value="点我" />
      <script type="text/javascript">
      var x = document.getElementById('position');
      function getLocation() {
      // 创建百度地理位置实例，代替 navigator.geolocation
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(e) {
      if(this.getStatus() == BMAP_STATUS_SUCCESS){
      // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
      x.innerHTML = '纬度：' + e.point.lat + '<br/>经度：' + e.point.lng;
      } else {
      x.innerHTML = 'failed' + this.getStatus();
      }
      });
      }
      </script>
    </body>
    </html>
```

==位置成功获取：==

![在这里插入图片描述](https://img-blog.csdnimg.cn/7b9124680956468793bf59f6e7d47c95.png)

## Video 视频
注：controls：向用户显示控件，比如播放按钮

```javascript
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <video src="xxx.mp4" width="320" height="240" controls></video>
    </body>
    </html>
```

![在这里插入图片描述](https://img-blog.csdnimg.cn/9e9f9601c56342a59415d70a27d22de4.png)
## Audio 音频
audio：音频

```javascript
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <audio src="xxx.mp3" width="320" height="240" controls></audio>
    </body>
    </html>
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/c72444112ed1407884f513fd60b9b87c.png)

`不积跬步无以至千里不积小流无以成江海`

==点个关注不迷路，持续更新中...==
#JavaScript#

HTML5

全站热榜

创作者周榜