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

系列文章目录


文章目录

  • 系列文章目录
    • 拖放
    • Geolocation(地理定位)
    • Video 视频
    • Audio 音频


拖放

拖放(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 事件的默认行为是以链接形式打开)
	<!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>

拖放

Geolocation(地理定位)

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

注:

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

错误代码:

  1. Permission denied - 用户不允许地理定位
  2. Position unavailable - 无法获取当前位置
  3. 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>

位置没获取到:
HTML5 —— 拖放、地理位置、视频和音频的基本使用_第1张图片

百度位置:

	<!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>

位置成功获取:

HTML5 —— 拖放、地理位置、视频和音频的基本使用_第2张图片

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>

HTML5 —— 拖放、地理位置、视频和音频的基本使用_第3张图片

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>

在这里插入图片描述

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

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

你可能感兴趣的:(HTML5,html5,javascript,前端)