HTML5+CSS3笔记2

最新推荐文章于 2024-09-18 09:28:47 发布

梵鸽子

最新推荐文章于 2024-09-18 09:28:47 发布

阅读量127

点赞数

分类专栏： HTML5+CSS3 文章标签： html5

本文链接：https://blog.csdn.net/qq_37401113/article/details/105486903

版权

HTML5+CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

十三、网络监听接口：H5侧重点在于移动端，很多接口在pc端使用有些存在兼容性问题

	1、ononline：网络连接的时候触发这个事件
		Window.addEventListener('online',function(){});
	2、onoffline：网络断开时触发
		Window.addEventListener('offline',function(){});

十四、全屏接口

1、requestFullScreen():开启全屏显示
2、cancelFullScreen():退出全屏显示
3、fullScreenElement():是否全屏
注:	不同的浏览器需要添加不同的前缀
	▪Chrome:webkit | firefox:moz | ie:ms | opera:o 	
	▪开启全屏显示是对元素的操作。退出全屏和判读是否全屏是对document的操作。
	▪加了前缀的全屏接口也遵循驼峰命名规则

十五、FileReader

1、readAsText():读取文本文件(能用txt打开的文件)，返回文本字符串，默认编码UTF-8
2、readAsBinaryString():读取任意文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件。
	例如：读取文件内容，将二进制内容传给后台，后台接收后存储文件。
3、readAsDataURL():读取文件获取以data:开头的字符串，将资源转换为base64编码，是一种将文件(图片)嵌入文档的方案，优化网站的加载速度和执行效率。
4、onabort():读取文件中断时触发
5、onerror():读取文件错误时触发
6、onload():读取文件成功时触发
7、onloadend():读取文件完成时触发，不论是否成功
8、onloadstart():开始读取时触发
9、onprogress():读取文件过程中持续触发
	案例：图片预览
	<form>
		<input type='file' name='myFile' id='myFile' onchange='getFileContent()'/>
		<input type='submit'/>
	</form>
	<img src='' alt=''/>
	<script>
		function getFileContent(){
			var reader = new FileReader();
			var file = document,querySelector('#myFile').files;
			reader.readAsDataURL(file[0]);
			reader.onload = function(){
				document.querySelector('img').src = reader.result;
			}
		}
	</scrip>

十六、拖拽接口

1、draggable='true'，图片和超链接不需要添加就可以拖拽
	拖拽事件：	▪拖拽元素的事件
					ondrag：整个拖拽过程都会调用，持续调用
					ondragstart：拖拽开始时调用
					ondragleave：鼠标离开拖拽元素时调用
					ondragend：拖拽结束时调用
				▪目标元素事件
					ondragenter：拖拽元素进入时调用
					ondragover：停留在目标元素时调用，持续调用
					ondrop：在目标元素上松开鼠标时调用
						浏览器默认阻止ondrop事件，需要在ondragover中阻止浏览器的默认行为
						div.ondragover = function(e){
							e.preventDefault();//阻止浏览器默认操作
						}
					ondragleave：鼠标离开目标元素时调用

	例子：
	document.ondragstart = function(e){
		//通过事件捕获获取当前被拖拽元素
		e.target.style.opacity = 0.5;//修改透明度
		e.target.parentNode.style.borderWidth = '3px';//修改父节点边框

		//存值
		e.dataTransfer.setData('text/html',e.target.id);
	}
	document.ondragover = function(e){
		e.preventDefault();//阻止浏览器默认操作
	}
	document.ondrop = function(e){
		//取值,dataTransfer.setData储存的数据只能在drop事件中获取
		var id = e.dataTransfer.getData('text/html');
		e.target.appendChild(document.getElementById(id));
	}

十七：地理定位接口

1、
<div id='demo' class='d'></div>
<script>
	var demo = document.getElementById('demo');
	function getLocation(){
		if(navigator.geolocation){
			//navigator.geolocation.getCurrentPosition(success,error,option);
			//1、success获取地理信息成功的回调
			//2、error获取地理信息失败的回调
			//3、option设置获取地理信息的方式
			
			navigator.geolocation.getCurrentPosition(showPosition,showError,{
				//enableHighAccuracy:true|false是否使用高精度，消耗资源，用电高。
				//timeout设置超时时间
				//maximumAge可以设置浏览器重新获取地理信息的时间间隔
			});
		}else{
			//getLocation is not supported by this browser(浏览器不支持地理地位)
		}
	}
	function showPosition(position){
		//latitude纬度、longitude经度、accuracy精度、altitude海拔高度
		x.innerHTML = '纬度：'+ position.coords.latitude +
					'<br/>纬度' + 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;
		}
	}
	2、如需在地图中显示结果，则要利用第三方例如百度地图，谷歌地图
</script>

十八：Web 存储

sessionStorage
1、特点
	▪针对一个 session 的数据存储，存储数据在当前页面，容量5mb左右。
	▪当用户关闭浏览器窗口后，数据会被删除
2、方法
	▪setItem(key,value):以键值对的方式存储数据
	▪getItem(key):取值
	▪removeItem(key):删
	▪clear():清空所以存储的内容

localStorage
1、特点
	▪没有时间限制的数据存储
	▪在同一个浏览器不同窗口中，可以共享localStorage数据
2、方法和sessionStorage相同

十九、应用程序的缓存

1、优点
	▪用户可在应用离线时使用它们
	▪已缓存资源加载得更快
	▪减少服务器负载
2、所有主流浏览器均支持应用程序缓存，除了IE。
3、Cache Manifest的使用
	▪在<html>中添加 manifest 属性
		manifest='应用程序缓存清单文件的路径，建议扩展名为.appcache'

	▪demo.appcache
	
	#CACHE MANIFEST必须是当前文档的第一句
	CACHE MANIFEST
	#需要缓存的文件清单列表
	CACHE:
	/theme.css
	/logo.gif
	/main.js
	#每次都需要重新从服务器获取的文件清单列表
	NETWORK:
	login.asp
	#配置如果文件午饭获取则使用的文件进行代替
	FALLBACK:
	/html5/404.html