学习笔记（3）HTML5新特性（第2章）

1、SVG绘图

SVG是矢量图，放大不失真。用于绘制图标、流程图等，直接通过标签编写（如<circle>、<rect>）。

2、Geolocation Api

Geolocation：地理定位，获取用户当前地理位置，常用于地图应用。
GeolocationAPI核心是getCurrentPosition（一次性定位）和 watchPosition（持续定位），均需传入成功 / 失败回调，可选配置项优化定位效果。
开发中需注意：仅支持 HTTPS（本地开发除外）、依赖用户授权、定位精度受设备 / 环境影响。

2.1、Api调用

html 复制代码

<h1>welcome to 地理定位</h1>
<div >
  	<button @click="getLocation">定位</button>
 	<div id="demo"></div>
</div>

在js中调用Geolocation 接口，有2个参数，1是成功的回调函数，2是失败的回调函数。

js 复制代码

getLocation() {
	console.log('开始定位!!!');
	let x = document.getElementById("demo");

	// 第一步：判断浏览器是否支持 Geolocation API
	if (navigator.geolocation) {
		/* 
		第二个参数：失败回调（可选）
		第三个参数：配置项（可选，补充你未提及的重要配置）
		*/
		navigator.geolocation.getCurrentPosition(
			viewSuccess, // 成功回调
			viewError, // 失败回调
			{
				enableHighAccuracy: true, // 是否启用高精度定位（默认false，开启后更精准但耗电、耗时更长）
				timeout: 10000, // 定位请求超时时间（毫秒，默认无穷大）
				maximumAge: 0 // 允许使用缓存的定位数据（毫秒，默认0，即不使用缓存）
			}
		);
	} else {
		x.innerHTML = "Geolocation is not supported by this browser.";
	}
}

2.2、成功回调函数

返回数据有经度、纬度、响应的时间日期等信息。

纬度：coords.latitude

经度：coords.longitude

响应的日期：timestamp

js 复制代码

viewSuccess(position) {
	console.log(position);
	let x = document.getElementById("demo");
	// 纬度、经度
	const latitude = position.coords.latitude;
	const longitude = position.coords.longitude;
	// 定位精度（米）、海拔（米，部分设备不支持）
	const accuracy = position.coords.accuracy;
	const altitude = position.coords.altitude || "不支持获取海拔";

	x.innerHTML = `
                纬度（Latitude）: ${latitude}<br />
                经度（Longitude）: ${longitude}<br />
                定位精度（Accuracy）: ${accuracy} 米<br />
                海拔（Altitude）: ${altitude}<br />
                响应时间（Timestamp）: ${new Date(position.timestamp).toLocaleString()}
            `;
}

2.3、失败回调函数

返回数据有编号、原因。

js 复制代码

viewError(error) {
	console.log(error);
	let x = document.getElementById("demo");
	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;
	}
}

3、拖放API

拖放：抓取某物并拖入不同的位置。

1，设置元素可拖放，draggable设置为true，
2，设置ondragstart事件，规定元素被拖动时发生的事情，
3，设置 ondragover 事件，规定被拖动的数据被放置到何处，
4，当放开被拖数据时，会发生 ondrop 事件。

3.1、示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖拽</title>
	<style>
		#rectangle{
		    width: 200px;
		    height: 100px;
		    border: 2px solid black;
		    margin-bottom: 20px;
		}
		
		#vue_logo{
		    width: 100px;
		    height: 60px;
		    border: 3px solid red;
		}
	</style>
</head>
<body>
	<h1>welcome to 拖放</h1>
	<p>请把vue图形logo拖放到矩形中</p>
	<div id="rectangle" ondrop="handleDrop(event)" ondragover="allowDrop(event)">
	</div>
	<hr>
	<!--01，设置元素可拖放-->
	<img src="./HTML_logo.jpg" alt="" draggable="true" id="vue_logo" ondragstart="handleDragStart(event)">
</body>
<script type="text/javascript">
	/**
	 * 03， 设置 ondragover  事件，规定被拖动的数据被放置到何处
	 * */
	
	function allowDrop(ev) {
	    /**
	     * 元素默认无法被放置到其他元素中。为了实现拖放，需要阻止元素的默认的处理方式，
	     * 使用 preventDefault()方法完成：
	     */
	    ev.preventDefault();
	}
	
	
	/**
	* 02，ondragstart事件，规定元素被拖动时发生的事情
	* */
	function handleDragStart(ev) {
	    /**
	     * dataTransfer.setData()：设置被拖动数据的数据类型和值：
	     * */
	    ev.dataTransfer.setData("Text",ev.target.id);
	}
	
	/**
	*   4，当放开被拖数据时，会发生 ondrop 事件。
	* */
	function handleDrop(ev)
	{
	    ev.preventDefault();
	    /**
	     * 获得被拖放的数据,拿到被拖元素的id，
	    * */
	    var data=ev.dataTransfer.getData("Text");
	    /***
	     * 将被拖元素添加到目标元素中
	     * */
	    ev.target.appendChild(document.getElementById(data));
	}
</script>
</html>

4、Web Worker

JavaScript 是单线程（主线程），所有 DOM 操作、事件响应、脚本执行都在这个线程中进行，复杂计算（如大数据排序、加密解密）会阻塞主线程，导致页面卡死、无法响应用户操作。
Web Worker 是 HTML5 提供的后台线程（子线程），专门用于执行耗时计算，它与主线程之间通过「消息传递」通信，互不阻塞，且子线程完全受主线程控制（创建、销毁、发消息都由主线程发起）。
Web Worker运行在独立的全局上下文（WorkerGlobalScope）中，并非主线程的 window 上下文，因此无法访问与 DOM 相关的所有对象和方法，这也是为了避免多线程操作 DOM 带来的冲突问题。

4.1、示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>web Worker</title>
</head>
<body>
	<h1>welcome to web Worker</h1>
	<p>Count numbers: <output id="result"></output></p>
	<button onclick="startWorker()">开始 Worker</button>
	<button onclick="stopWorker()">停止 Worker</button>
	<br><br>
</body>
<script>
	var w;
	
	function startWorker() {
	    /***
	     * 1，检测浏览器是否支持webWorker
	     * */
	    if(typeof(Worker) !== "undefined") {
	        /**
	         * 3，检测是否存在 worker，如果不存在，创建一个新的 web worker 对象，然后运行 Web Worker文件中的代码：
	         * */
	        if(typeof(w) == "undefined") {
	            w = new Worker("demo_workers.js");
	        }
	        /**
	         * 3.2，向 web worker 添加一个 "onmessage" 事件监听器，将Web Worker文件中的数据，传送到当前页面中，
	         * */
	        w.onmessage = function(event) {
	            document.getElementById("result").innerHTML = event.data;
	        };
	    } else {
	        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
	    }
	}
	
	function stopWorker() {
	    /**
	     * 4，终止 Web Worker
	     * */
	    w.terminate();
	    /**
	     * 复用web worker
	     * */
	    w = undefined;
	}
</script>
</html>

Web Worker文件

js 复制代码

/**
* 2，创建 Web Worker 文件
* */
var i = 0;
function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

学习笔记（3）HTML5新特性（第2章）

目录

1、SVG绘图

2、Geolocation Api

2.1、Api调用

2.2、成功回调函数

2.3、失败回调函数

3、拖放API

3.1、示例

4、Web Worker

4.1、示例