HTML5 —— 拖放、地理位置、视频和音频的基本使用

系列文章目录

文章目录

拖放

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

注：

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

	<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

拖放

Geolocation（地理定位）

Geolocation API 用于获得用户的地理位置。

注：

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

错误代码：

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

    <!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 + '
经度：' + 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

位置没获取到：
在这里插入图片描述

百度位置：

	<!DOCTYPE html>
	<html>
	<head>
	    <meta charset="utf-8" />
	    <title></title>
	    <!--引入百度 API，"ak=" 后面一串码是密钥，最好自己申请-->
	    <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 + '
经度：' + e.point.lng;
	            } else {
	                x.innerHTML = 'failed' + this.getStatus();
	            }
	        });
	    }
	    </script>
	</body>
	</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

位置成功获取：

在这里插入图片描述

Video 视频

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

	<!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>
1
2
3
4
5
6
7
8
9
10
11
12

在这里插入图片描述

Audio 音频

audio：音频

	<!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>
1
2
3
4
5
6
7
8
9
10
11
12

在这里插入图片描述

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

点个关注不迷路，持续更新中…

相关阅读:
CentOS上搭建SVN并自动同步至web目录
 Java程序员要掌握vue2知识
 新学期，新Java
语法基础(函数)
Android 项目Gradle文件讲解（Groovy和Kotlin）
canvas画图时的bug记录
 C++多线程学习07 unique_lock与scoped_lock
MyBatis批量更新SQL
小谈设计模式（9）—工厂方法模式
 蓝桥杯单片机第八届省赛题详细讲解(模拟风扇控制系统)
原文地址：https://blog.csdn.net/qq_45902692/article/details/126027954